How to create custom tab layout in android | Android Studio | Java

How to create custom tab layout in android | Android Studio | Java

In this tutorial, we are going to create a custom tab layout in android. Custom tab layout helps you to create your more attractive tab layout for users. You can create your own tab layout by using this method, for that just follow the below steps.

Let’s start the tutorial.

Before that let’s see, what you’re going to see

Step 1: Create the background for tabs

create two new drawable files for the tabs, one is for the selected tab and another one is for unselected tab layout.

back_select.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="0"
                android:startColor="@color/colorPrimary"
                android:endColor="@color/colorPrimary"/>
            <corners
                android:radius="20dp"/>
        </shape>
    </item>
</selector>

back_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="0"
                android:startColor="@color/white"
                android:endColor="@color/white"/>
            <corners
                android:radius="20dp"/>
            <stroke
                android:width="1dp"
                android:color="@color/black"/>
        </shape>
    </item>
</selector>

Step 2: create the custom tab

now create a new layout for the custom tab layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:orientation="vertical">    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_margin="10dp"
        android:background="@drawable/back_tabs">        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">            <TextView
                android:id="@+id/select"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text=""
                android:background="@drawable/back_select"/>            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="" />            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="" />
        </LinearLayout>        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <TextView
                android:id="@+id/item1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="item1"
                android:textColor="@android:color/white"
                android:gravity="center"/>            <TextView
                android:id="@+id/item2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="item2"
                android:gravity="center"/>            <TextView
                android:id="@+id/item3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="item3"
                android:gravity="center"/>        </LinearLayout>
    </FrameLayout></LinearLayout>

Step 3: design the main XML file

add the custom tab layout in the main XML file.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".CustomTab">    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme"
        android:layout_marginTop="28dp">        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme" />    </com.google.android.material.appbar.AppBarLayout>    <include layout="@layout/content_main" /></androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 4: Add the functionality

now in the main java file add these codes.

public class CustomTab extends AppCompatActivity implements View.OnClickListener{    ColorStateList def;
    TextView item1;
    TextView item2;
    TextView item3;
    TextView select;    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_tab);        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        item1 = findViewById(R.id.item1);
        item2 = findViewById(R.id.item2);
        item3 = findViewById(R.id.item3);
        item1.setOnClickListener(this);
        item2.setOnClickListener(this);
        item3.setOnClickListener(this);
        select = findViewById(R.id.select);
        def = item2.getTextColors();
    }    @Override
    public void onClick(View view) {
        if (view.getId() == R.id.item1){
            select.animate().x(0).setDuration(100);
            item1.setTextColor(Color.WHITE);
            item2.setTextColor(def);
            item3.setTextColor(def);
        } else if (view.getId() == R.id.item2){
            item1.setTextColor(def);
            item2.setTextColor(Color.WHITE);
            item3.setTextColor(def);
            int size = item2.getWidth();
            select.animate().x(size).setDuration(100);
        } else if (view.getId() == R.id.item3){
            item1.setTextColor(def);
            item3.setTextColor(Color.WHITE);
            item2.setTextColor(def);
            int size = item2.getWidth() * 2;
            select.animate().x(size).setDuration(100);
        }
    }
}