Navigation with drawer and tabs like in Newstand

Question

I'm trying to replicate the Google newstand app navigation system, where i can use the navigation drawer menu and tabs at the same time, like this:

I'm trying to achieve the exact same effect as newstand, single color for the action bar and tabs, and tabs not spanning for the whole lenght of the screen I was able to decompile the app, and I've seen the source of another app that uses this (series guide) but they're quite complex and I can't find and figure out where and how it's implemented.

I have tried using the template that Android Studio has created for me for the navigation drawer and adding the tabs with no effect

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mNavigationDrawerFragment = (NavigationDrawerFragment)
                getSupportFragmentManager().findFragmentById(R.id.navigation_drawer);
        mTitle = getTitle();

        // Set up the drawer.
        mNavigationDrawerFragment.setUp(
                R.id.navigation_drawer,
                (DrawerLayout) findViewById(R.id.drawer_layout));

        ActionBar actionBar = getSupportActionBar();
        /*
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        actionBar.setDisplayShowTitleEnabled(true);


        ActionBar.Tab tab = actionBar.newTab()
                .setText("Artist")
                .setTabListener(new TabListener<PlaceholderFragment>(
                        this, "artist", PlaceholderFragment.class));
        actionBar.addTab(tab);

        tab = actionBar.newTab()
                .setText("album")
                .setTabListener(new TabListener<PlaceholderFragment>(
                        this, "album", PlaceholderFragment.class));
        actionBar.addTab(tab);
*/

        actionBar.setHomeButtonEnabled(true);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        String[] tabs = { "Top Rated", "Games", "Movies" };
        // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(new TabListener<PlaceholderFragment>(
                            this, "album", PlaceholderFragment.class)));
        }
    }

So far I've tried this using the android libraries, but i don't mind using external onex like actionbar sherlock

Answer 1

You're looking for Google's SlidingTabLayout. And SeriesGuide is open source, but uses PagerSlidingTabStrip.

To use Google's SlidingTabLayout, you'll need to copy over two classes into your project. The classes you need are:

• SlidingTabLayout
• SlidingTabStrip

An example layout implementing the SlidingTabLayout would looks this like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">

    <your_path_to.SlidingTabLayout
          android:id="@+id/slidingTabs"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
          android:id="@+id/viewPager"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1" />

</LinearLayout> 

After inflating the layout and initializing the SlidingTabLayout using View.findViewById, you call SlidingTabLayout.setViewPager to bind the ViewPager to the tabs.

Check out Google's example for a full project