Android Studio TabLayout

TabLayout provides a horizontal layout to display tabs and allows the user to swipe left or right to view content associated with each tab. In this tutorial, we will learn how to create TabLayout in Android Studio.

Syntax

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill"
    app:tabBackground="@drawable/tab_selector"/>

Example

Let’s create a simple TabLayout with two tabs: "Tab 1" and "Tab 2".

1. Create a new project in Android Studio.
2. Open the app > res > layout > activity_main.xml file.
3. Replace the code with the following:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill"
    app:tabBackground="@drawable/tab_selector"/>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_below="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

</RelativeLayout>

4. Create a new class named MainActivity.java and add the following code:

package com.example.tablayoutdemo;

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 {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private ViewPagerAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.view_pager);
        adapter = new ViewPagerAdapter(getSupportFragmentManager());

        // Add fragment to adapter
        adapter.addFragment(new Tab1Fragment(), "Tab 1");
        adapter.addFragment(new Tab2Fragment(), "Tab 2");

        // Set adapter to ViewPager
        viewPager.setAdapter(adapter);

        // Set the current view of ViewPager and TabLayout
        tabLayout.setupWithViewPager(viewPager);
    }
}

5. Create two new classes named Tab1Fragment.java and Tab2Fragment.java and add the following code:

package com.example.tablayoutdemo;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class Tab1Fragment extends Fragment {
    public Tab1Fragment() {
        // Required empty public constructor
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_tab1, container, false);
    }
}

package com.example.tablayoutdemo;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class Tab2Fragment extends Fragment {
    public Tab2Fragment() {
        // Required empty public constructor
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_tab2, container, false);
    }
}

6. Create two new layout files named fragment_tab1.xml and fragment_tab2.xml and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="@string/tab1_content"
    android:textSize="30sp"
    android:textStyle="bold"
    android:gravity="center"/>

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="@string/tab2_content"
    android:textSize="30sp"
    android:textStyle="bold"
    android:gravity="center"/>

7. Run the application on a device or emulator.

Output

Explanation

In the above example, we have created a TabLayout with two tabs, "Tab 1" and "Tab 2". We have created two fragments for each tab and added them to the adapter. Finally, we set the adapter to the ViewPager and set the current view of the ViewPager and TabLayout.

Use

TabLayout is used to display multiple fragments in a horizontal layout and allows the user to navigate them using tabs. It is commonly used in applications where there are multiple sections or features that need to be displayed.

Important Points

• TabLayout is a part of the Material Design library provided by Google.
• TabLayout can be customized using various attributes like tabMode, tabGravity, tabBackground, etc.
• TabLayout can be used with ViewPager to create swipeable tabs.
• TabLayout can be used with FragmentPagerAdapter or FragmentStatePagerAdapter to create fragments.

Summary

In this tutorial, we learned how to create TabLayout in Android Studio. We created a simple TabLayout with two tabs and added fragments to the adapter. We also learned how to customize TabLayout and use it with ViewPager.