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 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.
- Now go to dependencies tab and click on the + button and select library dependency.
- Select design and click on ok.
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.
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Tab 1" android:textAppearance="?android:attr/textAppearanceLarge"/> </RelativeLayout> |
- 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.
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | package net.simplifiedcoding.androidtablayout; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * Created by Belal on 2/3/2016. */ //Our class extending fragment public class Tab1 extends Fragment { //Overriden method onCreateView @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { //Returning the layout file after inflating //Change R.layout.tab1 in you classes return inflater.inflate(R.layout.tab1, container, false); } } |
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | package net.simplifiedcoding.androidtablayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; /** * Created by Belal on 2/3/2016. */ //Extending FragmentStatePagerAdapter public class Pager extends FragmentStatePagerAdapter { //integer to count number of tabs int tabCount; //Constructor to the class public Pager(FragmentManager fm, int tabCount) { super(fm); //Initializing tab count this.tabCount= tabCount; } //Overriding method getItem @Override public Fragment getItem(int position) { //Returning the current tabs switch (position) { case 0: Tab1 tab1 = new Tab1(); return tab1; case 1: Tab2 tab2 = new Tab2(); return tab2; case 2: Tab3 tab3 = new Tab3(); return tab3; default: return null; } } //Overriden method getCount to get the number of tabs @Override public int getCount() { return tabCount; } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <resources> <!-- Base application theme. --> <!-- changing it to no actionbar --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
Creating TabLayout and ViewPager
- Now we will create our TabLayout, so come inside activity_main.xml and write the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <LinearLayout android:id="@+id/main_layout" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!-- our toolbar --> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> <!-- our tablayout to display tabs --> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> <!-- View pager to swipe views --> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="fill_parent"/> </LinearLayout> |
- Now come to MainActivity.java.
1 2 3 4 5 6 7 8 9 10 11 | //Implementing the interface OnTabSelectedListener to our MainActivity //This interface would help in swiping views public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener{ //This is our tablayout private TabLayout tabLayout; //This is our viewPager private ViewPager viewPager; |
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @Override public void onTabSelected(TabLayout.Tab tab) { } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } |
- Now come inside onCreate() and write the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Adding toolbar to the activity Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); //Initializing the tablayout tabLayout = (TabLayout) findViewById(R.id.tabLayout); //Adding the tabs using addTab() method tabLayout.addTab(tabLayout.newTab().setText("Your Tab Title")); tabLayout.addTab(tabLayout.newTab().setText("Your Tab Title")); tabLayout.addTab(tabLayout.newTab().setText("Your Tab Title")); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); //Initializing viewPager viewPager = (ViewPager) findViewById(R.id.pager); //Creating our pager adapter Pager adapter = new Pager(getSupportFragmentManager(), tabLayout.getTabCount()); //Adding adapter to pager viewPager.setAdapter(adapter); //Adding onTabSelectedListener to swipe views tabLayout.setOnTabSelectedListener(this); } |
- 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.
1 2 3 4 5 6 | @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition()); } |
- So the final code for MainActivity.java would be.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | package net.simplifiedcoding.androidtablayout; import android.support.design.widget.TabLayout; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; //Implementing the interface OnTabSelectedListener to our MainActivity //This interface would help in swiping views public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener{ //This is our tablayout private TabLayout tabLayout; //This is our viewPager private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Adding toolbar to the activity Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); //Initializing the tablayout tabLayout = (TabLayout) findViewById(R.id.tabLayout); //Adding the tabs using addTab() method tabLayout.addTab(tabLayout.newTab().setText("Tab1")); tabLayout.addTab(tabLayout.newTab().setText("Tab2")); tabLayout.addTab(tabLayout.newTab().setText("Tab3")); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); //Initializing viewPager viewPager = (ViewPager) findViewById(R.id.pager); //Creating our pager adapter Pager adapter = new Pager(getSupportFragmentManager(), tabLayout.getTabCount()); //Adding adapter to pager viewPager.setAdapter(adapter); //Adding onTabSelectedListener to swipe views tabLayout.setOnTabSelectedListener(this); } @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } } |
- Now run you application.
- 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.
Thank you Belal
Thank you belal can you please say how to fetch the tab from database
thank you very mutch
Hi
Dear Belal,
Thank you for the amazing tutorials that you post.
i was wondering if you can make new tutorial about “get current GPS location and store it in MySQL” as well retrieve it to the app so it can be used to know the direction with the help of google Maps
Thank you belal
best posts ever!
just a small problem when sliding through the tabs it seems like its staying in the same tab. I mean that the content of the tabs are switching correctly but the toolbar is not changing the selected tab.
Thank you belal
Best Posts Ever!
Just a small problem, when sliding(not selecting) through the tabs, the content of the page are switching correctly but the pointer on the toolbar are not changing.
For example if I have 3 tabs each one having a text field “Tab1”, “Tab2″,”Tab3” respectively, then if I select first tab1 I’ll se “Tab1”, but if I slide to the next tab I can see Tab 2 but in the toolbar the Tab 1 remains selected. can you help please?
Great tutorial.
Possible to do a TabLayout + ListView with JSON data?
Thanks
nice tutorial working superb, Page title not change when swipe page, please help
thanks
FIX: Tab title not changing when swiping
Write the following code inside OnCreate fn.
// When swiping between pages, select the
// corresponding tab.
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
//actionBar.setSelectedNavigationItem(postion);
tabLayout.setScrollPosition(position,0,true);
tabLayout.setSelected(true);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
It’s working, but still need some work for perfection.
Thanks brother
Yes, that really helped. Thanks!
Fix for Tab Title while Swiping
Just add the below line in onCreate function in MainActivity
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
Below lines of code shows you where to add that line
//Adding adapter to pager
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
//Adding onTabSelectedListener to swipe views
tabLayout.setOnTabSelectedListener(this);
Thanks, its working…
Thanks a lot!!!!! from Buenos aires 🙂
Thank you it works just well!
Thanks.. Really helpfull 😀
Hi! thanks for the awesome tutorials!
If you swipe the page the tab indicator doesn’t change.
Add this:
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
Peace!
how to change selected tab color…..?
how to pass data between tabs.?? Like we do with activities by using intents…. please share the code
You can use a singleton class with an static object to pass data between tabs.
please share the code belal…
Belal khan thnks may be help me tabs of wishlist and wishlistGroup
Thankz Belal…..
Hi Belal Khan!
I wonder if it is possible to disable finger swipe on the pages & only use ‘click on tab’ for the page navigation? I would hope that you provide me the assistance on customizing your source code.
Thank you!
Dont use ViewPager instead use Framelayout and display your fragment on it.
Hi Belal Khan!
Plz tell me,
How we can add an expandable list view items in those tabs??
Please share the code.
how we can add expandable list view containing list items inside the tabs??
Hello sir
please you can help me.
i want add in this tutorial
Create Chat Application in Android using GCM
so please you can make one more tutorial about adding any other tutorial.
thank you
good job bro..
Hi ,thank you very mutch
How to add listview in different tabs ??
how to fill the data in tabs of tabbed view using volley library?
Thanks for the tutorial Belal. Just a suggestion:-
Instead of adding any of the listener in main activity use the method tabLayout.setupWithViewPager(viewPager);
and override the method getTitle in Pager class:
public CharSequence getPageTitle(int position) {
switch(position){
case 0:
return “Tab 1”;
case 1:
return “Tab 2”;
case 2:
return “Tab 3”;
default:
return null;
}
}
remove these lines from MainActivity:
tabLayout.addTab(tabLayout.newTab().setText(“Tab1”));
tabLayout.addTab(tabLayout.newTab().setText(“Tab2”));
tabLayout.addTab(tabLayout.newTab().setText(“Tab3”));
No need to add any listeners in tablayout and viewPager, the both will be automatically linked.
Hi Belal: Nice simple example. With the suggested fix I was able to get the code working.
However, when I went to recreate the files, I ran into an Android Studio error when I right clicked on the project and selected module. This is preventing me from adding library dependencies for the TabLayout and Widget functions.
My minimum build level is 16. The error is:
IllegalArgumentException: Multiple entries with same key: Google Inc.:Google APIs:16=Google
APIs (API 16) and Google Inc.:Google APIs:16=Google APIs (API 16)
How can I make a tab button invisible from tablayout instead of removing a tab.
Code Doesnot work ,While launching an app Error “Unfortunatally app stopped”
How to create custom tabs with custom tab indicator using tab layout.
The following is the layout which includes tab layout :
The following is the custom tab layout :-
————————————————————
By using the above layouts, i’m getting some space on the left side of the tab indicator. how to get rid of that space ?
hi ~
thank you for your tutorial.
but if i slide between the tab (not click on the tab)
the content is able to change to next tab
but tablayout wont change still remain on the first tab
how to add listview in each tab ?
How to enable clicking the tab to switch between layout?
Its already switch to another layout on swipe, but ia want to it change the layout on select the tab.
its giving an error i.e. class not found exception. what to do
setOnTabSelectedListener is deprecated, instead now use: addOnTabSelectedListener
tabLayout.addOnTabSelectedListener(this);
Adding a custom layout to be rendered when a specific tab is clicked or touched is a problem. When I do this the tab name disappears and seems to be replaced by the custom layout. How should I resolve this problem?
Otherwise, useful example.
can we have circle indicator instead of regular indicator.
i had a case where i have use circle indicator so, can we do taht
Hiii
How can i remove swipe of tabs?
actually i have to change tabtext-color and tab icon on tab select and swipe i have used selector method(state_selected) but it worked for tab select not on tab swipe. so how can i do that or i have to remove swipe.
I have got Solution thanks
now i have to scroll view pager how can i do that.plz rply me. thank you
Helllo,
I have applied your code it worked fine but i have to remove swipe of tabs,
how i can remove swipe of tabs?
Hi Belal Khan may help me Wishlist tab and wishlistGroup
Nice tutorial for beginners
Thanks………
hi ,
i have applied ur code in my apps and it works fine..but i have recyclerview and on each item click it should open those item clicked data into different tabs(now i am inserting data through static method and each item has atleast 10 different types of data)..how can i achieve it in my apps???()
In the activity_main the Tablayout should be placed below the ViewPager to enable clicking the tabs also possible if you do not want to swipe
hey i am getting errors saying incompitable types . I did just according to the video but still it gives me errors
i want to indicater in second tab or in center of tab in defult how can i do that?when i open a project tab must be in a center or tab2 like in this project in a tab 1
Suppose i created a button in all three tabs and i wanted to open a new activity when i click on that button how can i do it any example code (of tab.java) will hep me a lot.
hiii !!
your code really helped me a lot bro !!
i was trying for more than a week but was not able.
but just having a single problem, in my case tab names are not showing.
rest all is working great swiping etc
can you help me out.
Hi Belal.I am the big fan of you and your code is very helped me.But now we can’t download full code without login in facebook. and there is many type of fishing to hack our facebook password. Hope you will keep our login details safe and secured. Thank you for your help
Thanks for this tutorial,very clear explanation.
not working in android 5.0 & above.. any suggestion please help
Hey Behal , how to implement recycler view on two tabs and simple login page on another tab in tab view.
Anyone know how to parsing data from php (mysql) on each fragment and show it on recyclerview and cardview? For example tab1 for database1, tab2 for database2 and tab3 for database3. Thanks.
Thanks from chile!
this is my error:
java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
please help
How to disable the swipe functionality of viewpager. I want to change the fragments only when tab is clicked.
hi bro, thanks for the tutorial. i have one small request.
when i implement intent in one of those fragments, action bar is not visible. so can you please shed some light on this?
Thank you very much.
Are there any examples that have two menus? Horizontal menu and one side menu (Navigation Drawer and TabLayout) using ViewPager and Fragments.
I haven’t seen any tutorial that explains how to do it, I’m not very put in programming, anyway you can’t do it, but having these two options is interesting.
Does anyone know a tutorial that explains how to do it?
.
Thank you belal can you please say how to fetch the tab from database….
plz help me
Your work is easily understandable. I like it.
Couldn’t download this file. please solve this issue and add gmail option to download.