Best practice for tab navigation?

Question

I am looking for best practice using tab navigation using sherlock action bar. What is the proper way to change fragments and add fragments to the stack and clear the back stack when selecting another tab.

Are there any good examples or open source projects showing how to do this correctly?

Answer 1

I would not use ABS directly for this. You will have problems after your tabs require fragment switching, etc. I think the correct approach for this is to use ViewPagerIndicator, which is compatible with ABS. As a bonus, you also get swipe right to left between the tabs. You need a compat package (for example, for ABS), you can find an example of use in the sample folder .

Answer 2

As Edgar said, the navigation guide for Android is a good place to start. But let me add some comments on how tabs are designed to work with Android.

The new acitonbar tabs should be implemented in the same way as in the Google Play application. This means that as soon as you want to get some details of some content on the tab, you will go to a new view / fragment / activity and the tabs will disappear.

So, tabs for android should not be displayed all the time, but only in the top hierarchy. If you want to simplify navigation for the user, you will use the up button so that the user quickly returns to the top hierarchy where the tabs are visible.

Study Guide and Examples

My personal favorite example and tutorial are the tabs in the tutorial on the googles webpage.

Examples of tab navigation can also be found in the samples project, which comes with android-sdk. Go to: android-sdk\extras\android\support\samples\Support4Demos\src\com\example\android\supportv4\app Look for: FragmentTabs.java or FragmentTabsPager.java .

If you want to use ActionBarSherlock, you can also download ActionBarSherlock and look at the samples folder in the / samples directory. There you have demo tabs in TabNavigation.java and TabNavigationCollapsed.java . Although I think you should give a training course of action a shot.

Tabs with back panel

You can also say that you want the tab bar to constantly display ( although this is not recommended ). Then you need to create your own stack for each tab, you can look here for an example of how to implement this.

Maps and tabs

Take a look at all Google apps using Map. Google uses overflow button buttons for navigation. So we developers, but with Google mapsv2 for Android tabs with maps, have become much easier if someone wants to do this.

Answer 3

I have done ActionbarSherlock many times with snippets and tabs and worked great.

You need a TabListener:

 import android.support.v4.app.Fragment; import android.support.v4.app.FragmentTransaction; import com.actionbarsherlock.app.ActionBar; import com.actionbarsherlock.app.ActionBar.Tab; import com.android.wifilogger.R; public class WifiTabListener implements ActionBar.TabListener { public Fragment fragment; public MainTabActivity act; public WifiTabListener(Fragment fragment, MainTabActivity act) { this.fragment = fragment; this.act = act; } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { ft.replace(R.id.root, fragment); } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { ft.remove(fragment); } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { } } 

and TabActivity settings:

 public class MainTabActivity extends SherlockFragmentActivity { public ActionBar actionBar; private ActionBar.Tab listTab; public MenuItem refreshItem; private SherlockFragment listFragment; private SherlockFragment mapFragment; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // getActionBar().setDisplayHomeAsUpEnabled(true); actionBar = getSupportActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); setContentView(R.layout.main); ActionBar.Tab settingsTab = actionBar.newTab().setText("Settings") .setTag("settings"); listTab = actionBar.newTab().setText("Wifi List") .setTag("list"); ActionBar.Tab mapTab = actionBar.newTab().setText("Map").setTag("map"); SherlockFragment settingsFragment = new SettingsFragment(); listFragment = new WifiListFragment(); mapFragment = new WifiMapFragment(); settingsTab.setTabListener(new WifiTabListener(settingsFragment, this)); listTab.setTabListener(new WifiTabListener(listFragment, this)); mapTab.setTabListener(new WifiTabListener(mapFragment, this)); actionBar.addTab(listTab,false); actionBar.addTab(mapTab,false); actionBar.addTab(settingsTab,false); actionBar.selectTab(listTab); } 

If you need to change SettingsFragment, MapFragment and ListFragment to your own snippets. You can also add DialogFragment to one of these tabfragments usng setTargetFragment, but that is not your question, I think.

Answer 4

I recommend you follow Android patterns for navigation:

http://developer.android.com/design/patterns/navigation.html