Android TabLayout Example using ViewPager and Fragments

If you are using the latest android application then you have noticed that now days android is following a design pattern. This is material design and it came with Android Lollipop (5.0). Though we can still …

android tablayout example

If you are using the latest android application then you have noticed that now days android is following a design pattern. This is material design and it came with Android Lollipop (5.0). Though we can still use this design pattern for the older versions (>4.0) by using the support libraries. One of the component of material design is TabLayout. So in this Android TablLayout Example we will see how we can implement it in our android application. You may have already seen Android TabLayout Example in the apps you use daily.  For example WhatsApp the home screen is an Android TabLayout Example from where we switch to calls, chats and contacts.

So lets see in this Android TablLayout Example how we can implement the same in our android project.

What is Android TabLayout?

Android TabLayout provides horizontal layout to display tabs. We can display more screens in a single screen using tabs. User can swipe the tabs quickly as you can see in the image below.

android tablayout example
Android Tablayout Example

Android TabLayout Video Tutorial

  • Check this updated video tutorial for Android TabLayout.

Creating our Android TabLayout Example

  • Open Android Studio and create a new project.
  • I have created AndroidTabLayout.

Adding Design Support to our Project

  • We have to add design support library to the dependencies. So right click on app and to go module settings.

module settings

  • Now go to dependencies tab and click on the + button and select library dependency.

library dependency

  • Select design and click on ok.

choose library dependency

Creating Layouts for the Tab Views

  • We have to create the layout resource files for our tabs. As in this project I will be displaying 3 tabs so I need to create 3 layout files.

project

  • You can see in the image I have tab1.xml, tab2.xml and tab3.xml. All these files are having the same code you can see below.

  • Just change the android:text=”Tab tab_number”,for every layout file to see the tabs are switching or not.
  • For these 3 layout resource files we also need to create 3 java classes that will contain these resource as fragment.

source

  • Create these 3 classes in your project (Tab1, Tab2, Tab3). The code would be the same for every class. Write the following code inside these 3 classes.

  • You just need to change the R.layout.tab1 for Tab1.java, R.layout.tab2 for Tab2.java and so on.

Creating a pager adapter

  • We need a pager adapter to swipe views. So create a new class named Pager.java. and write the following code.

Removing Actionbar

  • Now one thing we just forget. We have to remove the action bar and we will use the toolbar instead. So go to values -> styles.xml and change the app theme.

Creating TabLayout and ViewPager

  • Now we will create our TabLayout, so come inside activity_main.xml and write the following code.

  • Now come to MainActivity.java.

  • In the above code we have implemented the interface OnTabSelectedListener. As we implemented an interface to our class we have to override the methods of this interface. Override the following methods inside MainActivity.java.

  • Now come inside onCreate() and write the following code.

  • Now at last we only need to swipe the view when a new tab is selected. For this go to the overriden method onTabSelected() and write the following code.

  • So the final code for MainActivity.java would be.

  • Now run you application.
android tablayout example
Android Tablayout Example
  • Bingo its working absolutely fine. You can get the source code from below.

Android TabLayout Example Download Source 

So thats all for this Android TabLayout Example guys. Feel free to leave your comments if having any troubles and queries regarding this Android TabLayout Example Project. And stay tuned for more tutorials. Thank You 🙂

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x