How to Add Customize Tabs in Android? (original) (raw)

Last Updated : 15 Jul, 2025

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 `

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

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

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

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

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 `

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

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

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: