Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to Add Customize Tabs in Android?

  • Difficulty Level : Easy
  • Last Updated : 28 Aug, 2020

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:
 

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.

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: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: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: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"
    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="Algorith"
            />
    </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: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(R.id.layout,
                         new CourseFragment()).commit();
                break;
            case R.id.profile_lay:
                getSupportFragmentManager().beginTransaction()
                        .replace(R.id.layout,
                         new ProfileFragment()).commit();
                break;
        }
    }
}

Output:

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :