androidImplementar Bottom Navigation View en Android para la navegación

Un navigation bar para tu app

Ahora este componente es parte de Jetpack y este tutorial se actualizó a AndroidX.

Dependencia

Adición de la dependencia (0.48)

implementation 'com.google.android.material:material:1.6.1'

Adicionando el componente

Adicionando el BottomNavigationView (1.08)

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:labelVisibilityMode="labeled"
    app:menu="@menu/menu_navigation" />

Menú

Creación del menú (1.38)

menu_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/inicioItem"
        android:icon="@drawable/ic_home"
        android:title="@string/inicio" />

    <item
        android:id="@+id/buscarItem"
        android:icon="@drawable/ic_search"
        android:title="@string/buscar" />

    <item
        android:id="@+id/camaraItem"
        android:icon="@drawable/ic_camera_alt"
        android:title="@string/camara" />

    <item
        android:id="@+id/favoritosItem"
        android:icon="@drawable/ic_favorite"
        android:title="@string/favoritos" />

    <item
        android:id="@+id/perfilItem"
        android:icon="@drawable/ic_person"
        android:title="@string/perfil" />

</menu>

BottomNavigationViewSample

La versión actualizada se encuentra en el branch main si quieres ver la versión exacta del video puedes ir al branch video.

Luego de que descargues o clones el proyecto puedes importarlo con la opción "Import Project" desde Android Studio.

Extra

Badges

Ahora es posible adicionar badges a cada sección.

Importar BadgeDrawable

import com.google.android.material.badge.BadgeDrawable;

BadgeDrawable badge = bottomNavigationView.getOrCreateBadge(R.id.inicioItem);
badge.setNumber(7); // opcional si solo quieres poner un punto rojo
badge.setVisible(true);

Themes

Ya no es necesario colocar la sombra manualmente, esta ya esta en el tema por defecto.

Default

style="@style/Widget.MaterialComponents.BottomNavigationView"

Si quieres que el BottomNavigationView tenga de fondo el color primario de la aplicación.

style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"

Y este es el antiguo estilo con algo de movimiento, pero no recomendado.

style="@style/Widget.Design.BottomNavigationView"

Quitar animación

Si no deseas la animación de selección puedes adicionar el siguiente attributo.

app:labelVisibilityMode="labeled"

Con Fragments

Si quieres el ejemplo con fragments te lo dejamos aquí: