Barra de navegación inferior en Android usando Kotlin

Todos nos hemos encontrado con aplicaciones que tienen una barra de navegación inferior. Algunos ejemplos populares incluyen Instagram, WhatsApp, etc. En este artículo, aprenderemos sobre la navegación inferior usando Fragmentos. Lo aprenderemos haciendo un proyecto en Android Studio. Aquí usaremos Kotlin como lenguaje de desarrollo.

Para implementarlo en Java, consulte: Barra de navegación inferior en Android usando Java

¿Por qué necesitamos una barra de navegación inferior?

• Permite al usuario navegar fácilmente a diferentes actividades/fragmentos.
• Hace que el usuario sea consciente de las diferentes pantallas disponibles en la aplicación.
• El usuario puede comprobar en qué pantalla se encuentra en este momento.

El siguiente es un diagrama anatómico de la barra de navegación inferior:

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Crear un nuevo proyecto en Android Studio en kotlin.

Paso 2: agregue un activo vectorial en el elemento de diseño para usarlo como ícono para el menú

Para agregar un recurso vectorial, vaya a: aplicación > res > dibujable > nuevo (clic con el botón derecho) > recurso vectorial

Paso 3: trabajar con el archivo nav_menu.xml

Cree un directorio de menú y luego agregue un nuevo archivo de recursos en el menú para el menú emergente. Para crear un menú en Android Studio, consulte aquí . Aquí necesitamos agregar el elemento que necesitamos mostrar en el menú. Necesitamos especificar que hay una identificación, una referencia de icono y un título. Aquí está el código para nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home_24"
        android:title="Home"  />
    <item
        android:id="@+id/message"
        android:icon="@drawable/ic_baseline_message_24"
        android:title="Message" />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings_24"
        android:title="Setting" />
</menu>

Paso 4: Para cada menú, necesitamos crear un fragmento. Como hay 3 menús, necesitamos crear 3 fragmentos. Para crear un fragmento en Android Studio, consulte Cómo crear un nuevo fragmento en Android Studio . Así que tres de nuestros fragmentos son:

• Fragmento de casa
• Fragmento de menú
• Fragmento de configuración

Aquí, a partir de ahora, para mantenerlo simple, no cambiaríamos nada en el archivo Kotlin del fragmento. Pero para diferenciar su interfaz de usuario, cambiaremos el archivo XML.

Archivo XML para el fragmento de Inicio:

<?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=".HomeFragment">
 
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Home fragment" />
 
</FrameLayout>

Archivo XML para el fragmento de chat:

<?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=".ChatFragment">
 
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Message fragment" />
 
</FrameLayout>

Archivo XML para el fragmento de configuración:

<?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=".SettingFragment">
 
    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Setting fragment" />
 
</FrameLayout>

Paso 5: trabajar con el archivo MainActivity.kt y activity_main.xml.

este archivo de diseño tendrá un componente BottomNavigationview en la parte inferior y la parte superior estaría cubierta por Framelayout, que será reemplazada por fragmento en tiempo de ejecución.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="#ffffff"
    tools:context=".MainActivity">
 
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNav"
        />
 
 
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/nav_menu"
        android:scrollIndicators="left"/>
</RelativeLayout>

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. 

package com.ayush.popupmenu
 
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.ImageView
import android.widget.PopupMenu
import android.widget.Toast
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView
import java.lang.Exception
 
class MainActivity : AppCompatActivity() {
 
    lateinit var bottomNav : BottomNavigationView
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        loadFragment(HomeFragment())
        bottomNav = findViewById(R.id.bottomNav) as BottomNavigationView
        bottomNav.setOnNavigationItemReselectedListener {
            when (it.itemId) {
                R.id.home -> {
                    loadFragment(HomeFragment())
                    return@setOnNavigationItemReselectedListener
                }
                R.id.message -> {
                    loadFragment(ChatFragment())
                    return@setOnNavigationItemReselectedListener
                }
                R.id.settings -> {
                    loadFragment(SettingFragment())
                    return@setOnNavigationItemReselectedListener
                }
            }
        }
    }
    private  fun loadFragment(fragment: Fragment){
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.container,fragment)
        transaction.addToBackStack(null)
        transaction.commit()
    }
 
}

Entonces, nuestra aplicación está lista. Y podemos ver la salida.

Producción: