Botón de acción flotante de tematización con barra de navegación inferior en Android

En el artículo anterior ¿Cómo agregar un botón de acción flotante a la barra de navegación inferior en Android? , se analiza bien cómo agregar el botón de acción flotante a la barra de navegación inferior en Android. Ahora, para aumentar la experiencia de UI/UX, la temática también se puede hacer para la barra de navegación inferior. Entonces, en este artículo, se ha discutido cómo podemos crear un tema en la barra de navegación inferior con un botón de acción flotante en Android. Eche un vistazo a la siguiente imagen sobre cómo puede ser temática toda la perspectiva.

Pasos para aplicar un tema a la barra de navegación inferior con el botón de acción flotante

Paso 1: Cree un proyecto de Android Studio de actividad vacío

• Cree un proyecto de estudio de Android de actividad vacío. Para crear un proyecto de Android Studio de actividad vacío, consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? .

Paso 2: invocar la dependencia de diseño de material

• Invoque la siguiente dependencia en el archivo gradle de nivel de aplicación.
• Para obtener el nivel de aplicación gradle, vaya a la aplicación -> archivo build.gradle e invoque la siguiente dependencia.
• Asegúrese de que el sistema esté conectado a la red y haga clic en el botón «Sincronizar ahora» que aparece en la esquina superior derecha.

implementación ‘com.google.android.material:material:1.3.0-alpha03’

• Consulte la siguiente imagen si no puede obtener el archivo Gradle de nivel de aplicación e invocar la dependencia.

Paso 3: agregue el diseño del menú para BottomAppBar

• Cree un «menú» del directorio de recursos de Android en la carpeta res .
• En el menú, la carpeta crea un diseño XML de Android bottom_nav_menu.xml e invoca el siguiente código.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="HardcodedText">
  
    <!--these items will be always visible
         on the Bottom navigation bar-->
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="Home"
        app:showAsAction="ifRoom" />
  
    <item
        android:id="@+id/Settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="always" />
  
    <!--these items will be under the more 
        button of the Bottom navigation bar-->
    <item
        android:icon="@drawable/ic_more"
        android:title=""
        app:showAsAction="always">
  
        <menu>
            <item
                android:id="@+id/Search"
                android:icon="@drawable/ic_search"
                android:title="Search"
                app:showAsAction="ifRoom" />
  
            <item
                android:id="@+id/Profile"
                android:icon="@drawable/ic_person"
                android:title="Profile"
                app:showAsAction="ifRoom" />
        </menu>
  
    </item>
  
</menu>

Paso 4: trabajar con el archivo activity_main.xml

• En el diseño principal de la aplicación se implementarán dos widgets. Esos son BottomAppBar y un botón de acción flotante.
• Aquí, el botón de acción flotante debe estar anclado a BottomAppbar para que pueda adherirse a BottomAppBar.
• Invoque el siguiente código dentro del archivo activity_main.xml . Se agregan comentarios para una mejor comprensión.

<?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">
  
    <!--the usual bottom navigation bar with items-->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:backgroundTint="@color/colorPrimary"
        app:backgroundTint="@android:color/white"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp"
        app:menu="@menu/bottom_nav_menu" />
  
    <!--the normal Floating action button which is
        anchored to the bottom navigation button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/ic_add" />
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Interfaz de usuario de salida:

1. Cambiar la posición del botón de acción flotante

La etiqueta app:fabAlignmentMode=”end” debe invocarse en BottomAppBar

• Invoque el siguiente código dentro del archivo activity_main.xml para implementar lo mismo.

<?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">
  
    <!--the usual bottom navigation bar with items-->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:backgroundTint="@color/colorPrimary"
        app:backgroundTint="@android:color/white"
        app:fabAlignmentMode="end"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp"
        app:menu="@menu/bottom_nav_menu" />
  
    <!--the normal Floating action button which is 
        anchored to the bottom navigation button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/ic_add" />
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Interfaz de usuario de salida:

2. Cambiar el margen de la base para el botón de acción flotante

La etiqueta app:fabCradleMargin=”14dp” debe invocarse en BottomAppBar para realizar los cambios en el margen de la cuna.

• Invoque el siguiente código dentro del archivo activity_main.xml para implementar lo mismo.

<?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">
  
    <!--the usual bottom navigation bar with items-->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:backgroundTint="@color/colorPrimary"
        app:backgroundTint="@android:color/white"
        app:fabAlignmentMode="end"
        app:fabCradleMargin="14dp"
        app:fabCradleRoundedCornerRadius="10dp"
        app:fabCradleVerticalOffset="10dp"
        app:menu="@menu/bottom_nav_menu" />
  
    <!--the normal Floating action button which is 
        anchored to the bottom navigation button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/ic_add" />
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Interfaz de usuario de salida:

3. Cambiar el margen de la base para el botón de acción flotante

app:fabCradleRoundedCornerRadius=”14dp” debe invocarse en el widget BottomAppBar.

• Invoque el siguiente código dentro del archivo activity_main.xml para implementar lo mismo.

<?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">
  
    <!--the usual bottom navigation bar with items-->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:backgroundTint="@color/colorPrimary"
        app:backgroundTint="@android:color/white"
        app:fabAlignmentMode="end"
        app:fabCradleMargin="8dp"
        app:fabCradleRoundedCornerRadius="8dp"
        app:fabCradleVerticalOffset="10dp"
        app:menu="@menu/bottom_nav_menu" />
  
    <!--the normal Floating action button which is 
        anchored to the bottom navigation button-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        android:contentDescription="@string/app_name"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@id/bottomAppBar"
        app:srcCompat="@drawable/ic_add" />
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Interfaz de usuario de salida: