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
- 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.
- 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);
- 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:
Attribute | Description |
---|---|
android:textColor | Color of text in non-selected tabs |
app:mtIndicatorColor | Color of the sliding indicator |
app:mtUnderlineColor | Color of the full-width line on the bottom of the view |
app:mtIndicatorHeight | Height of the sliding indicator |
app:mtUnderlineHeight | Height of the full-width line on the bottom of the view |
app:mtTabPaddingLeftRight | Left and right padding of each tab |
app:mtSameWeightTabs | If set to true, each tab is given the same weight |
app:mtTextAllCaps | If true, all tab titles will be upper case |
app:mtPaddingMiddle | If true, the tabs start at the middle of the view |
app:mtTextColorSelected | Color of text in selected tab |
app:mtMrlRippleColor | Color of the ripple |
app:mtMrlRippleHighlightColor | Color of the background while the ripple is undergoing an animation |
app:mtMrlRippleDiameter | Radius of starting ripple |
app:mtMrlRippleOverlay | If true, ripple is drawn in foreground of view. Otherwise, it will drawn in the background |
app:mtMrlRippleAlpha | Level of transparency (alpha) of the ripple |
app:mtMrlRippleDuration | Duration of the ripple animation |
app:mtMrlRippleFadeDuration | Duration of fade out effect on ripple |
app:mtMrlRippleDelayClick | If true, delays calls to OnClickListeners until ripple effect ends. In that case, the indicator line's move to the clicked tab will also be delayed |
app:mtMrlRipplePersistent | If true, the ripple background color persists after animation, until setRadius(0) is called |
app:mtMrlRippleInAdapter | if true, MaterialRippleLayout will be optimized for use in AdapterViews |
app:mtMrlRippleRoundedCorners | Radius of corners of the ripple. Note: it uses software rendering pipeline for API 17 and below |
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.