androidImplement Bottom Navigation View for Android

A bottom navigation bar for your app

Now this component is part of Jetpack and this tutorial was updated to AndroidX.

Dependency

Dependency addition (0.48)

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

Adding the component

Adding the 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" />

Menu creation (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

The updated version is in main branch if you need exactly the video version you can use the video branch.

After you download or clone the project you can import it with the "Import Project" option from Android Studio.

Extra

Badges

Now it's posible to add badges to each section.

Import BadgeDrawable

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

BadgeDrawable badge = bottomNavigationView.getOrCreateBadge(R.id.inicioItem);
badge.setNumber(7); // optional if you just want to put a red dot
badge.setVisible(true);

Themes

It's no longer neccesary to place a shadow manually, it's already in the default theme.

Default

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

If you need a BottomNavigationView with the app primary color background.

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

And this is the old style with some animation, but not recommended.

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

Remove animation

If you don't want the selection animation you can add the following attribute.

app:labelVisibilityMode="labeled"

With Fragments

If you want an example with fragments I leave it here: