Over Engineering
Published in

Over Engineering

Hands-on with Material Components for Android: Bottom Navigation

Part 2 of a series covering practical usage of Material Components for Android

  • They should be of equal importance in the context of your app
  • They should be accessible from anywhere in the app (meaning the Bottom Navigation bar remains visible even when navigating downward within the current task hierarchy)
  • They should not represent once-off actions that start a new task (eg. Composing an email)
  • They should not represent user preferences or settings

Basic usage 🏁

<FrameLayout
...
>

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
/>

</FrameLayout>

Handling navigation items 🧭

<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:menu="@menu/menu_bottom_navigation"
/>
bottomNavigation.inflateMenu(R.menu.menu_bottom_navigation)
bottomNavigation.setOnNavigationItemSelectedListener { item ->
when
(item.itemId) {
R.id.item1 -> {
// Do something for navigation item 1
true
}
R.id.item2 -> {
// Do something for navigation item 2
true
}
else -> false
}
}
bottomNavigation.setOnNavigationItemReselectedListener { item ->
when
(item.itemId) {
R.id.item1 -> {
// Do something for navigation item 1
}
R.id.item2 -> {
// Do something for navigation item 2
}
}
}
bottomNavigation.selectedItemId = R.id.item1

Adjusting item appearance and behavior ✅

Label visibility

  • LABEL_VISIBILITY_AUTO: The label behaves as “labeled” when there are 3 items or less, or “selected” when there are 4 items or more (this is the default behavior)
  • LABEL_VISIBILITY_SELECTED: The label is only shown on the selected navigation item
  • LABEL_VISIBILITY_LABELED: The label is shown on all navigation items
  • LABEL_VISIBILITY_UNLABELED: The label is hidden for all navigation items
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:labelVisibilityMode="selected"
/>
bottomNavigation.labelVisibilityMode = LabelVisibilityMode.LABEL_VISIBILITY_SELECTED

Horizontal translation

  • labelVisibilityMode = LABEL_VISIBILITY_AUTO and item count > 3 or
  • labelVisibilityMode = LABEL_VISIBILITY_SELECTED
Item horizontal translation enabled/disabled
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:itemHorizontalTranslationEnabled="true"
/>
bottomNavigation.isItemHorizontalTranslationEnabled = true

Badging 🔢

bottomNavigation.getOrCreateBadge(R.id.item1) // Show badge
bottomNavigation.removeBadge(R.id.item1) // Remove badge
val badge = bottomNavigation.getBadge(R.id.item1) // Get badge
A basic badge
  • setNumber/getNumber/hasNumber/clearBadgeNumber: Used to assign, retrieve, check and clear a number displayed inside the badge. A badge is displayed without a number by default.
A badge with a number
  • setMaxCharacterCount/getMaxCharacterCount: Used to set/get the maximum number of characters allowed in a badge number before it is truncated with a ‘+’. The default value is 4.
A badge with a high (truncated) number
  • setBadgeGravity/getBadgeGravity: Used to set/get the gravity of the badge which can be TOP_END, TOP_START, BOTTOM_END or BOTTOM_START. The default value is TOP_END.
A badge with gravity set to bottom start
  • setHorizontalOffset/getHorizontalOffset and setVerticalOffset/setVerticalOffset: Used to set/get the offset of the badge towards the center of its anchor.

Tooltips ℹ️

<menu
...
>

<item
android:id="@+id/item1"
android:title="Item 1"
app:tooltipText="Tooltip text"
/>
...

</menu>

Theming 🎨

Color

Color theming
Badge color theming

Typography

Type theming

Shape

More resources 📚

--

--

Create professional ads, branded content, and stunning stories in minutes.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store