How to create custom tab layout in android | Android Studio | Java
Published in
2 min readMar 10, 2021
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);
}
}
}
You can also visit the previous tutorial on:
how to create a simple tab layout in android. CLICK HERE.
how to create a material tab layout with badges. CLICK HERE.
