Android Material Design Tabs

Android-Material-Design-Tabs

With Material Design Android Team almost changed everything. They released a Support Library which included many material design components to build a good looking UI for Android Lollipop devices as well as older android versions.

Tab Layout is now part of Android Support Library. The material design solved many problems that android developer faced while creating any tab based UI.

Features of Material Design Tabs

  • We can use Image and text in tabs
  • Tab Strip color can be easily changed
  • Tabs can be easily used with other material design components like Toolbar, AppBar
  • Tabs can be made fixed or scrollable
  • We can use custom views for our tabs no need for 3rd party libraries

In this article I will show you how we can use support library to create awesome looking tabs.

Create a new project as MaterialDesignTabs follow this steps,

Note:

  • Download Icons from Google Material Icons site and paste into your drawable folder
  • Only download 24dp size icon or else Tabs will look ugly

 

1> Add these dependency in your build.gradle (Module:app),

After adding dependencies just rebuild your project, it will download the required files.

 

2> Now goto res-> values-> colors.xml and paste below code,

It is the color scheme for our entire app.

 

3> Inside values folder goto styles.xml and paste below code,

This is the style for our app, Material Design will do it’s charm to make app look beautiful.

By now our app will look like this,

androidnovice_statusbar

status bar is now has primary dark color now,

Note: Change in Status Bar color will only work on Android Lollipop and above.

 

4> Now in your activity_main.xml copy paste below code,

AppBar is a view from support library which works similarly as LinearLayout. Inside AppBar we have defined ToolBar and TabLayout. AppBar is mostly used for scrolling gestures.

To make Tabs with swipe gesture we have included ViewPager from support library(v4).

By now our app will look like this,

appbar-androidnovice

 

5> Now create a new layout file as first_fragment.xml,

This file is a layout for our Fragment. Fragments are basically replaceable containers. We are going to use fragments along with ViewPager to implement swipe tabs.

 

6> Create another layout file second_fragment.xml and paste below code,

 

7> Create another layout file third_fragment.xml,

 

8> Create another layout file fourth_fragment.xml,

We have create 4 layout files for our fragment now it’s time to create corresponding java file for each layout.

 

9> Create new java file as FirstFragment.java and paste below code,

We don’t need to write much logic into this file. Our main purpose is to implement Swipable Tabs.

 

10> Create another java file as SecondFragment.java,

 

11> Create new java file as ThirdFragment.java,

 

12> Create a new java file FourthFragment.java,

Although it is unneccesory but I have included all the Fragment’s XML and Java files in case somebody may not know about Fragments.

 

Now, here is a really important file this file will handle our Swipe Gesture. It is an adapter for our ViewPager which handles Gestures and will provide fragments related to that gestures.

 

13> Create a new java file MyPagerAdapter.java and paste below code,

There are two options to create Adapter for ViewPager,

  1. FragmentStatePagerAdapter.
  2. FragmentPagerAdapter – This is the one we are using.

We can use any of them. The void addFragment() method is used to add fragments and associated tab names.

 

14> Now in your MainActivity.java paste below code,

If you run the app, you will see something like, (Screenshot from device running Android 4.3)

tabs-with-icon

 

Now comment these lines,

and replace the code inside setupViewPager(ViewPager viewPager) method to this,

 

15> Here is how our MainActivity.java will look after making all above & other necessary changes,

Now you can see there are only Labels in Tabs instead of Icons. Our app looks like,

tabs-only-labels

 

How to make Scrollable Tabs Like Google PlayStore?

Add this line to your TabLayout Widget inside your activity_main.xml.

 

How to change Tab Indicator Height?

Inside TabLayout Widget of your activity_main.xml change value of below line.

 

How to make tab icons looks closer to each other?

How to Change Tab Gravity?

Tab can have Gravity either fill or center.

Inside TabLayout Widget of your activity_main.xml change value of below line.

Run the app now.

Here is how our app will look like when it has center gravity and 4dp of Indicator height.

tabs-with-center-gravity

 

We can create many complex view just like the one google play store have, but for this tutorial I will not go further. In future we will implement complex UI using Tabs. If you have any error or suggestion mention below in comments.

4 comments

Leave a Reply

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