Implementation of a Bottom Navigation View in an Android application.
Now this component is part of Jetpack and this tutorial was updated to AndroidX.
Dependency
Dependency addition (0.48)
~~compile 'com.android.support:design:25.0.0'~~
implementation 'com.google.android.material:material:1.1.0'
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" />
Versión del video (deprecated):
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Menu
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>
The Code
If you find an error, please create an Issue. We will fix it ASAP.
Create an Issue
The updated version is in master 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;
Set a value or mark by the id of the menu
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"
If you don't want the zoom animation when the option changes (shift mode) there is no a method that allows it yet, but you can use this:
private void removeShiftMode(BottomNavigationView bottomNavigationView) {~~
BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
try {
Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
shiftingMode.setAccessible(true);
shiftingMode.setBoolean(menuView, false);
shiftingMode.setAccessible(false);
for (int i = 0; i < menuView.getChildCount(); i++) {
BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
//noinspection RestrictedApi
item.setShiftingMode(false);
//noinspection RestrictedApi
item.setChecked(item.getItemData().isChecked());
}
} catch (NoSuchFieldException e) {
} catch (IllegalAccessException e) {
}
}
You can download the same example with this change.
With Fragments
If you want an example with fragments I leave it here (not updated with AndroidX yet):
Resources
- Class Definition (deprecated)
- Class Definition
- Design guide