How To Create Tabs In Android Using TabLayout

Tabs are a big part of the Android Material design. They are used constantly to improve the user experience. By using tabs together with fragments, you are able to deliver fast and seamless navigation through your app. If you don’t already know what are fragments, then check out this post before diving into this one. Tabs are used in a lot of Google apps, for example YouTube, Google Play etc. But Google is not the only one using this design pattern, the Twitter app is also a notable user of this pattern.

Native Android Studio Template

When creating a new activity, Android Studio provides a couple of templates that you can use. Those are “Blank Activity”“Maps Activity” etc. And one of them is the Tabbed Activity”This template provides you with an activity that has the normal activity java class and the XML resource file, but it also provides you with Fragment Pager Adapter and a placeholder Fragment and the resource file for the fragment. This is truly a placeholder fragment, because it is set up in such a way so that is creates three instances of itself, always inflating the same XML resource file. This is used just to show you how it can be used. Mostly, I suggest that you build out the tab layout by yourself, but if you need a really simple one you can use the Android Studio template as well. In this tutorial, I’m going to be showing you how to combine these two methods. as just using the Android Studio template is too generic and it makes no sense to write a ton of code that your IDE can generate for you.

Create A New Activity

I’m going to add our TabLayout in a secondary activity.

Go to : File -> New -> Activity -> Tabbed Activity

This should show a window that looks something like this:

You can keep everything as it is. Of course, if you want to change the name of the activity, or set it in a different package, you can do it. It won’t affect the process of adding tabs. I renamed my activity to Tabs. Click Finish. This should start a new Gradle project build, as it has added something new to the app:module Gradle script. And that is this:

The main thing that enables us to add the tabs in our app is the com.android.support:design:{&yourBuildVersion}.

Edit The Java Code

Run the app

After running the app you should have something that looks like this:

As you see, this app does feature three fragments through which you can navigate by sliding. But this is not what we wanted. We need three tabs, so that we can see on which fragment we are and so we can directly through tapping on one of the tabs.

Creating Three Different Fragments

I don’t like how the Android Studio sets up three classes in a single java file, so we’re going to change that. Actually, you can delete the Placeholder Fragment as we’re going to create our one so it will be more customisable.

So, create three new classes that extend the Fragment class. I will create classes : Tab1, Tab2 and Tab3. Also, I created a new sub package for my fragments. It just makes the project cleaner.

Also, you need to create three new XML layout files for our fragments. You can put anything in them.

All three of these classes are going to be overriding the onCreateView method. So our classes should look something like this:

And the XML  layout file looks like this:

I set a different background color for each of the fragments.

Edit the SelectionPagerAdapter java file

First of all, I created a new java file for the adapter. This is how the class should look like:

Edit the onCreate Method

Our app is almost done. We just need to make some small changes to the onCreate method, but first you’ll need to add this to your activity.xml file:

And now add this to your onCreate method in the activity class:

The final app should look like this: