Actionbarsherlock + tabs + multi fragments?

Solution 1:

I actually managed to get this working without anything more than the ABS library and the support library. Here is my code:

public class ActionBarTabs extends SherlockFragmentActivity {
CustomViewPager mViewPager;
TabsAdapter mTabsAdapter;
TextView tabCenter;
TextView tabText;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);

    mViewPager = new CustomViewPager(this);
    mViewPager.setId(R.id.pager);

    setContentView(mViewPager);
    ActionBar bar = getSupportActionBar();
    bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    bar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);

    mTabsAdapter = new TabsAdapter(this, mViewPager);

    mTabsAdapter.addTab(bar.newTab().setText("Home"),
            ToolKitFragment.class, null);
    mTabsAdapter.addTab(bar.newTab().setText("FujiSan"),
            FujiFragment.class, null);
}

public static class TabsAdapter extends FragmentPagerAdapter implements
        ActionBar.TabListener, ViewPager.OnPageChangeListener {
    private final Context mContext;
    private final ActionBar mActionBar;
    private final ViewPager mViewPager;
    private final ArrayList<TabInfo> mTabs = new ArrayList<TabInfo>();

    static final class TabInfo {
        private final Class<?> clss;
        private final Bundle args;

        TabInfo(Class<?> _class, Bundle _args) {
            clss = _class;
            args = _args;
        }
    }

    public TabsAdapter(SherlockFragmentActivity activity, ViewPager pager) {
        super(activity.getSupportFragmentManager());
        mContext = activity;
        mActionBar = activity.getSupportActionBar();
        mViewPager = pager;
        mViewPager.setAdapter(this);
        mViewPager.setOnPageChangeListener(this);
    }

    public void addTab(ActionBar.Tab tab, Class<?> clss, Bundle args) {
        TabInfo info = new TabInfo(clss, args);
        tab.setTag(info);
        tab.setTabListener(this);
        mTabs.add(info);
        mActionBar.addTab(tab);
        notifyDataSetChanged();
    }

    @Override
    public int getCount() {
        return mTabs.size();
    }

    @Override
    public Fragment getItem(int position) {
        TabInfo info = mTabs.get(position);
        return Fragment.instantiate(mContext, info.clss.getName(),
                info.args);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset,
            int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
        mActionBar.setSelectedNavigationItem(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        Object tag = tab.getTag();
        for (int i = 0; i < mTabs.size(); i++) {
            if (mTabs.get(i) == tag) {
                mViewPager.setCurrentItem(i);
            }
        }
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }
}
}

You load your tab content based on the following.

mTabsAdapter.addTab(bar.newTab().setText("Home"),
            YOURFRAGMENTHERE.class, null);  

This will give you the lovely "swipey tab" effect, as you refer to it, with ABS, the support library and fragments. ABS really makes this nearly the same as working with the native libraries. I actually copied this code straight from Googles paging tabs example and modified it ever so slightly for ABS.

Hope this helps!

Solution 2:

You need the right libraries to implement what you want.

Basically, a ViewPager library is what is missing from you. My suggestions:

1. ActionbarSherlock

It's so dead-easy to work with that I won't explain it.

2. ViewPagerExtensions

You can find it here. Download the ZIP files and create a new project from it.

I only can make this set to work as static, I would like to create this like android market app (swype movement).

Implement com.astuetz.viewpager.extensions.SwipeyTabsView from this project. There are easy-to-follow examples. it does exactly what you want. There are even other tab styles to choose from (including the new People tab that comes with ICS). Besides, it's very easy to style it to match your app identity.

3. FragmentPagerAdapter

Finally, that class from the support library (v4).

Good luck, and be free to ask me if you need more help.


You don't need to override instantiateItem in FragmentPagerAdapter if you're using what I suggested. You only need to

  1. Provide a constructor with a FragmentManager and call the super implementation;
  2. Override getCount to return the number of fragments in your pager, and
  3. getItem, which is what you'll use to return your fragments for creation.

This is an example from code I have here (a full working, production example). It's an inner class to the activity that implements the pager:

static class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public int getCount() {
        return 2;
    }

    @Override
    public Fragment getItem(int position) {
        Fragment f;
        switch(position) {
        case 0:
            f= new ItemSalesDataFragment();
            break;
        case 1:
            f= new DepartmentChooserFragment();
            break;
        default:
            throw new IllegalArgumentException("not this many fragments: " + position);
        }
        return f;
    }
}

