Swipe to switch tabs on Android, like the YouTube/Google Music apps

Question

In their latest versions of their apps, Google has implemented a pretty cool way of swiping between tabs versus clicking tab headers. I was wondering if someone has more concrete ideas of how this is done.

Here are some thoughts - feel free to critique:

My initial thought is that this isn't a standard TabActivity which hosts child activities. Infact, I don't even think it's a custom ActivityGroup either. The row of tabs scrolls when swiped, but doesn't cause the active tab to switch.

Swiping the main content of the tab exhibits interesting behavior. I suspect there is a GestureListener attached to main content area. As tabs are swiped, rows from the adjacent tab become visible. This seems to suggest that this is a horizontally scrollable group of ListViews. It's almost like a horizontally scrollable HTML div, where all content already exists but comes into view when swiped. I'm not really sure how rendering of the rows is handled though (traditionally, rows are built and displayed when scrolling a list up/down not left/right). So maybe it's a custom ListView implementation too? When not scrolling side-to-side, it behaves as you would expect a regular ListView to, including fast-scrolling and glow effect when pulled down.

The row of tabs is probably a ScrollView, as evidenced by the glow effect when swiped to the edges. The row of the tab contents isn't.

I'm trying to build a mental model of the different pieces that comprise this really nifty piece of UI. Any insights are much appreciated.

Answer 1

the most valuable source of information how to do it perfectly is a source from IO 2011 application

Look into ScheduleFragment and Workspace classes.

Thanks.

Answer 2

It is the same metaphor that the Home screen has: multiple pages, you can swipe horizonally, and each screen does what it does. It has the "lock" behavior (if you swipe over enough it jumps to the new tab, but if you don't swipe far enough it pops back to the already visible screen) except that instead of the little dots on the bottom of the Home screen it uses the tabs as the indicators of which page you are on.

As you said, the tabs don't scroll. Also you CAN'T actually vertical scroll while in the middle of a swipe so it is essentially a straightforward implementation similar to what you can find here. I guess with multitouch you COULD make it vertical scroll but it would be really weird and largely unnecessary: cool to look at, but limited utility. The ListViews don't need to do anything other than be standard ListViews. There is probably a custom Button-based tab widget at the top, and based on the scrolling the Button styles are updated to highlight the right tab. And that's about it.

Answer 3

Layout for Youtube app is like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout ...>
    ...
    <TabRow android:id="@id/tabrow" .../>
    <Workspace android:id="@id/workspace" ...>
        <ListView android:id="@id/uploads" ... />
        <ListView android:id="@id/favorites" ... />
        <ListView android:id="@id/playlists" ... />
        <ListView android:id="@id/subscriptions" ... />
    </Workspace>
</LinearLayout>

Google introduces 2 widgets that are also used in Music app:

• com.google.android.youtube.ui.TabRow.

  TabRow extends HorizontalScrollView

• com.google.android.youtube.ui.Workspace

  Workspace extends ViewGroup

About implementation, well, anybody can have a peek using the "right tools". But this would give some rough code and maybe incorrect one. I gave it a try, with no much luck. Someboby motivated and with goog skills could make it I think.

Other solution and better one : I just hope Google releases a lib or the code for these classes soon. This piece of GUI is really a pleasure to use.

Answer 4

You can lay your Tabs inside an empty frame.

Attach a GestureDetector.SimpleOnGestureDetector to that frame with an override on the onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) method.

You can decide how strong a fling is needed before you want the tab to actually change. by using cumulative distance between e1 and e2.

Remember to return false on your onFling or the touch event won't fall down to the View's below.

Answer 5

I think what you are referring to is the Workspace-Pattern. Unfortunately, Google has not made it a standard, so you have to implement it on your own.

To do so, you should use the ViewPager or the FragmentPagerAdapter (Programming Example).

Answer 6

I believe I have found the solution to what you are looking for. The tabs are actually in the apps' action bar:

http://developer.android.com/guide/topics/ui/actionbar.html#Tabs

Also, chapter 14 of Android for Programmers - An App-Driven Approach (ISBN 0132121360) focuses on this action bar tab system perfectly.