BottomAppBar

 

Vamos a ver como utilizar los nuevos componentes de androidx para utilizar en esta ocación BottomAppBar en nuestra aplicación.

Si vamos a crear un proyecto nuevo lo primero que deberemos hacer antes de comenzar es migrar todo nuestros componentes/librerias a androidx , para ello vamos a ir a Refactor - Migrate to androix , como indica la siguiente imagen.

 

Nos preguntara si queremos generar un backup , si nuestro proyecto es un proyecto nuevo recien creado no hace falta hacer un backup , pero si se dispone de un proyecto abanzado es aconsejable hacer un backup.

Luego de Presionar en Migrar nos vamos a dirigir hacia nuestro Build Gradle - Modulo de aplicacion y vamos a importar la siguiente libreria

implementation 'com.google.android.material:material:1.0.0-beta01'

Luego de importar esta nueva libreria deberemos asegurarnos que nuestro compileSdkVersion es 28  , recordemos ademas que deberemos instalar el SDK con esta version para poder visualizar y utilizar los componentes sin ningun problema

Recordar en Values - styles.xml de agregar la siguiente linea para poder visualizar todos los nuevos componentes en el preview cuando diseñamos el xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">

Luego de instalar todo nos dirigimos a nuestra activity_main.xml  donde escribiremos el siguiente código para implementar el BottomAppBar 

<?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"
    tools:context=".MainActivity">


    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.bottomappbar.BottomAppBar
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:id="@+id/bottomBar"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/colorPrimary"
            app:fabAlignmentMode="center"
            android:elevation="16dp"
            app:fabCradleRoundedCornerRadius="10dp"
            app:navigationIcon="@drawable/ic_dehaze_black_24dp"/>


        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fabSize="normal"
            android:id="@+id/fabBottomBar"
            app:layout_anchor="@id/bottomBar"
            android:src="@drawable/ic_add_black_24dp"/>


    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Con todo esto implementado ya deberiamos ver nuestra app de la siguiente forma

A continuacion el siguiente video tutorial mostrará como implementar el BottomAppBar

 

Links importantes

Getting started : https://material.io/develop/android/docs/getting-started/

Bottom App Bars: https://material.io/develop/android/components/bottom-app-bar/