Android Material Design working with Tabs (Advanced)

Android Material Design working with Tabs (Advanced)

Hi all, Today we are going to learn more about TabLayout about which i have wrote article long back. So today we will lean how to do many things with TabLayout like showing Icons over Tab, Icons with Text over Tab and Customised Tabs.

Example

In this tutorial, we are going to learn how to implement Material Design Tabs by using TabLayout with advanced feature.

VIDEO

1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.

2. Now create an activity_main.xml file under layout directory and add the following code this design will be going to be used for setting material design tabs.

3. Create one more xml layout naming demo_activity.xml which contains some Buttons to do the respective tasks.

4. For demo_activity.xml we need to create Java file as well. So lets create one java class naming StartingActivity.java and place the below code to it.

Don’t forget to declare the StartingActivity.java in Manifest and make this activity as launcher activity.

5. In above class we are passing some intent data naming TabType which is type of ENUM so we will create a java class naming TabType.java and some ENUMs to it.

6. Now to achieve the different type of tabs we need to follow below procedure:

  • Default/Simple Tab : We had done this here.
Default Tab

Default Tab

  • Tab with Icon and Text : For tab with icons we need to get the tab and set the icons to it.
Tab with Icon and Text

Tab with Icon and Text

  • Tab with Icons ONLY : For tab with icons only we need to return empty(“”) string or null string from the method getPageTitle(int position) in ViewPagerAdapter class.
Tab with Icons Only

Tab with Icons Only

  • Custom Tabs: For Custom Tabs we need to inflate custom row over tab.
Custom tab xml layout
Custom Tab

Custom Tab

7. Finally our MainActivity.java will look like below:

8. Finally all done, now you can also make an app with custom tabs.

Thanks. :)

Download Source Code – >

About the author

I am an Android developer for whom Android is the one and only love. I work as a freelancer which gets me and Android closer. I always love to share my learnings and love to learn from others knowledge too.

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)