How to use BottomNavigationView in android

Aman Gupta

22 May 2017

In this blog, we have learned how to add the bottom menu using BottomNavigationView.

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

How to implement

Step 1: Add the below layout,

<android.support.design.widget.BottomNavigationView android:id="@+id/bottomNavigation" android:layout_width="match_parent" android:layout_height="wrap_content" design:menu="@menu/navigation_items" />

1
2
3
4
5

<android.support.design.widget.BottomNavigationView
       android:id="@+id/bottomNavigation"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       design:menu="@menu/navigation_items" />

Step 2: Make the navigation_items.xml in menu directory

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_home" android:enabled="true" android:icon="@drawable/home" android:title="Home" app:showAsAction="ifRoom" /> <item android:id="@+id/action_navigation" android:enabled="true" android:title="Menu" android:icon="@drawable/menu" app:showAsAction="ifRoom" /> <item android:id="@+id/action_camera" android:enabled="true" android:title="Camera" android:icon="@drawable/camera" app:showAsAction="ifRoom" /> <item android:id="@+id/action_cart" android:enabled="true" android:title="Cart" android:icon="@drawable/cart" app:showAsAction="ifRoom" /> <item android:id="@+id/action_profile" android:enabled="true" android:title="Profile" android:icon="@drawable/user" app:showAsAction="ifRoom" /> </menu>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_home"
        android:enabled="true"
        android:icon="@drawable/home"
        android:title="Home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_navigation"
        android:enabled="true"
        android:title="Menu"
        android:icon="@drawable/menu"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_camera"
        android:enabled="true"
        android:title="Camera"
        android:icon="@drawable/camera"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_cart"
        android:enabled="true"
        android:title="Cart"
        android:icon="@drawable/cart"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_profile"
        android:enabled="true"
        android:title="Profile"
        android:icon="@drawable/user"
        app:showAsAction="ifRoom" />
</menu>

Step 3: Add navigation Listener,

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.action_home: break; case R.id.action_navigation: mDrawerLayout.openDrawer(GravityCompat.START); break; case R.id.action_camera: onCLickOpenCamera(); break; case R.id.action_cart: Intent menuIntent = new Intent(MainActivity.this, Cart.class); startActivity(menuIntent); break; case R.id.action_profile: Intent intent = new Intent(MainActivity.this, DashboardActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP); startActivity(intent); break; } return false; } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                    switch (item.getItemId()) {
                        case R.id.action_home:
                            break;
                        case R.id.action_navigation:
                            mDrawerLayout.openDrawer(GravityCompat.START);
                            break;
                        case R.id.action_camera:
                            onCLickOpenCamera();
                            break;
                        case R.id.action_cart:
                            Intent menuIntent = new Intent(MainActivity.this, Cart.class);
                            startActivity(menuIntent);
                            break;
                        case R.id.action_profile:
                            Intent intent = new Intent(MainActivity.this, DashboardActivity.class);
                            intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);
                            startActivity(intent);
                            break;
                    }
                    return false;
                }
            });

Thanks maybe this blog is needful for you.