How to create Toolbar Tabs with ViewPager in material design

Question

Anyone know anything about how tabs are done in API 21/AppCompat Toolbar?

A lot of materials and articles what I found were old. They used old methods with ActionBar which don`t work now. At this moment I just created toolbar and have no ideas about toolbar tabs. So can anyone give examples or articles about how to make toolbar tabs with viewpager?

Solution 1

Anyone know anything about how tabs are done in API 21/AppCompat Toolbar?

There are no Toolbar tabs. The pattern of having tabs in the action bar was deprecated by Material Design, and when they created Toolbar, they dropped tabs.

So can anyone give examples or articles about how to make toolbar tabs with viewpager.

There are no Toolbar tabs.

You are welcome to use PagerTabStrip, the TabPageIndicator from the ViewPagerIndicator library, PagerSlidingTabStrip, etc. for your ViewPager tabs.

Solution 2

1 . Copy SlidingTabLayout.java from https://developer.android.com/samples/SlidingTabsColors/src/com.example.android.common/view/SlidingTabLayout.html and paste it in your package.

MainActivity.java

public class MainActivity extends ActionBarActivity {

static final String LOG_TAG = "SlidingTabsBasicFragment";
private SlidingTabLayout mSlidingTabLayout;
private ViewPager mViewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.fragment_sample);
    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);

    mViewPager = (ViewPager) findViewById(R.id.viewpager);
    mViewPager.setAdapter(new SamplePagerAdapter());
    mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
    mSlidingTabLayout.setViewPager(mViewPager);

    /*
     * FragmentTransaction transaction =
     * getSupportFragmentManager().beginTransaction();
     * SlidingTabsBasicFragment fragment = new SlidingTabsBasicFragment();
     * transaction.replace(R.id.sample_content_fragment, fragment);
     * transaction.commit();
     */

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

class SamplePagerAdapter extends PagerAdapter {

    /**
     * @return the number of pages to display
     */
    @Override
    public int getCount() {
        return 5;
    }

    /**
     * @return true if the value returned from
     *         {@link #instantiateItem(ViewGroup, int)} is the same object
     *         as the {@link View} added to the {@link ViewPager}.
     */
    @Override
    public boolean isViewFromObject(View view, Object o) {
        return o == view;
    }

    // BEGIN_INCLUDE (pageradapter_getpagetitle)
    /**
     * Return the title of the item at {@code position}. This is important
     * as what this method returns is what is displayed in the
     * {@link SlidingTabLayout}.
     * <p>
     * Here we construct one using the position value, but for real
     * application the title should refer to the item's contents.
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return "Item " + (position + 1);
    }

    // END_INCLUDE (pageradapter_getpagetitle)

    /**
     * Instantiate the {@link View} which should be displayed at
     * {@code position}. Here we inflate a layout from the apps resources
     * and then change the text view to signify the position.
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // Inflate a new layout from our resources

        View view = getLayoutInflater().inflate(R.layout.pager_item,
                container, false);
        // Add the newly created View to the ViewPager
        container.addView(view);

        // Retrieve a TextView from the inflated View, and update it's text
        TextView title = (TextView) view.findViewById(R.id.item_title);
        title.setText(String.valueOf(position + 1));

        Log.i(LOG_TAG, "instantiateItem() [position: " + position + "]");

        // Return the View
        return view;
    }

    /**
     * Destroy the item from the {@link ViewPager}. In our case this is
     * simply removing the {@link View}.
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
        Log.i(LOG_TAG, "destroyItem() [position: " + position + "]");
    }

}

}

fragment_sample.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/my_awesome_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:minHeight="?attr/actionBarSize"

        app:theme="@style/ThemeOverlay.AppCompat.ActionBar">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <com.example.android.common.view.SlidingTabLayout
                android:id="@+id/sliding_tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

Pager_item.xml

<?xml version="1.0" encoding="utf-8"?>

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

    <TextView
          android:id="@+id/item_subtitle"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textAppearance="?android:attr/textAppearanceLarge"
          android:text="Page:"/>

    <TextView
          android:id="@+id/item_title"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="80sp" />

</LinearLayout>

Comments

[Nurzhan Nogerbek]

Thanks for your answer. I just make my first steps in android programming. I've tried SlidingTabs and some other libraries, but they all are outdated. They used old methods with ActionBar. As you know now with Android 5.0, the whole ActionBar is being replaced by ToolBar. Are you sure that this your library will be work?!

[Nurzhan Nogerbek]

Do you have any examples or articles about tabs in material design?!

[CommonsWare]

@NurzhanNogerbek: "As you know now with Android 5.0, the whole ActionBar is being replaced by ToolBar" -- not really. Using a Toolbar as your action bar is an option. It is not required. You can still use ActionBar the way you have previously, though tab and list navigation are deprecated. "Are you sure that this your library will be work?" -- since none of the options I cited have anything to do with the action bar, I feel quite confident that they work. "Do you have any examples or articles about tabs in material design?" -- google.com/design/spec/components/tabs.html

[Nurzhan Nogerbek]

Thanks for this code! I have mistake in SamplePagerAdapter.java document which you give me in this place getLayoutInflater(). How solve this problem?

[kunal.c]

Please elaborate your problem

[Nurzhan Nogerbek]

I pasted SlidingTabStrip and SlidingTabLayout in my project as you said, then i used your code in my Main Activity, then i created SamplePagerAdapter.java document and used your code but i have one mistake in it. getLayoutInflater() Cannot resolve method. So where this method discribed and what we need to do in this method! Pls i need your view to this problem!

[Apurva]

maybe you missed tabLayout

[CommonsWare]

@Apurva: TabLayout has nothing to do with Toolbar. For example, this sample project shows a TabLayout in a project with no Toolbar.

[carl]

So this means that in the new toolbar design, we are forced to use two lines at least, always, one for toolbar and one for tabs? SO IDIOTIC on a small screen (dependant on your features on the toolbar).