Tutorial Sliding Tab Using Material Design (Best & Simple)

Today i going to share a awesome tutorial about Sliding Tab. In this tutorial we don't need a custom library, but we just use from design:support (Default Material Design)

Must see : How To Open Specific Tab

By using default material design build an awesome UI is more easier that before. That will make developers reduce their stresses hahaha. Take a look at the image below.

The result

If you are interesting with the result and need to implement to your project, then follow the several steps below :

1.  Library

Compile the design:support in your build.gradle(app : Module) :

compile 'com.android.support:design:25.0.0'

2. Create Directory Color

Create new folder in directory res and name it as color (this is directory not a xml file, they are different)

Directory color

Inside the directory color, create a new xml file. Give it name as tab_selector.xml. This selector used for coloring the text of tab's item.

There are two colors, if the tab is selected the color will change to white, if not the color will change to grey.

3.  Colors.xml

For the background of the TabLayout and the color of the selector line, you can choose from Colors.xml.

4. Creating Fragments

Create 3 fragments. Because number of the tab's item is 3. Tab 1 for Home, Tab 2 for Timeline, Tab 3 for Profile.

fragment_first.xml

FirstFragment.java

Also create next fragment for SecondFragment.java and ThirdFragment.java.

5. Creating SlidingTabAdapter.java

This adapter used for set your tab's item. Tab Home for FirstFragment, Tab Timeline for SecondFragment and Tab Profile for ThirdFragment.

Don' forget return the size of your fragment. If you used 3 fragment, so return 3 on inside method getCount().

6. Modify MainActivity.java

In this project i use MainActivity as the class where i hosting my SlidingTabAdapter. You can change with your own class.

Paste the following code :

From the code above :
Code getSupportActionBar().setElevation(0) used for hide a divider between action bar and tab layout.

Codes :

private TabLayout.Tab home;
private TabLayout.Tab timeline;
private TabLayout.Tab profile;

used for set/define your tab's item. It means you creating 3 tab's item.

Codes :

home = tabLayout.newTab();
timeline = tabLayout.newTab();
profile = tabLayout.newTab();

Means home, timeline and profile as a new tabs.

Codes :

tabLayout.addTab(home, 0);
tabLayout.addTab(timeline,1);
tabLayout.addTab(profile,2);

Means you have to define the index of your tab's item. These index will used in SlidingTabAdapter to return a fragment. For example in index 0, you will return the FirstFragment, index 1 will return SecondFragment and index 3 will return ThirdFragment.

For other explanation you can read straight from the code of MainActivity. Hope this tutorial helps you. Thank you.