Android TabLayout Example using ViewPager and Fragments

February 4, 2016 by Belal Khan 60 Comments

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

<?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>

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

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);
    }
}

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.

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;
    }
}

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.

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

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

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

<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">

<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"/>

<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"/>

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

//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;

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

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }

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

    @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);
    }

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

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
    }

@Override

public void onTabSelected(TabLayout.Tab tab) {

viewPager.setCurrentItem(tab.getPosition());

}

So the final code for MainActivity.java would be.

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) {

    }
}

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.

Android Tablayout Example

Bingo its working absolutely fine. You can get the source code from below.

[wp_ad_camp_1]

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 🙂

About Belal Khan

I am Belal Khan, I am currently pursuing my MCA. In this blog I write tutorials and articles related to coding, app development, android etc.

Comments

Just pass says

February 4, 2016 at 4:02 am

Thank you Belal

Reply
narayana reddy says

February 4, 2016 at 5:16 am

Thank you belal can you please say how to fetch the tab from database

Reply
nabila says

February 4, 2016 at 1:55 pm

thank you very mutch

Reply
Maher says

February 6, 2016 at 8:30 pm

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

Reply
saifi says

February 17, 2016 at 5:55 pm

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.

Reply
Said says

February 18, 2016 at 6:52 am

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?

Reply
Fei says

March 1, 2016 at 4:09 am

Great tutorial.
Possible to do a TabLayout + ListView with JSON data?

Thanks

Reply
Rajaguru says

March 12, 2016 at 6:09 am

nice tutorial working superb, Page title not change when swipe page, please help

thanks

Reply
Joble Jose says

April 9, 2016 at 6:27 am

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.

Reply
Anush Surendran says

April 23, 2016 at 12:21 pm

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);

Reply
- Tony says
  
  September 10, 2016 at 2:34 pm
  
  Thanks, its working…
  
  Reply
- lotrMorris says
  
  October 22, 2016 at 9:08 pm
  
  Thanks a lot!!!!! from Buenos aires 🙂
  
  Reply
- Merinia says
  
  March 1, 2017 at 7:25 pm
  
  Thank you it works just well!
  
  Reply
- Lawliet says
  
  March 4, 2017 at 2:38 am
  
  Thanks.. Really helpfull 😀
  
  Reply
Jason says

April 23, 2016 at 12:36 pm

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!

Reply
sandeep says

April 28, 2016 at 7:19 am

how to change selected tab color…..?

Reply
shashi says

May 3, 2016 at 6:44 am

how to pass data between tabs.?? Like we do with activities by using intents…. please share the code

Reply
- Belal Khan says
  
  May 4, 2016 at 4:04 pm
  
  You can use a singleton class with an static object to pass data between tabs.
  
  Reply
  - shashi says
    
    May 5, 2016 at 5:09 am
    
    please share the code belal…
    
    Reply
  - Cabdinoour says
    
    December 4, 2016 at 1:08 pm
    
    Belal khan thnks may be help me tabs of wishlist and wishlistGroup
    
    Reply
Ujjwal Agrawal says

May 24, 2016 at 10:27 am

Thankz Belal…..

Reply
Divo says

June 1, 2016 at 10:42 am

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!

Reply
Rameez Ahmed says

June 2, 2016 at 12:08 pm

Hi Belal Khan!
Plz tell me,
How we can add an expandable list view items in those tabs??
Please share the code.

Reply
Rameez Ahmed says

June 2, 2016 at 3:08 pm

how we can add expandable list view containing list items inside the tabs??

Reply
Rustam says

June 9, 2016 at 10:10 pm

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

Reply
samir says

June 13, 2016 at 11:51 am

good job bro..

Reply
Naima ELMOURADI says

June 24, 2016 at 3:29 pm

Hi ,thank you very mutch
How to add listview in different tabs ??

Reply
Sudheer Kumar says

June 29, 2016 at 3:52 pm

how to fill the data in tabs of tabbed view using volley library?

Reply
Manobhav says

July 7, 2016 at 11:30 am

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.

Reply
Dale says

July 12, 2016 at 6:42 pm

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)

Reply
Harshita says

July 21, 2016 at 10:36 am

How can I make a tab button invisible from tablayout instead of removing a tab.

Reply
Sudharsan says

August 11, 2016 at 8:47 am

Code Doesnot work ,While launching an app Error “Unfortunatally app stopped”

Reply
k pradeepkumar reddy says

August 11, 2016 at 11:37 am

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 ?

Reply
beginner says

August 15, 2016 at 3:52 pm

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

Reply
newbie says

August 15, 2016 at 4:45 pm

how to add listview in each tab ?

Reply
fasal says

August 17, 2016 at 12:07 pm

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.

Reply
tarun sharma says

September 27, 2016 at 2:06 pm

its giving an error i.e. class not found exception. what to do

Reply
Fernando says

October 8, 2016 at 9:43 pm

setOnTabSelectedListener is deprecated, instead now use: addOnTabSelectedListener

tabLayout.addOnTabSelectedListener(this);

Reply
Bruce Riches says

October 14, 2016 at 12:11 am

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.

Reply
hemanth says

October 19, 2016 at 5:50 pm

can we have circle indicator instead of regular indicator.
i had a case where i have use circle indicator so, can we do taht

Reply
Ripal Patel says

November 29, 2016 at 11:46 am

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.

Reply
- Ripal Patel says
  
  December 1, 2016 at 5:11 am
  
  I have got Solution thanks
  now i have to scroll view pager how can i do that.plz rply me. thank you
  
  Reply
Ripal Patel says

November 30, 2016 at 9:58 am

Helllo,
I have applied your code it worked fine but i have to remove swipe of tabs,
how i can remove swipe of tabs?

Reply
Cabdinoour says

December 4, 2016 at 1:11 pm

Hi Belal Khan may help me Wishlist tab and wishlistGroup

Reply
Manjunath K R says

January 2, 2017 at 6:54 am

Nice tutorial for beginners

Thanks………

Reply
sanjeev acharya says

January 18, 2017 at 5:25 am

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???()

Reply
Emmanuel says

January 23, 2017 at 10:46 am

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

Reply
ketan says

February 9, 2017 at 4:29 pm

hey i am getting errors saying incompitable types . I did just according to the video but still it gives me errors

Reply
amir thapa says

February 14, 2017 at 6:15 am

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

Reply
kanna says

February 15, 2017 at 9:03 am

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.

Reply
ankur says

February 23, 2017 at 12:34 pm

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.

Reply
anand sharma says

March 2, 2017 at 11:29 am

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

Reply
Umapathi says

March 22, 2017 at 8:07 am

Thanks for this tutorial,very clear explanation.

Reply
kamleshwer says

March 29, 2017 at 11:17 am

not working in android 5.0 & above.. any suggestion please help

Reply
Ujwal Thakre says

March 30, 2017 at 4:49 am

Hey Behal , how to implement recycler view on two tabs and simple login page on another tab in tab view.

Reply
Lamberto Fredrick Nababan says

April 6, 2017 at 1:22 pm

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.

Reply
Alvaro says

August 1, 2017 at 6:16 am

Thanks from chile!

Reply
Chao Pisith says

December 7, 2017 at 1:42 pm

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

Reply
Sidhartha mahato says

May 28, 2018 at 7:35 pm

How to disable the swipe functionality of viewpager. I want to change the fragments only when tab is clicked.

Reply

Android TabLayout Example using ViewPager and Fragments

What is Android TabLayout?

Android TabLayout Video Tutorial

Creating our Android TabLayout Example

Adding Design Support to our Project

Creating Layouts for the Tab Views

Creating a pager adapter

Removing Actionbar

Creating TabLayout and ViewPager

Related

About Belal Khan

Comments

Leave a Reply Cancel reply

About Simplified Coding

Quick Links

What is Android TabLayout?

Android TabLayout Video Tutorial

Creating our Android TabLayout Example

Adding Design Support to our Project

Creating Layouts for the Tab Views

Creating a pager adapter

Removing Actionbar

Creating TabLayout and ViewPager

Sharing is Caring:

Related

About Belal Khan

Comments

Leave a Reply Cancel reply

About Simplified Coding

Quick Links

Categories