Bottom Navigation Bar — Android

Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destinations.

Let’s code 🐒

Firstly, I would recommend to create a new project, and follow these steps, You won’t get error.

In your activity_main.xml, add the Bottom-Navigation-View

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@drawable/bottom_nav_background"
    mapbox:itemIconTint="@android:color/white"
    mapbox:itemTextColor="@android:color/white"
    mapbox:layout_constraintBottom_toBottomOf="@+id/mapView"
    mapbox:layout_constraintEnd_toEndOf="parent"
    mapbox:layout_constraintStart_toStartOf="parent"
    mapbox:menu="@menu/bottom_nav_menu" />

You got errors right? Because we need add more files to it, to make it work

So, create a new file bottom_nav_menu inside menu folder, if you don’t have one, create one. Then paste this code.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/bottom_nav_home"
        android:enabled="true"
        android:icon="@drawable/ic_action_home"
        android:title="Home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/bottom_nav_employees"
        android:enabled="true"
        android:icon="@drawable/ic_action_employees"
        android:title="Employees"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/bottom_nav_history"
        android:enabled="true"
        android:icon="@drawable/ic_action_history"
        android:title="History"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/bottom_nav_settings"
        android:enabled="true"
        android:icon="@drawable/ic_action_settings"
        android:title="Settings"
        app:showAsAction="ifRoom" />
</menu>

Now, just need to create those icons inside drawable folder

After, done with creating items, now we can make the background for the bottom-navigation, So create a file bottom_nav_background.xml inside drawable folder, then paste this code

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:topLeftRadius="24dp"
        android:topRightRadius="24dp" />
    <solid android:color="@color/purple_500" />
</shape>

Done 🏆

You should be now seeing the bottom-navigation in activity_main.xml also when you run the app.