How to Add Customize Tabs in Android?

In this article, custom tabs are added in android. TabLayout provides a horizontal layout to display tabs. TabLayouts can be added using viewPager also, check here, but it can not be customized. Whenever the user clicks on the tab it will lead to the transaction of one Fragment to another. Custom tabs can be created to achieve this same task. Icons, animation, text, etc according to our need can be added with tabs. Below image shows an example of a custom tab:

Approach:

Step 1: Create an AlgorithmFragment by right click on java package, select new ? Fragment(Blank).

Step 2: Follow the above step for CourseFragment and LoginFragment.

Step 3: Now add the following code in the fragment_algorithm.xml file. Here a TextView is added in the layout. 

fragment_algorithm.xml

<?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"
    tools:context=".Fragments.AlgorithmFragment"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Algorithm"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Now add the following code in fragment_course.xml file. Here a textView is added in the layout. 

fragment_course.xml

<?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"
    tools:context=".Fragments.AlgorithmFragment"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Course"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Now add the following code in fragment_profile.xml file. Here a textView is added in the layout. 

fragment_profile.xml

<?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"
    tools:context=".Fragments.AlgorithmFragment"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Algorithm"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 6: Now add the following code in the tab_bar.xml file. In this file, design the layout of the custom tabs.  Here for every fragment, a TextView and an icon (ImageView) is added.

tab_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:background="@color/colorPrimaryDark"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:orientation="horizontal">

    <LinearLayout
        android:onClick="onClick"
        android:id="@+id/algo_lay"
        android:layout_marginTop="4dp"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:orientation="vertical">

        <ImageView
            android:layout_gravity="center"
            android:src="@drawable/ic_algorithm"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:id="@+id/first_icon"/>

        <TextView
            android:id="@+id/commerce_first_text"
            android:textColor="#FFFF"
            android:layout_marginTop="3dp"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:text="Algorithm"
            />
    </LinearLayout>

    <LinearLayout
        android:onClick="onClick"
        android:id="@+id/course_lay"
        android:layout_marginTop="4dp"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:orientation="vertical">

        <ImageView
            android:layout_gravity="center"
            android:src="@drawable/ic_course"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:id="@+id/sec_icon"/>

        <TextView
            android:id="@+id/commerce_sec_text"
            android:textColor="#FFFF"
            android:layout_marginTop="3dp"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:text="Course"
            />
    </LinearLayout>

    <LinearLayout
        android:onClick="onClick"
        android:id="@+id/profile_lay"
        android:layout_marginTop="4dp"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:orientation="vertical">

        <ImageView
            android:layout_gravity="center"
            android:src="@drawable/ic_account"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:id="@+id/third_icon"/>

        <TextView
            android:id="@+id/commerce_third_text"
            android:textColor="#FFFF"
            android:layout_marginTop="3dp"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:text="Profile"
            />
    </LinearLayout>

</LinearLayout>

Step 7: Now add the following code in the activity_main.xml file. In this file, add the layout of the custom tabs and a container for the fragment. 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical">

    <include
        layout="@layout/tab_bar"/>

    <FrameLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

Step 8: Now add the following code in the MainActivity.java file. In this file, add OnNavigationItemSelectedListener that helps to navigate between the fragments. It will switch the fragment when the user taps on the icon. 

MainActivity.java

package org.geeksforgeeks.customtabs;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;

public class MainActivity extends AppCompatActivity {

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

        getSupportFragmentManager().beginTransaction()
                .add(R.id.layout,new AlgorithmFragment()).commit();
    }

    public void onClick(View v){
        switch (v.getId()){
            case R.id.algo_lay:
                getSupportFragmentManager().beginTransaction()
                        .replace(R.id.layout,
                         new AlgorithmFragment()).commit();
                break;
            case R.id.course_lay:
                getSupportFragmentManager().beginTransaction()
                        .replace(new CourseFragment().commit(),R.id.layout);
                break;
            case R.id.profile_lay:
                getSupportFragmentManager().beginTransaction()
                        .replace(R.id.layout,
                         new ProfileFragment()).commit();
                break;
        }
    }
}

Output: