BottomBar

The Bottom Bar Component displays three to five destinations at the bottom of the screen.

The Bottom Bar Component displays three to five destinations at the bottom of the screen. Each destination is represented by an icon and an optional text label. When the bottom navigation icon is clicked, the user is taken to the corresponding top-level navigation destination associated with that icon.

Usage

To implement bottombar, you can follow the steps below.

Basic Bottom Bar

<com.telkom.legion.component.bottombar.LgnBottomBar  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content"  
    android:layout_marginTop="?attr/spacing2"  
    app:labelVisibilityMode="labeled"  
    app:menu="@menu/bottombar_menu"/>

Bottom bar with Middle button

<com.telkom.legion.component.bottombar.LgnBottomBar  
    android:layout_width="match_parent"  
    android:layout_height="wrap_content"  
    android:layout_marginTop="?attr/spacing2"  
    app:labelVisibilityMode="labeled"  
    app:menu="@menu/bottombar_menu"  
    app:showMiddleButton="true"  
    app:middleButtonIconDrawable="@drawable/ic_camera"/>

Kotlin Code

Setup with navController

...
binding.apply {
   ...
   bottomBarView.setupWithNavController(navController)
   ...
}

...

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Setup with Selected Item Listener

...
binding.apply {
   ...
   bottomBarView.setOnItemSelectedListener { menuItem ->
       when (menuItem.itemId) {
           ...
           R.id.home -> {
              ...
              true

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Setup middle button

...
binding.apply {
   ...
   bottomBarView.setOnMiddleButtonClickListener {
       ...
   }
   ...
}

*) : Dynamic using Kotlin mean if you using Dynamic Layout or Declarative UI using kotlin

Attributes

Attribute Name	Xml Attrs	Related method(s)	Description
Menu	`app:menu`	`.menu`	Set menu item on Bottom bar
label visibility mode	`app:labelVisibilityMode`	`.labelVisibilityMode`	Set label visibility on menu item in Bottom bar
Show Middle Button	`app:showMiddleButton`	`.showMiddleButton`	Set visibility on middle button on Bottom bar
Middle Button Icon Drawable	`app:middleButtonIconDrawable`	`.middleButtonIconDrawable`	Set icon drawable for middle button on Bottom bar
Get or Create Badge	`N/A`	`getOrCreateBadge`	Create or Get existing badge on Menu in Bottom bar
Remove Badge	`N/A`	`removeBadge`	Remove existing badge on Menu in Bottom bar
Setup Bottom bar With NavController	`N/A`	`setupWithNavController`	Set up Bottom bar with NavController
Listener for selected menu item	`N/A`	`SetOnItemSelectedListener`	Set up listener for selected menu item on Bottom bar
Listener for reselected menu item	`N/A`	`SetOnItemReselectedListener`	Set up listener for reselected menu item on Bottom bar
Listener for middle button	`N/A`	`setOnMiddleButtonClickListener`	Set up listener for middle button on Bottom bar