As you can see, this pager handles two 'pages', the left displays sales data. The right one allows the user to select which department. Those are returned in the getItem method. The proper fragments (you can use whatever Fragments you already have, no modification needed).

As expected, you join all this together by 1) creating an object that instantiate MyFragmentPagerAdapter, and 2) setting the adapter to your ViewPager object to be that class that you just instantiated. As you can see, its getItem method will "give" the pager all the fragments you need. Example:

mFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mFragmentPagerAdapter);

Of course, there are other things to do, like creating the tab buttons themselves and joining all this to cross-communicate. I suggest looking at the examples provided in the ViewPagerExtensions ZIP file that you download from GitHub. This is just the answer to the question in your comment. As you can see, it's not that much code using this library.

Solution 3:

Lots of examples usually throw an exception (IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first) when switching back to a previously selected tab.

I like to adapt Google's example with a FragmentStatePageAdapter instead of a plain FragmentPageAdapter, which will replace fragments for you and solve this error. Normally this will will destroy fragments that it deems can be removed to save space; override destroyItem(ViewGroup, int, Object) with an empty block if you want to always hold on to your fragments.

Here's an example:

public class ActionBarTabs extends SherlockFragmentActivity {
    CustomViewPager mViewPager;
    TabsAdapter mTabsAdapter;
    TextView tabCenter;
    TextView tabText;
    ActionBar mActionBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);

        mViewPager = new CustomViewPager(this);
        mViewPager.setId(R.id.pager);

        setContentView(mViewPager);
        mActionBar = getSupportActionBar();
        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        mActionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);

        mTabsAdapter = new TabsAdapter(this, mViewPager);

        mTabsAdapter.addTab(mActionBar.newTab().setText("Page 1"), 
            YOURFRAGMENT_A.class, null);
        mTabsAdapter.addTab(mActionBar.newTab().setText("Page 2"), 
            YOURFRAGMENT_B.class, null);
        mTabsAdapter.addTab(mActionBar.newTab().setText("Page 3"), 
            YOURFRAGMENT_C.class, null);
    }

    public static class TabsAdapter extends FragmentPagerAdapter
            implements ActionBar.TabListener, ViewPager.OnPageChangeListener {
        private final Context mContext;
        private final ActionBar mActionBar;
        private final ViewPager mViewPager;
        private final ArrayList<TabInfo> mTabs = new ArrayList<TabInfo>();

        static final class TabInfo {
            private final Class<?> clss;
            private final Bundle args;

            TabInfo(Class<?> _class, Bundle _args) {
                clss = _class;
                args = _args;
            }
        }

        public TabsAdapter(SherlockFragmentActivity activity, ViewPager pager) {
            super(activity.getSupportFragmentManager());
            mContext = activity;
            mActionBar = activity.getSupportActionBar();
            mViewPager = pager;
            mViewPager.setAdapter(this);
            mViewPager.setOnPageChangeListener(this);
        }

        public void addTab(ActionBar.Tab tab, Class<?> clss, Bundle args) {
            TabInfo info = new TabInfo(clss, args);
            tab.setTag(info);
            tab.setTabListener(this);
            mTabs.add(info);
            mActionBar.addTab(tab);
            notifyDataSetChanged();
        }

        @Override
        public int getCount() {
            return mTabs.size();
        }

        @Override
        public Fragment getItem(int position) {
            TabInfo info = mTabs.get(position);
            return Fragment.instantiate(mContext,
                info.clss.getName(), info.args);
        }

        @Override
        public void onPageScrolled(int position, float positionOffset,
            int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            mActionBar.setSelectedNavigationItem(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }

        @Override
        public void onTabSelected(Tab tab, FragmentTransaction ft) {
            Object tag = tab.getTag();
            for (int i = 0; i < mTabs.size(); i++) {
                if (mTabs.get(i) == tag) {
                    mViewPager.setCurrentItem(i);
                }
            }
        }

        @Override
        public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        }

        @Override
        public void onTabReselected(Tab tab, FragmentTransaction ft) {
        }
    }
}

Works well with ABS and is relatively simple to implement.