Android - Material Design Tutorial -6 ( TabLayout part 2 )

In our previous tutorial, we have learnt how to create a tab layout and linked it with a view pager containing fragments.

We will use the same application that we have created before. (Github link)

1. Tab modes : We can have two different tab modes of tab layout and this can be changed by using app:tabModeparameter inside our xml layout file.

a) Scrollable Tab Mode : This is the layout that we have used in our previous tutorial. If this mode is set, tabs will be scrollable automatically . app:tabMode="scrollable"is used to achieve this effect.

<android.support.design.widget.TabLayout
           android:id="@+id/tabLayout"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           app:tabMode="scrollable" />

b) Fixed tab mode : If this mode is used, tabs cannot be scrolled. app:tabMode="fixed"is used to enable this effect.

<android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed" />

2. Tab Gravity : Tab gravity means the gravity of tabs inside the layout app:tabGravity=” ”is used to change the gravity of tabs.First Change the application to use only three tabs instead of eight i.e. comment out last five fragments of the adapter inside MainActivity :

//adapter.addFragment(new FragmentFour(), "four");
//adapter.addFragment(new FragmentFive(), "five");
//adapter.addFragment(new FragmentSix(), "six");
//adapter.addFragment(new FragmentSeven(), "seven");
//adapter.addFragment(new FragmentEight(), "eight");

a) Gravity center : Change the  TabLayout of activity_main.xml file as below :

<android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="center" />

Result will be as below :

b) Gravity filled : Change app:tabGravity = "fill"to the tab layout of activity_main.xml

That’s all about Tab Layout. If you have any doubts, please comment below.