Android Tab Layout using Fragments and ViewPager | Android Studio | Java

2 min readMar 5, 2021

Android Tab Layout using Fragments and ViewPager | Android Studio | Java

In this tutorial, we are going to create a simple tab layout using fragments and viewpager. The tab layout provides a horizontal layout to display tabs.

TabLayout is released by Android after the deprecation of ActionBar.TabListener (API level 21).

TabLayout is introduced in the design support library to implement tabs.

So let’s see how to create it

Before that let’s see what we’re looking for

Step 1: Design the main XML layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:id="@+id/activity_tab"
    tools:context=".SimpleTabLayout">    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/white"
        app:tabTextColor="@color/white"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="@color/colorPrimary"
        android:layout_marginTop="28dp">
    </com.google.android.material.tabs.TabLayout>    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        app:layout_constraintTop_toBottomOf="@id/tabLayout"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/></androidx.constraintlayout.widget.ConstraintLayout>

Step 2: Create an adapter class

package com.codewithgolap.tablayout.Adapters;import android.content.Context;import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;import com.codewithgolap.tablayout.Fragments.ChatsFragment;
import com.codewithgolap.tablayout.Fragments.HomeFragment;
import com.codewithgolap.tablayout.Fragments.SettingsFragment;public class MyAdapter extends FragmentPagerAdapter {    private Context myContext;
    int totalTabs;    public MyAdapter(Context context, FragmentManager fm, int totalTabs) {
        super(fm);
        myContext = context;
        this.totalTabs = totalTabs;
    }    // this is for fragment tabs
    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                HomeFragment homeFragment = new HomeFragment();
                return homeFragment;
            case 1:
                SettingsFragment settingsFragment = new SettingsFragment();
                return settingsFragment;
            case 2:
                ChatsFragment chatsFragment = new ChatsFragment();
                return chatsFragment;
            default:
                return null;
        }
    }
    // this counts total number of tabs
    @Override
    public int getCount() {
        return totalTabs;
    }
}

Step 3: Add the functionality

package com.codewithgolap.tablayout;import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;import android.os.Bundle;import com.codewithgolap.tablayout.Adapters.MyAdapter;
import com.google.android.material.tabs.TabLayout;public class SimpleTabLayout extends AppCompatActivity {    TabLayout tabLayout;
    ViewPager viewPager;    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_simple_tab_layout);
        tabLayout=(TabLayout)findViewById(R.id.tabLayout);
        viewPager=(ViewPager)findViewById(R.id.viewPager);        tabLayout.addTab(tabLayout.newTab().setText("Android"));
        tabLayout.addTab(tabLayout.newTab().setText("Play"));
        tabLayout.addTab(tabLayout.newTab().setText("Favourite"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);        final MyAdapter adapter = new MyAdapter(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) {            }
        });    }
}