Cómo implementar un TabLayout en Android usando ViewPager y Fragments

En este artículo, aprenderemos cómo agregar TabLayout con ViewPager en una aplicación. TabLayout proporciona un diseño horizontal para mostrar pestañas. Si se usa TabLayout , junto con él, también se usa Fragment , porque los fragmentos son livianos y la aplicación puede tener más funcionalidad en una sola pantalla si se agregan más fragmentos. Cada vez que el usuario haga clic en la pestaña, se realizará la transacción de un Fragmento a otro. ViewPager se utiliza para deslizar entre las pestañas. WhatsApp , Facebook , etc. son un muy buen ejemplo de TabLayout con ViewPager. Así es como se ve un TabLayout .

Acercarse:

1. Cree un AlgorithmFragment haciendo clic con el botón derecho en el paquete Java,
   seleccione nuevo -> fragmento -> seleccione Fragmento (en blanco) .
2. Siga el paso anterior para CourseFragment y LoginFragment .
3. Ahora agregue el siguiente código en el archivo AlgorithmFragment.xml . Aquí se agrega un TextView en el diseño.
4. Ahora agregue el siguiente código en el archivo CourseFragment.xml . Aquí se agrega una vista de texto en el diseño.
5. Ahora agregue el siguiente código en el archivo LoginFragment.xml . Aquí se agrega una vista de texto en el diseño.
6. Ahora cree un adaptador para nuestro ViewPager extendiendo la clase FragmentPagerAdapter . En esta clase anularemos tres métodos getItem() , getCount() y getPageTitle() . El método getItem da el fragmento con respecto a la posición, el método getCount da el número total de fragmentos presentes y el método getPageTitle da el título del fragmento.
7. Agregue el siguiente código en el archivo MainActivity.java . En este archivo, configuramos nuestro adaptador y adjuntamos nuestro TabLayout con ViewPager.

   AlgorithmFragment.xml

   <?xml version="1.0" encoding="utf-8"?> <FrameLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".AlgorithmFragment">        <TextView         android:textColor="@color/colorPrimary"         android:textSize="30sp"         android:gravity="center"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:text="Learn Algorithm\nVisit GFG" />    </FrameLayout>

   Fragmento del curso.xml

   <?xml version="1.0" encoding="utf-8"?> <FrameLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".CourseFragment">        <TextView         android:textColor="@color/colorPrimary"         android:textSize="30sp"         android:gravity="center"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:text="Select Course by GFG" />    </FrameLayout>

   Fragmento de inicio de sesión.xml

   <?xml version="1.0" encoding="utf-8"?> <FrameLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".LoginFragment">        <TextView         android:textColor="@color/colorPrimary"         android:textSize="30sp"         android:gravity="center"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:text="GFG Login Portal" />    </FrameLayout>

   ViewPagerAdapter.java

   package org.geeksforgeeks.gfgtablayout;    import androidx.annotation.NonNull; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentPagerAdapter;    public class ViewPagerAdapter  extends FragmentPagerAdapter {        public ViewPagerAdapter( @NonNull FragmentManager fm)     {         super(fm);     }        @NonNull     @Override     public Fragment getItem(int position)     {         Fragment fragment = null;         if (position == 0)             fragment = new AlgorithmFragment();         else if (position == 1)             fragment = new CourseFragment();         else if (position == 2)             fragment = new LoginFragment();            return fragment;     }        @Override     public int getCount()     {         return 3;     }        @Override     public CharSequence getPageTitle(int position)     {         String title = null;         if (position == 0)             title = "Algorithm";         else if (position == 1)             title = "Courses";         else if (position == 2)             title = "Login";         return title;     } }

   MainActivity.java

   package org.geeksforgeeks.gfgtablayout;    import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.ViewPager; import android.os.Bundle; import android.widget.Toolbar;    import com.google.android.material.tabs.TabLayout;    public class MainActivity  extends AppCompatActivity {     TabLayout tabLayout;     ViewPager viewPager;     ViewPagerAdapter viewPagerAdapter;        @Override     protected void onCreate(Bundle savedInstanceState)     {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);            viewPager = findViewById(R.id.view_pager);         tabLayout = findViewById(R.id.tabs);            viewPagerAdapter = new ViewPagerAdapter(             getSupportFragmentManager());         viewPager.setAdapter(viewPagerAdapter);            // It is used to join TabLayout with ViewPager.         tabLayout.setupWithViewPager(viewPager);     } }

Producción: