TabLayout using viewPager in Android

Ashwani Yadav

2 December 2020

TabLayout

Tab layout are visible below toolbar with View pager, used to create swipeable views . Tabs are designed to work with fragments. Use them to swipe fragments in view pager. In this article, we are going to show you how to implement material design tabs in your android app.

Let us create an example of Tablayout using viewPager.

build.gradle

    implementation 'com.android.support:design:28.0.0'

1	implementation 'com.android.support:design:28.0.0'

File : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
    
      <com.google.android.material.tabs.TabLayout
          android:layout_width="match_parent"
          app:tabTextColor="@android:color/white"
          android:background="@color/cardview_dark_background"
          android:id="@+id/tablayout"
          android:layout_height="wrap_content"/>


    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_below="@id/tablayout"
        android:id="@+id/viewPager"
        android:layout_height="match_parent" />


</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

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

<com.google.android.material.tabs.TabLayout

android:layout_width="match_parent"

app:tabTextColor="@android:color/white"

android:background="@color/cardview_dark_background"

android:id="@+id/tablayout"

android:layout_height="wrap_content"/>

<androidx.viewpager.widget.ViewPager

android:layout_width="match_parent"

android:layout_below="@id/tablayout"

android:id="@+id/viewPager"

android:layout_height="match_parent" />

</RelativeLayout>

File: MainActivity.java

In this file, we implement two additional listener addOnPageChangeListener(listener) of ViewPager which makes slides the different fragments of tabs and addOnTabSelectedListener(listener) of TabLayout which select the current tab on tab selection.

package com.example.tablayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {

    TabLayout tabLayout;
    ViewPager viewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout=findViewById(R.id.tablayout);
        viewPager=findViewById(R.id.viewPager);
        tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab3"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

       TabLayoutAdapter adapter=new TabLayoutAdapter(this,getSupportFragmentManager(),tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

            @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 com.example.tablayout;

import androidx.appcompat.app.AppCompatActivity;

import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;

public class MainActivity extends AppCompatActivity {

TabLayout tabLayout;

ViewPager viewPager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

tabLayout=findViewById(R.id.tablayout);

viewPager=findViewById(R.id.viewPager);

tabLayout.addTab(tabLayout.newTab().setText("Tab1"));

tabLayout.addTab(tabLayout.newTab().setText("Tab2"));

tabLayout.addTab(tabLayout.newTab().setText("Tab3"));

tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

TabLayoutAdapter adapter=new TabLayoutAdapter(this,getSupportFragmentManager(),tabLayout.getTabCount());

viewPager.setAdapter(adapter);

viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

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

}

});

}

File : TabLayoutAdapter.java

package com.example.tablayout;

import android.content.Context;
import android.util.Log;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

public class TabLayoutAdapter extends FragmentPagerAdapter {

    Context mContext;
    int mTotalTabs;

    public TabLayoutAdapter(Context context , FragmentManager fragmentManager , int totalTabs) {
        super(fragmentManager);
        mContext = context;
        mTotalTabs = totalTabs;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        Log.d("asasas" , position + "");
        switch (position) {
            case 0:
                return new Tab1Fragmet();
            case 1:
                return new Tab2Fragment();
            case 2:
                return new Tab3Fragment();
            default:
                return null;

        }
    }

    @Override
    public int getCount() {
        return mTotalTabs;
    }
}

package com.example.tablayout;

import android.content.Context;

import android.util.Log;

import androidx.annotation.NonNull;

import androidx.fragment.app.Fragment;

import androidx.fragment.app.FragmentManager;

import androidx.fragment.app.FragmentPagerAdapter;

public class TabLayoutAdapter extends FragmentPagerAdapter {

Context mContext;

int mTotalTabs;

public TabLayoutAdapter(Context context , FragmentManager fragmentManager , int totalTabs) {

super(fragmentManager);

mContext = context;

mTotalTabs = totalTabs;

}

@NonNull

@Override

public Fragment getItem(int position) {

Log.d("asasas" , position + "");

switch (position) {

case 0:

return new Tab1Fragmet();

case 1:

return new Tab2Fragment();

case 2:

return new Tab3Fragment();

default:

return null;

}

@Override

public int getCount() {

return mTotalTabs;

}

Now create different fragment files for all different tabs.

File : Tab1Fragment.java

package com.example.tablayout;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab1Fragmet extends Fragment {

    public Tab1Fragmet() {
        // Required empty public constructor
    }
    
    @Override
    public View onCreateView(LayoutInflater inflater , ViewGroup container ,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_tab1_fragmet , container , false);
    }
}

package com.example.tablayout;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class Tab1Fragmet extends Fragment {

public Tab1Fragmet() {

// Required empty public constructor

}

@Override

public View onCreateView(LayoutInflater inflater , ViewGroup container ,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_tab1_fragmet , container , false);

}

File : fragment_tab1

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Tab1Fragmet">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="match_parent"
        android:text="@string/tab1" />
    
</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".Tab1Fragmet">

<TextView

android:layout_width="match_parent"

android:gravity="center"

android:layout_height="match_parent"

android:text="@string/tab1" />

</FrameLayout>