ViewPager with Tabs inside SlidingMenu

This started as a question on StackOverflow on how to have tabs inside the SlidingMenu.

Though I would opt for another design decision, for example to put the content of the tabs in separate activities, and then instead of having 3 tabs at the bottom inside the sliding menu, have 3 options menu that will redirect to specific activities, I took this design as a challenge and below is the result:

I order to achieve this, PagerSlidingTabStrip in conjuction with ViewPager was used.

I did not include the ActionBarSherlock, as the question on StackOverflow suggested, but if needed that will be easy to integrate: the MainActivity will be required to extend from SherlockFragmentActivity, and the theme @style/Theme.Sherlock.Light added to manifest file, and that is all.

Here are the steps I took to integrate PagerSlidingTabStrip and ViewPager with SlidingMenu:

1 – Add SlidingMenu library to your project
2 – Add PagerSlidingTabStrip library
3 – Add Android Support Library (and copy the same .jar into SlidingMenu and PagerSlidingTabString libraries, otherwise eclipse might complain that the versions of .jar do not match)
4 – A minimal example of MainActivity:

public class MainActivity extends FragmentActivity  {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        SlidingMenu menu = new SlidingMenu(this);
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        menu.setBehindOffset(50);
        menu.setFadeDegree(0.35f);
        menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
        menu.setMenu(R.layout.left_menu);

        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        pager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));

        PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        tabs.setViewPager(pager);
    }
}

5 – The layout of sliding menu, R.layout.left_menu:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/left_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#CCC"
    android:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res/org.grec">

    <com.astuetz.viewpager.extensions.PagerSlidingTabStrip
        android:id="@+id/tabs"
        app:shouldExpand="true"
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_height="48dip" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/tabs" />

</RelativeLayout>

6 – The ViewPagerAdapter:

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

    private final int PAGES = 3;
    private String[] titles={"Tab 1", "Tab 2", "Tab 3"};

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

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new TabFragment1();
            case 1:
                return new TabFragment2();
            case 2:
                return new TabFragment3();
            default:
                throw new IllegalArgumentException("The item position should be less or equal to:" + PAGES);
        }
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

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

7 – And an example of fragment, TabFragment1.java (the other 2 are similar):

public class TabFragment1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_tab_1, container, false);
    }
}

8 – And the layout of the fragment R.layout.fragment_tab_1 which simply displays a TextView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
    <TextView
        android:textColor="#000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment tab 1" />
 
</RelativeLayout>

For full source code visit: https://github.com/vgrec/SlidingMenuWithViewpager