Android Tabs + Sliding, how do I implement ActionBarSherlock?

Question

I\'m using Google\'s new tools to start an application that has the ability to switch between three tabs.

Answer 1

I tried this wizard once and I think I threw away the generated code completely when I implemented this exact pattern with ActionBarSherlock, so I suggest you start with a normal "Blank" activity from scratch. Here is a small step-by-step guide. Not all steps are completely described, but you should find enough documentation with the keywords to get started.

1) Add ActionBarSherlock to your project (obviously)

2) Create a new activity that extends SherlockFragmentActivity and set a proper abs theme

You should have a blank activity with an action bar at this point.

3) Change the layout and include a ViewPager that fills the viewport

4) Write your fragments (or placeholders for now) and the adapter for the ViewPager, wire these together

There are a lot of tutorials out there that explain everything neccessary here, e.g. this blog post.

This should give you an activity with an action bar and a swipable layout. You can swipe between your fragments now.

5) Add action bar tabs and attach a blank tab listener to them

Example:

actionBar = getSupportActionBar();

sampleTab = actionBar.newTab()
    .setText(R.string.title)
    .setTag(TABTAG_SAMPLE)
    .setTabListener(tabListener);

actionBar.addTab(sampleTab);

Make sure that you give each of your tabs an individual tag (a string const is fine). This will be used to identify which tab is clicked in a second. Also make sure that you keep the created tab instances in a class variable. You will need them later on. Repeat the above snippet for each tab. You can use a normal TabListener, but I recomment using the SimpleTabListener since you only need to override one method later.

Now you should have an activity with the action bar, swipeable fragments and (non-functional) tabs.

6) Fill the tab listener and connect it to the viewpager

private SimpleTabListener tabListener = new SimpleTabListener() {

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        final String tag = (String) tab.getTag();

        if (TABTAG_SAMPLE.equals(tag)) {
            viewPager.setCurrentItem(INDEX_SAMPLE);
        } else if (TABTAG_SECONDTAB.equals(tag)) {
            viewPager.setCurrentItem(INDEX_SECONDFRAGMENT);
        }
    }
};

This should be straightforward. You listen for a tab select event, check which tab is selected via the saved tag and call the viewpagers setCurrentItem() method with the index of the fragment that is associated with a certain tab.

Now you should be able to select a fragment via a tab as well as swipe around. You will note that swiping to a certain fragment wont sync the tabs accordingly, they wont get selected properly yet.

7) Attach an OnPageChangeListener to your ViewPager and select tabs accordingly

Again, you can use a SimpleOnPageChangeListener here as well instead of the interface. Short example:

private SimpleOnPageChangeListener onPageChangeListener 
        = new SimpleOnPageChangeListener() {

    @Override
    public void onPageSelected(int position) {
        switch (position) {
        case INDEX_SAMPLE:
            actionBar.selectTab(sampleTab);
            break;

        case INDEX_SECONDFRAGMENT:
            actionBar.selectTab(secondTab);
            break;
        }
    };
};

This should also be self-explanatory. You watch for a swipe action that changes the displayed fragment, check it's index and select the appropriate tab. You see here why you had to keep the tab instances from step 5 around, you need them to select a tab.

Everything should work now.