MaterialTabs

An easy-to-integrate tab bar for Android that completely respects the [Material Design guidelines] (http://www.google.com/design/spec/components/tabs.html) and supports all versions of Android since API 9!

If you think that this library does not fully respect the Material Design guidelines, file an issue, send a pull request or reach out to me! The goal of this library is to be 100% MaterialDesign-compliant.

Sample

You can find a sample app showing what this library can do on the Google Play Store. This sample can also generate the XML code you need instantly and export it! You can then copy paste it in your corresponding layout XML file. Done!

Download

Download the latest AAR or add the following dependency in your build.gradle file:

 dependencies {
     compile 'io.karim:materialtabs:2.0.5'
 }

Usage

1. Add the MaterialTabs widget (io.karim.MaterialTabs) in your layout.xml file:

 <io.karim.MaterialTabs
        android:id="@+id/material_tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="?attr/colorPrimary"
        app:mtSameWeightTabs="true"
        app:mtPaddingMiddle="false" />

Normally, this should go below a Toolbar (android.support.v7.widget.Toolbar) and above a ViewPager (android.support.v4.view.ViewPager). Take a look at [this file] (https://github.com/pizza/MaterialTabs/blob/master/sample/res/layout/activity_tabs.xml) for a better understanding.

2. In your onCreate method (or onCreateView for a fragment), bind the widget to the ViewPager:

 // Initialize the ViewPager and set an adapter
 ViewPager pager = (ViewPager) findViewById(R.id.pager);
 pager.setAdapter(new SamplePagerAdapter(getSupportFragmentManager()));

 // Bind the tabs to the ViewPager
 MaterialTabs tabs = (MaterialTabs) findViewById(R.id.tabs);
 tabs.setViewPager(pager);

3. Create a new class extending FragmentPagerAdapter, and take a look at the "Custom view" section for more info.

Customization

Custom view

Just a TextView (titles)

If you're looking for tabs with text, take a look at the SamplePagerAdapter in [this file] (https://github.com/pizza/MaterialTabs/blob/master/sample/src/io/karim/materialtabs/sample/TabsActivity.java#L331) for a better example.

Everything else (icons and more complex views)

Whether you're looking for tabs with icons instead of text or for more complex custom views, take a look at the MainActivityPagerAdapter in this example instead.

Specifically, make sure that your class implements MaterialTabs.CustomTabProvider and overrides the following methods:

View getCustomTabView(ViewGroup parent, int position);
void onCustomTabViewSelected(View view, int position, boolean alreadySelected);
void onCustomTabViewUnselected(View view, int position, boolean alreadyUnselected);

In the first one, create your View from scratch. In the second and third methods, write code that you want to run when a tab is selected and unselected. A common use case is to replace an icon with another icon when selected. This is exactly the use case demonstrated in the example linked above.

Note: these last two methods might be called several times even though the user just clicked on a tab once (for example). To deal with this case, the alreadySelected and alreadyUnselected boolean parameters specify if the corresponding tab was already selected or unselected respectively so that code that should only be executed once isn't executed more than once.

Custom font/typeface

If you're using the default TextView (i.e. not using custom views) and would like to use a custom font in the tabs' title text, you can do so in your Java code by adding the last two lines just after binding the tabs to the ViewPager:

 // Initialize the ViewPager and set an adapter
 ViewPager pager = (ViewPager) findViewById(R.id.pager);
 pager.setAdapter(new SamplePagerAdapter(getSupportFragmentManager()));

 // Bind the tabs to the ViewPager
 MaterialTabs tabs = (MaterialTabs) findViewById(R.id.tabs);
 tabs.setViewPager(pager);
 
 // Set custom font/typeface to text in tabs' title
 Typeface selectedTypeface = Typeface.createFromAsset(getAssets(), "fonts/Roboto-Bold.ttf");
 Typeface unselectedTypeface = Typeface.createFromAsset(getAssets(), "fonts/Roboto-Regular.ttf");
 tabs.setTypefaceSelected(selectedTypeface);
 tabs.setTypefaceUnselected(unselectedTypeface);

For this to work, make sure to add your font file (in this case, Roboto-Bold.ttf and Robot-Regular.ttf) in the fonts folder under assets.

Other customizations

There are many attributes that you can override in the XML layout. Here is a table of these attributes, their descriptions and their default value:

Don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" to the root item in your layout.

Contribution

If you would like to contribute code you can do so through GitHub by forking the repository and sending a pull request.

Credits

This library is based on the great PagerSlidingTabStrip library by jpardogo and astuetz and on the great material-ripple library by balysv.