Implementación de BottomAppBar I: Componentes de material para Android

Uno de los nuevos componentes de material de Android que se presentan en Google I / O 2018 es BottomAppBar, que es una extensión de la barra de herramientas. La nueva BottomAppBar se coloca en la parte inferior de la ventana de la aplicación en contraposición a la Barra de herramientas que se encuentra en la parte superior de la ventana de la aplicación. Con este cambio de paradigma, el equipo de Material Design espera una nueva experiencia de usuario. El usuario puede acceder a BottomAppBar más fácilmente en comparación con la barra de herramientas ordinaria. Al llevar el control del cajón de navegación y el menú de acción al final de una aplicación, BottomAppBar sugiere un nuevo diseño nuevo para las aplicaciones de Android.

Junto con BottomAppBar, la ubicación del botón de acción flotante (FAB) también ha cambiado. Con el nuevo diseño, los FAB se pueden colocar como acunados / acoplados en alguna muesca de la barra o superpuestos a la barra.

BottomAppBar con FAB

Este artículo mostrará la implementación de los conceptos básicos de BottomAppBar junto con las nuevas opciones de colocación de FAB.

Configurando

Para usar BottomAppBar, se requiere una configuración inicial.

Para obtener una explicación detallada sobre cómo incluir Componentes de material para su proyecto de Android, puede visitar esta página. Para este tutorial, asegúrese de estar utilizando Android Studio 3.2 o superior (actualmente disponible como 3.2 Canary 15).

Los siguientes son los pasos de configuración necesarios.

  1. Incluya el repositorio de Google Maven en build.gradle.
todos los proyectos {
    repositorios {
      jcenter ()
      maven {
        url "https://maven.google.com"
      }
    }
  }

2. Coloque la dependencia de los componentes materiales en su build.gradle. Tenga en cuenta que la versión material se actualiza regularmente.

implementación 'com.google.android.material: material: 1.0.0-alpha1'

3. Establezca compileSdkVersion y targetSdkVersion en la última versión de API dirigida a Android P, que es 28.

4. Asegúrese de que su aplicación herede el tema Theme.MaterialComponents para que BottomAppBar use el último estilo. Alternativamente, puede declarar el estilo de BottomAppBar en la declaración del widget dentro del archivo xml de diseño de la siguiente manera.

style = ”@ style / Widget.MaterialComponents.BottomAppBar”

Implementación

Puede incluir BottomAppBar en su diseño de la siguiente manera. BottomAppBar debe ser hijo de CoordinatorLayout.

BottomAppBar

Puede anclar un Botón de acción flotante (FAB) a BottomAppBar especificando el ID de BottomAppBar en la aplicación: atributo layout_anchor de la FAB. BottomAppBar puede acoplar FAB con un fondo en forma o FAB puede superponerse a BottomAppBar.

BottomAppBar con un FAB acunado

Atributos de BottomAppBar

La siguiente tabla muestra los atributos de BottomAppBar.

backgroundTint es el atributo para configurar el color de fondo BottomAppBar.
El atributo fabAlignmentMode determina la posición de la FAB ya sea en el centro o al final de BottomAppBar. La captura de pantalla siguiente muestra la alineación de FAB cuando fabAlignmentMode está configurado para finalizar.
fabAlignmentMode: end
El atributo fabAttached es para establecer la conexión FAB - BottomAppBar y se puede establecer como verdadero o falso. Aunque las pautas de diseño de materiales no sugieren la colocación de FAB fuera de la barra de aplicaciones inferior, esta opción aún se proporciona. La captura de pantalla siguiente muestra la situación cuando el atributo fabAttached se establece en falso.
fabAlignmentMode: end, fabAttached: false
fabCradleDiameter especifica el diámetro de la cuna que contiene la FAB.
fabCradleRoundedCornerRadius especifica el radio de la curva de la esquina en el punto de encuentro de la base y la parte horizontal de BottomAppBar.
fabCradleVerticalOffset especifica el desplazamiento de la base desde la parte inferior.

Aquí está todo el archivo xml de diseño utilizado para los ejemplos anteriores.




    

    

        


        

    

Hemos discutido los conceptos básicos del nuevo componente de material de Android: BottomAppBar, así como las nuevas funciones de FAB. El widget BottomAppBar en sí no es complicado de usar, ya que extiende la barra de herramientas tradicional, pero viene con un precio de cambio de diseño de aplicación dramático.

La Parte II y la Parte III de esta serie BottomAppBar trata sobre el manejo del menú de control y acción del cajón de navegación y la implementación de los comportamientos de BottomAppBar de acuerdo con las pautas de diseño de materiales.

Siéntase libre de hacer preguntas y hacer comentarios. También puedes seguirme en Twitter.