¿Cómo agregar pestañas personalizadas en Android?

En este artículo, se agregan pestañas personalizadas en Android. TabLayout proporciona un diseño horizontal para mostrar pestañas. TabLayouts también se puede agregar usando viewPager, marque aquí , pero no se puede personalizar. Cada vez que el usuario haga clic en la pestaña, se realizará la transacción de un Fragmento a otro. Se pueden crear pestañas personalizadas para lograr esta misma tarea. Iconos, animación, texto, etc. según nuestra necesidad se pueden agregar con pestañas. La siguiente imagen muestra un ejemplo de una pestaña personalizada:
 

Acercarse: 
 

Paso 1: Cree un AlgorithmFragment haciendo clic con el botón derecho en el paquete java, seleccione nuevo? Fragmento (en blanco) .

Paso 2: siga el paso anterior para CourseFragment y LoginFragment .

Paso 3 : ahora agregue el siguiente código en el archivo fragment_algorithm.xml . Aquí se agrega un TextView en el diseño. 
 
 

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

Paso 4: ahora agregue el siguiente código en el archivo fragment_course.xml . Aquí se agrega una vista de texto en el diseño. 

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

Paso 5: ahora agregue el siguiente código en el archivo fragment_profile.xml . Aquí se agrega una vista de texto en el diseño. 
 

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

Paso 6: ahora agregue el siguiente código en el archivo tab_bar.xml . En este archivo, diseñe el diseño de las pestañas personalizadas. Aquí, para cada fragmento, se agrega un TextView y un icono (ImageView).
 

<?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="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>

Paso 7: ahora agregue el siguiente código en el archivo activity_main.xml . En este archivo, agregue el diseño de las pestañas personalizadas y un contenedor para el fragmento. 
 

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

Paso 8: ahora agregue el siguiente código en el archivo MainActivity.java . En este archivo, agregue OnNavigationItemSelectedListener que ayuda a navegar entre los fragmentos. Cambiará el fragmento cuando el usuario toque el icono. 
 

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

Producción: