Carril de navegación del componente Material Design en Android

Material Design Components (MDC Android) ofrece a los diseñadores y desarrolladores una forma de implementar Material Design en sus aplicaciones de Android. Desarrollados por un equipo central de ingenieros y diseñadores de UX en Google, estos componentes permiten un flujo de trabajo de desarrollo confiable para crear aplicaciones de Android atractivas y funcionales. El diseño de materiales en Android es una de las características clave que atrae y atrae al cliente hacia la aplicación. Este es un tipo especial de diseño, que está guiado por Google. Entonces, en este artículo, se ha demostrado cómo usar Navigation Rail en Android. Eche un vistazo a la siguiente imagen para obtener una descripción general de la discusión.

Crear un proyecto de actividad vacío

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio.

Agregar dependencia requerida

Incluya la dependencia de componentes de diseño de materiales de Google en el archivo build.gradle . Después de agregar las dependencias, no olvide hacer clic en el botón «Sincronizar ahora» presente en la esquina superior derecha. Tenga en cuenta que el riel de navegación se introdujo en la última versión de la versión de componentes de diseño de material que es 1.4.0 y superior.

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

Tenga en cuenta que mientras sincroniza su proyecto, debe estar conectado a la red y asegurarse de agregar la dependencia al archivo Gradle de nivel de aplicación como se muestra a continuación.

¿Por qué ferrocarril de navegación?

El carril de navegación proporciona movimiento entre las pantallas principales o de destino de la aplicación. Esto básicamente es un componente de navegación lateral que muestra un mínimo de tres a un máximo de siete destinos. Cada destino tiene un icono y una etiqueta asociados. El riel de navegación se usa para pantallas más grandes como tabletas y pantallas de escritorio.

¿Cuándo usar el riel de navegación?

Como se dice, el riel de navegación solo es ideal para las pantallas más grandes y cuando el producto de la aplicación tiene destinos de nivel superior a los que se puede acceder fácilmente y estos destinos pueden ser destinos principales o las pantallas del producto de la aplicación. Navigation Rail no debe usarse para las aplicaciones que se implementan para las pantallas de menor tamaño y la aplicación no debe poseer uno o dos destinos de nivel superior, debe tener un mínimo de tres y un máximo de siete destinos.

El riel de navegación se coloca en el lado izquierdo de la pantalla para los idiomas de izquierda a derecha (LTR) y en el lado derecho para los idiomas de derecha a izquierda (RTL).

Anatomía del riel de navegación

Pasos para implementar Navigation Rail en Android

Paso 1: creación de un menú con iconos para el carril de navegación

El menú de Navigation Rail contiene cuatro elementos de muestra: archivos, imágenes, música y videos, además de íconos asociados para cada etiqueta. Para implementar lo mismo, invoque el siguiente código dentro del archivo navigation_rail_menu.xml, en la carpeta del menú.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/files"
        android:enabled="true"
        android:icon="@drawable/ic_folder"
        android:title="Files" />
    <item
        android:id="@+id/images"
        android:enabled="true"
        android:icon="@drawable/ic_image"
        android:title="Images" />
    <item
        android:id="@+id/music"
        android:enabled="true"
        android:icon="@drawable/ic_music"
        android:title="Music" />
    <item
        android:id="@+id/videos"
        android:enabled="true"
        android:icon="@drawable/ic_movie"
        android:title="Videos" />
</menu>

Paso 2: crear un diseño de botón de acción flotante para el riel de navegación

Sin embargo, esto es opcional para incluir el botón de acción flotante para el riel de navegación. Para incluir el Botón de acción flotante , tenemos que crear un diseño de vista individual separado y solo debe contener el Botón de acción flotante como vista raíz, y también el tamaño del Botón de acción flotante debe ser automático. Para implementar lo mismo, invoque el siguiente código dentro del archivo navigation_rail_fab.xml, en la carpeta de diseño. 

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.floatingactionbutton.FloatingActionButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/nav_rail_fab"
    android:clipToPadding="false"
    app:fabSize="auto"
    app:srcCompat="@drawable/ic_add" />

Paso 3: trabajar con el archivo activity_main.xml

El diseño principal y único del archivo contiene el riel de navegación y se le adjuntan los archivos navigation_rail_menu.xml y navigation_rail_fab . Para implementar lo mismo, invoque el siguiente código dentro del archivo activity_main.xm l.

<?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"
    android:clipToPadding="false"
    tools:context=".MainActivity">
 
    <com.google.android.material.navigationrail.NavigationRailView
        android:id="@+id/navigationRail"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:headerLayout="@layout/navigation_rail_fab"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/navigation_rail_menu" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Paso 4: trabajar con el archivo MainActivity.kt

En el archivo MainActivity.kt , debemos manejar el detector de clics para todos los elementos en el contenedor del riel de navegación. Al hacer clic en estos elementos, aparece el mensaje de brindis simple. Para implementar lo mismo, invoque el siguiente código dentro del archivo MainActivity.kt .

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.floatingactionbutton.FloatingActionButton
import com.google.android.material.navigationrail.NavigationRailView
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        val navRailFab: FloatingActionButton = findViewById(R.id.nav_rail_fab)
        navRailFab.setOnClickListener {
            Toast.makeText(this, "FAB Clicked!", Toast.LENGTH_SHORT).show()
        }
 
        val navigationRail: NavigationRailView = findViewById(R.id.navigationRail)
        navigationRail.setOnItemSelectedListener { menuItem ->
            when (menuItem.itemId) {
                R.id.files -> {
                    Toast.makeText(this, "Files", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.images -> {
                    Toast.makeText(this, "Images", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.music -> {
                    Toast.makeText(this, "Music", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.videos -> {
                    Toast.makeText(this, "Videos", Toast.LENGTH_SHORT).show()
                    true
                }
                else -> false
            }
        }
    }
}

Producción: