Best practice for tab navigation?

Question

I am looking for best practice of using tab navigation with sherlock actionbar. What is the proper way of changing the fragments, and adding fragments to the backstack and clearing the back stack when another tab is selected.

Are there any good examples or open source projects showing how to do it right?

Answer 1

I wouldn't use ABS directly to do that. You will run into trouble once your tabs require fragment switching etc. I think the right approach to do this is to use ViewPagerIndicator, which is compatible with ABS. As bonus you also get the swipe right-left between tabs. You need the compat package (like for ABS), example usage you can find in the samples folder.

Answer 2

I have done ActionbarSherlock with fragments and tabs many times and its working wonderful.

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 setting up your TabActivity:

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);

}

Where you have to change SettingsFragment, MapFragment and ListFragment to your own fragments. You can also add a DialogFragment in one of this tabfragments by usng setTargetFragment but this is not your question I guess.

Answer 3

I recommend you to follow the Android Design Patterns for Navigation:

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

Answer 4

As Edgar mentioned the android navigation guide is a good place to start. But let me add some comments to how tabs is intended to work with android.

The new acitonbar tabs should be implemented in the same way as it works in the google play app. This means as soon as you want some detail of some content within a tab you'll go to a new view/fragment/activity and the tabs will disappear.

So the tabs for android shouldn't be visible all the time but only in the top hierarchy. If you want to ease the navigation for the user, you'll implement the up button so the user quickly can get back to the top hierarchy, where the tabs are visible.

Tutorial and samples

My personal favorite example and tutorial is the tabs tutorial under the actionbar tutorial on googles webpage.

Examples of tab navigation can also be found in the samples project that come with the android-sdk. Go to: android-sdk\extras\android\support\samples\Support4Demos\src\com\example\android\supportv4\app And 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. In there you have tab demoes in TabNavigation.java and TabNavigationCollapsed.java. Though I think you should give the actionbar tutorial a shot.

Tabs with back stack

Also lets say you want to have a tab bar that is visible all the time (though it isn't recommended). Then you have to make a custom back stack for each tab, You can look here for an example of how to implement that.

Maps and tabs

Take a look at all Googles apps that use Map. Google use overflow actionbar buttons in order to navigate around with. So should we as developers but with Google mapsv2 for Android tabs with maps has become much easier if anyone should desire to do so.