¿Cómo implementar Tabs, ViewPager y Fragment en Android usando Kotlin?

En algunas aplicaciones de Android, se utilizan pestañas , lo que permite a los desarrolladores combinar múltiples tareas (operaciones) en una sola actividad. Por otro lado, le da un aspecto diferente a esa aplicación. También es posible proporcionar una sensación diferente, como deslizar el dedo hacia la izquierda y hacia la derecha mediante el uso de ViewPager . Y para implementar este tema, se requieren algunos términos, como ViewPager , Fragments y TabLayout . Para fines prácticos, en este artículo se utiliza el lenguaje de programación Kotlin .

¿Qué son TabLayout, ViewPager y Fragment?

• TabLayout : esta vista nos permite hacer uso de múltiples pestañas en la aplicación de Android. Este diseño tiene diferentes pestañas. En este artículo, las pestañas se utilizan para navegar de un Fragmento a otro Fragmento.
• ViewPager : esta vista nos permite hacer uso de la función de deslizamiento hacia la izquierda y hacia la derecha para mostrar otro fragmento.
• Fragmentos : Esto es una parte de la Actividad . Esta vista es necesaria para realizar múltiples tareas en una sola actividad. El Fragmento también utiliza un archivo de diseño que contiene vistas según las necesidades.

qué artículo.

Implementación paso a paso

Paso 1: crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: crear fragmentos

• Vaya a aplicación> res> diseño> clic derecho> Nuevo> Archivo de recursos de diseño y luego, solicita el nombre del archivo y luego le da » layout_login » como el nombre de ese archivo de diseño.
• Utilice el mismo método para crear otro archivo de diseño » layout_signup «.
• Después de eso, use el siguiente código para el archivo “ layout_login.xml ”. Aquí se muestra un TextView .

<?xml version="1.0" encoding="utf-8"?>
<!-- This linear layout is used to show elements
     in vertical or in horizontal linear manner -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
 
    <!-- This TextView indicates new fragment is open -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Login Fragment"
        android:textColor="#0F9D58"
        android:textSize="25sp"
        android:textStyle="bold" />
     
</LinearLayout>

• A continuación se muestra el código para el  archivo layout_signup.xml .

<?xml version="1.0" encoding="utf-8"?>
<!-- This linear layout is used to show elements
     in vertical or in horizontal linear manner -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
 
    <!-- This TextView indicates new fragment is open -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Signup Fragment"
        android:textColor="#0F9D58"
        android:textSize="25sp"
        android:textStyle="bold" />
     
</LinearLayout>

• Para crear la clase Fragment, haga clic con el botón derecho en el primer paquete del directorio java que se encuentra en app > java > “com.example.gfgtabdemo” , donde “gfgtabdemo” es el nombre del proyecto en minúsculas. Mueva el cursor sobre » Nuevo » y seleccione » Archivo/clase Kotlin «.

• Asigne » Fragmento de inicio de sesión » como nombre a ese archivo y seleccione la opción » clase » como se muestra en la siguiente captura de pantalla.

• Para crear un Fragmento , es necesario crear esta clase como un hijo de la clase Fragmento usando el símbolo «:». Y anule el método » onCreateView » para establecer el archivo de recursos de diseño en ese archivo de fragmento como se muestra en el siguiente fragmento de código.
• Utilice el procedimiento anterior para crear el archivo » SignupFragment «.
• Después de eso, use el siguiente código en el archivo » LoginFragment.kt «.

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
 
// Here ":" symbol is indicate that LoginFragment
// is child class of Fragment Class
class LoginFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(
            R.layout.layout_login, container, false
        )
    }
    // Here "layout_login" is a name of layout file
    // created for LoginFragment
}

• Utilice el siguiente código en el archivo » SignupFragment.kt «.

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
 
// Here ":" symbol is indicate that SignupFragment
// is child class of Fragment Class
class SignupFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(
            R.layout.layout_signup, container, false
        )
    }
    // Here "layout_signup" is a name of layout file
    // created for SignFragment
}

Paso 3: Configuración del tema

• Abra “ styles.xml ”, que se encuentra dentro de la carpeta “ app > res > values ​​> styles.xml ”, como se muestra en la imagen a continuación.

• Agrega el siguiente código dentro de la etiqueta <resources> en styles.xml .

<style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
</style>
 
<style name="AppTheme.AppBarOverlay"
       parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
 
<style name="AppTheme.PopupOverlay"
       parent="ThemeOverlay.AppCompat.Light" />

• A continuación se muestra el código completo para el archivo completo de estilos.xml .

<resources>
     
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
 
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
 
    <style name="AppTheme.AppBarOverlay"
        parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
 
    <style name="AppTheme.PopupOverlay"
        parent="ThemeOverlay.AppCompat.Light" />
 
</resources>

• Después de eso, abra el archivo » AndroidManifest.xml » ubicado dentro de las carpetas » aplicación> manifiesto> AndroidManifest.xml «. Necesitamos configurar el tema » @style/AppTheme.NoActionBar » dentro de la etiqueta <actividad> . Para hacer lo mismo, escriba la línea resaltada en la siguiente captura de pantalla, dentro de esa etiqueta de actividad, en la que desea usar el diseño de pestañas.

Paso 4: agregar vistas requeridas

Para la implementación de este tema, es importante agregar algunas vistas. Para hacer lo mismo primero, abra el archivo build.gradle (Módulo: aplicación) , ubicado en » Gradle Script > build.gradle (Módulo: aplicación) «, y agregue la siguiente dependencia dentro del bloque de dependencias. Y no olvides hacer clic en » sincronizar ahora «. Esta dependencia es necesaria para hacer uso del » diseño de la barra de aplicaciones «.

implementación ‘com.google.android.material:material:1.2.0’

Nota: escriba esta línea de dependencia en lugar de copiar y pegar. Porque debido al formato de copiar y pegar o al estilo del texto, es posible que no se acepte si no coincide con el formato requerido.

Paso 5: trabajar con el archivo activity_main.xml

Después de eso, es necesario agregar las siguientes vistas en un archivo de diseño de actividad, así que ábralo. Aquí usamos » actividad_principal.xml «.

• Diseño de la barra de aplicaciones
• Barra de herramientas
• TabLayout
• Ver paginador

Agregue el siguiente código al archivo » actividad_principal.xml «. Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
 
<!-- In order to use tabs, coordinator layout is useful-->
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <!--This appbarlayout covers the toolbar and tablayout-->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0F9D58"
        android:theme="@style/AppTheme.AppBarOverlay">
 
        <!--toolbar is one component which is necessary
            because if we not use this then title is not shown
            when project executed-->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
 
        <!-- tablayout which contains which is
             important to show tabs -->
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#FFF"
            app:tabIndicatorHeight="3dp"
            app:tabMode="fixed" />
    </com.google.android.material.appbar.AppBarLayout>
 
    <!-- view pager is used to open other fragment by using
         left or right swip-->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
     
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Paso 6: trabajar con el archivo MainActivity.kt

Después de eso, abra » MainActivity.kt «. En este archivo, es importante crear el objeto de Toolbar, ViewPager y TabLayout y usar el método “ findViewById() ” para identificar la vista. Su sintaxis se muestra a continuación.

var object_name = findViewById<ViewName>(unique_id_assigned_to_view) 

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del  archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle
import androidx.annotation.Nullable
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter
import androidx.viewpager.widget.ViewPager
import com.google.android.material.tabs.TabLayout
 
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // Create the object of Toolbar, ViewPager and
        // TabLayout and use “findViewById()” method*/
        var tab_toolbar = findViewById<Toolbar>(R.id.toolbar)
        var tab_viewpager = findViewById<ViewPager>(R.id.tab_viewpager)
        var tab_tablayout = findViewById<TabLayout>(R.id.tab_tablayout)
 
        // As we set NoActionBar as theme to this activity
        // so when we run this project then this activity doesn't
        // show title. And for this reason, we need to run
        // setSupportActionBar method
        setSupportActionBar(tab_toolbar)
        setupViewPager(tab_viewpager)
 
        // If we dont use setupWithViewPager() method then
        // tabs are not used or shown when activity opened
        tab_tablayout.setupWithViewPager(tab_viewpager)
    }
 
    // This function is used to add items in arraylist and assign
    // the adapter to view pager
    private fun setupViewPager(viewpager: ViewPager) {
        var adapter: ViewPagerAdapter = ViewPagerAdapter(supportFragmentManager)
 
        // LoginFragment is the name of Fragment and the Login
        // is a title of tab
        adapter.addFragment(LoginFragment(), "Login")
        adapter.addFragment(SignupFragment(), "Signup")
 
        // setting adapter to view pager.
        viewpager.setAdapter(adapter)
    }
 
    // This "ViewPagerAdapter" class overrides functions which are
    // necessary to get information about which item is selected
    // by user, what is title for selected item and so on.*/
    class ViewPagerAdapter : FragmentPagerAdapter {
 
        // objects of arraylist. One is of Fragment type and
        // another one is of String type.*/
        private final var fragmentList1: ArrayList<Fragment> = ArrayList()
        private final var fragmentTitleList1: ArrayList<String> = ArrayList()
 
        // this is a secondary constructor of ViewPagerAdapter class.
        public constructor(supportFragmentManager: FragmentManager)
                : super(supportFragmentManager)
 
        // returns which item is selected from arraylist of fragments.
        override fun getItem(position: Int): Fragment {
            return fragmentList1.get(position)
        }
 
        // returns which item is selected from arraylist of titles.
        @Nullable
        override fun getPageTitle(position: Int): CharSequence {
            return fragmentTitleList1.get(position)
        }
 
        // returns the number of items present in arraylist.
        override fun getCount(): Int {
            return fragmentList1.size
        }
 
        // this function adds the fragment and title in 2 separate  arraylist.
        fun addFragment(fragment: Fragment, title: String) {
            fragmentList1.add(fragment)
            fragmentTitleList1.add(title)
        }
    }
}

Producción