Android Material Design Tabs Using TabLayout

Android Material Design Tabs Using TabLayout

In earlier we use ActionBar Tabs over ViewPager that we had done in earlier post that you can check here. But this ActionBar Tabs is deprecated in material design. So for that we need Material Design Tabs for implementing tabs in our app. We have seen Google Play Store, Whatsapp and many more are using Material Design Tabs.

So in today’s article we are going to learn how to implement this Material Design Tabs in our app. For this we should have some knowledge about Material Design that you can check in this tutorial of Material Toolbar tutorial.

Before starting we need three libraries to be included in our build.gradle file :

The design library is necessary for implementing tabs.

Now for implementing Tabs we need to know about something new in design library widgets that are:

Example

In this tutorial, we are going to learn how to implement Material Design Tabs by using TabLayout and  also how to hide and show toolbar on scroll.

VIDEO DEMO

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. Open res=>values and inside values directory create a new xml file naming colors.xml and the following colors to that file.

3. Now open res=>values and inside values directory open styles.xml file and add the following style to it. This style is necessary for material design.

4. For Lollipop versions we need to create a new directory under res directory naming values-v21 and under this values directory create new styles.xml file and add the following style for lollipop versions.

5. 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.

The scroll flags for the Toolbar specify how it must behave upon scroll (i.e. its animation). “scroll|enterAlways” says make my Toolbar react to scroll events. Hide it when scrolling down, and reveal it when scrolling back up.

This behavior will be indicated by our ViewPager which will be hold our Fragments. The Fragments hold our scrollable view. So when we scroll down a list, the Toolbar knows when to react.

6. Since we have to add fragments over viewpager so for that we need a layout for fragment also so we create a new layout naming dummy_fragment.xml and add the following code. In this design i had used recyclerview for listing items.

7. Now we have to create another layout for recyclerview row items naming item_row.xml and add the following code. In this code i had taken CardView that is also an part of design for this we had included library of cardview. This will display items in cards.

8. Now create a ViewHolder java class for recyclerview item row naming DemoViewHolder.java and add the following code.

If you are not aware hoe to use recyclerview in android then you can check my tutorial about RecyclerView.

9. After creating viewholder we need to create a adapter class for recyclerview naming RecyclerView_Adapter.java.

10. Now come to your MainActivity.java and add the following code for setting Material Design Tabs over viewpager. In this activity we are using a FragmentPagerAdapter for setting fragment over viewpager and adding tabs over viewpager with title and finally attach the view pager to tabs.. We can also use tabListener for listening tab selection.

Note viewPager.setCurrentItem(tab.getPosition()); This handles changing the fragment based on Tab click.

11. Finally we need to create a DummyFragment.java for placing a fragment over viewpager when tab is selected. In this class we are getting tab title via parameter and using it for setting array over recyclerview.

If you ant to read more for fragments then you can read my tutorial about Android Fragments.

12. Finally all done, run the app and you will get the output as shown in video.

Thanks. :)

Download Source Code – >

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)