Android Material Design working with Tabs (Advanced) - Androhub

Material Design Tab Layout Banner

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. :)

4 Comments

Gilvan
Thursday, November 23rd, 2017

Thank you, very clean explanation.

Isso
Sunday, January 21st, 2018

Excellent travail!!!!
Error:(96, 42) error: cannot find symbol method newInstance(String)
can you help me

Isso
Sunday, January 21st, 2018

Great !! 1
I understood why I had the error (96,42); I was not in the right project
Thank you for this beautiful work

son
Saturday, October 31st, 2020

great tutorial, simple and easy, thanks.

Post comment

Your email address will not be published. Required fields are marked *