Barra de aplicación inferior 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 la barra de la aplicación inferior 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 materiales 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é la barra de aplicaciones inferior?

La barra de la aplicación inferior brinda fácil acceso al cajón de navegación y hasta cuatro acciones principales de la actividad actual, incluido el botón de acción flotante. Al incluir este componente en la aplicación, se brinda una gran respuesta a la experiencia del usuario porque el usuario no debería tener que estirar los dedos para tocar las acciones principales en la parte superior de la pantalla, mientras que al incluir esto, el usuario puede hacer clic fácilmente en el elemento principal. acciones y acceder al cajón de navegación.

¿Cuándo usar la barra de aplicaciones inferior?

• Esto debe usarse solo para dispositivos móviles.
• Usuarios que buscan un acceso más fácil al cajón de navegación que se puede colocar en la parte inferior.
• Una actividad con dos a cinco acciones primarias.

¿Cuándo no usar la barra de aplicaciones inferior?

• Aplicación que tiene una barra de navegación inferior.
• Una actividad con una o dos acciones.

Anatomía de la barra de aplicaciones inferior

En la anatomía anterior, tomando el ejemplo de una aplicación de comercio electrónico, se puede ver que la acción principal aquí es la búsqueda y también el ícono del carrito puede ser la acción principal para la pantalla actual, por lo que el carrito también se puede incluir junto al ícono de búsqueda.

Pasos para implementar la barra inferior de la aplicación en una aplicación

Paso 1: creación de elementos de menú para la barra de aplicaciones inferior

Crear un menú separado para la barra de aplicaciones inferior para que podamos hacer qué elementos deben aparecer en la barra y qué elementos deben aparecer bajo el control del menú Desbordamiento. Para implementar el menú de muestra, invoque lo siguiente en el archivo bottom_app_bar_menu.xml en la carpeta de menús.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
  
    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom" />
  
    <item
        android:id="@+id/option_1"
        android:title="Option 1"
        app:showAsAction="never" />
  
    <item
        android:id="@+id/option_2"
        android:title="Option 2"
        app:showAsAction="never" />
  
</menu>

Paso 2: trabajar con el archivo activity_main.xml

El diseño principal de esta muestra contiene un botón de acción flotante que está anclado a la barra inferior de la aplicación, que a su vez, ambas vistas deben estar bajo el diseño del coordinador; de lo contrario, se producirá un error. Y 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 activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    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">
  
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/black"
        android:src="@drawable/ic_add"
        android:tintMode="@color/white"
        app:fabSize="auto"
        app:layout_anchor="@id/bottom_app_bar" />
  
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabCradleMargin="0dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_app_bar_menu"
        app:navigationIcon="@drawable/ic_menu" />
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Interfaz de usuario de salida:

El diagrama anterior es un ejemplo de la barra de aplicaciones inferior con el botón de acción flotante. Sin embargo, el botón de acción flotante es opcional. Para implementar la barra de aplicaciones inferior sin el botón de acción flotante sin el botón de acción flotante, invoque el siguiente código en el archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">
  
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabCradleMargin="0dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_app_bar_menu"
        app:navigationIcon="@drawable/ic_menu" />
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Interfaz de usuario de salida:

Paso 3: trabajar con el archivo MainActivity.kt

En el archivo MainActivity.kt es necesario manejar los botones y el icono de la hamburguesa para realizar las acciones apropiadas. Al hacer clic en el ícono de hamburguesa, se debe mostrar el Cajón de navegación. Para saber cómo implementar el Cajón de navegación, consulte Cajón de navegación en Android , al hacer clic en el ícono de búsqueda, debería aparecer la pantalla de búsqueda, etc. Para implementar lo mismo, invoque el siguiente código dentro del archivo MainActivity.kt.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.google.android.material.bottomappbar.BottomAppBar
import com.google.android.material.floatingactionbutton.FloatingActionButton
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        val fab: FloatingActionButton = findViewById(R.id.fab)
        fab.setOnClickListener {
            Toast.makeText(this, "FAB Clicked", Toast.LENGTH_SHORT).show()
        }
  
        val bottomAppBar: BottomAppBar = findViewById(R.id.bottom_app_bar)
        bottomAppBar.setOnMenuItemClickListener {
            when (it.itemId) {
                R.id.search -> {
                    Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.option_1 -> {
                    Toast.makeText(this, "Option 1 Clicked", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.option_2 -> {
                    Toast.makeText(this, "Option 2 Clicked", Toast.LENGTH_SHORT).show()
                    true
                }
                else -> false
            }
        }
    }
}

Producción: