Nesting tabs in Android 4 with support library (ActionBarSherlock)

Question

I'm having serious problems getting three layers of nested tabs to work in an app that runs from Android 2.1 up and looks like Android 4 (uses support library fragments).

The goal

• App should have an ActionBar (works, currenly uses ActionBarSherlock)
• 3 fixed tabs on the main screen, that don't move into the ActionBar even if the screen is large enough. The second of these tabs contains...
• About 4 tabs that were loaded from a server when the user logged in the first time. Each of these contains
• About 10 swipable tabs (like in the Play Store) that were loaded from a server when the user logged in the first time. My idea here is to use ViewPagerIndicator, since that library is written by the same guy who ActionBarSherlock which should keep problems down to a minimum. But I'm open to ideas here). Each of these swipable tabs contains something that is currently a Fragment, but could be changed.

The Problem

When this was an Android 2 app, it simply used nested TabActivities, but these don't work with all the Android 4 stuff. I don't understand how to do this probably, especially the "you can't nest fragments" restriction is causing me headaches. Also, it seems that you can only use one FragmentManager per Activity, so my idea to have one in each of the second row tabs didn't work (All except for the first tab remained empty). How to do this the right way?

(Please understand that "Use a different GUI design" is not an option since this is what the customer asked for and he won't reconsider)

Maletta

Why not use tabactivities for main screen and viewpagerindicator for swipable tabs inside each of the tab activities. – Donald

Because the tabs of the actionbar only take Fragments. Using TabActivities there doesn't work. – Maletta

@MichaelZinn Is this somewhere mentioned in the Android dev guide: 'especially the "you can't nest fragments" restriction'... I just posted a similar question: #15609435 because I'm looking for similar thing. – Dash

Answer 1

PagerAdapter does not require Fragments as children. You can inflate/manage your own custom views in there. So you could continue to use nested TabActivities. Or, you could put Fragments at the top-level, and manage your own Views in the bottom-level ViewPager.

You could also, theoretically, use ViewFlipper if you want to keep the Fragments in the ViewPager. You'll have to write your own LinearLayout with Buttons as tabs, but this is easy. If you're looking for the Holo look, simply set the style to the ones found in ABS.

Another option is to use TabHost without using the TabActivity. You can even use it with Fragments. See the example here.

Also note: If you're looking for the Google Play style of ViewPagerIndicator, thats now inlcuded in the Support package: PagerTitleStrip.

I'd imagine that your best option is to use Fragments as the top-level, as this will help with memory consumption.

That said,

I must say that this sounds like a terrible UI pattern. Even worse, we are talking about a lot of inflated views in one Activity. You may run into memory issues here, depending on whats being shown. I suggest heavy usage of ViewStubs and recycling if you keep the ViewPager at the bottom.

Keep trying to push the client toward using the ActionBar spinner pattern for top-level (main 3 tabs), or even consider the fancy sliding drawer pattern. Perhaps that smooth animation could be enough to sway their opinion.

Refer them to the official design website, and show examples of popular navigation patterns like the ones found in Gmail, YouTube, Google+, Evernote, etc. I recently dealt with a client requesting the exact-same pattern you describe, and after weeks of pushing was able to convince them that more-than` 2 layers of tabs is unacceptable.

You can also show them my Wall of Shame Google+ page, highlighting bad design patterns used in popular Android apps: Android UI Anti-Patterns. :-)

Heptode

Thanks, this comment field is too small to write exactly what I did, but basically I ended up convincing the customer to change the GUI. :) – Maletta