Android – How To Use BottomNavigationView

BottomNavigationView represents standard bottom navigation bar for application. This bar makes it easy for users to explore and switch between top level views in a single tap.

bottomnavigationview

 

Gradle dependency

To use BottomNavigationView first we need to add design support library 25 or above under dependencies.

dependencies {

    final SUPPORT_LIBRARY_VERSION = '25.1.0'

    compile "com.android.support:appcompat-v7:$SUPPORT_LIBRARY_VERSION"
    compile "com.android.support:support-v4:$SUPPORT_LIBRARY_VERSION"
    compile "com.android.support:design:$SUPPORT_LIBRARY_VERSION"
}

 Use of BottomNavigationView  in Layout

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:menu="@menu/bottom_navigation_main" />

You have to add the above snippet within your desired layout xml file for bottom navigation bar. Here some of the specific attributes have been used which are needed to display the menus. Lets explore it –

  • app:itemBackground – The background color to be used for the individual menu.

  • app:itemIconTint – This tint is for the menu’s icon

  • app:itemTextColor – Text color to be used for the text of menus.

  • app:menu – The menu resource to be used for the bottom navigation view. This resource is similar to the resource used for toolbar menu.

Read also –

Listener

Once your layout is ready, you have to inflate the BottomNavigationView and set the OnNavigationItemSelectedListener to be called when a user taps on any of its menus.

BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);
        
        bottomNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_train:
                                
                                break;
                            case R.id.action_bus:
                                
                                break;
                            case R.id.action_cycle:
                                
                                break;
                        }
                        return false;
                    }
                });

Once the listener is set, write your code to show and hide your views based on specific menu click.

If you want to add/remove any menu at runtime then that can be done with couple of more lines code –

// To remove train menu
Menu menu = bottomNavigationView.getMenu();
menu.removeItem(R.id.action_train);

And your entire implementation is done.

 

Apart from this you have to take care of certain things which are specified as per material design document i.e.,

  • If there are fewer than three destinations, consider using tabs instead.
  • Avoid scrollable content in the bottom navigation bar.
  • Avoid using more than five destinations in bottom navigation as tap targets will be situated too close to one another.
  • Avoid using different colored icons and text labels for different menus.
  • Avoid pairing colored icons with a colored bottom navigation bar.
  • Avoid labels with wrapping text.
  • Avoid shrinking text labels to fit on a single line.
  • Avoid truncating text labels as doing so may prevent comprehension.
  • Use cross-fade animation instead lateral motion to transition between views.

 

I hope this will be useful to all of you, so make sure to share this article with your friends and colleagues so they can also learn.

Happy Coding!!!

Leave a Reply

Your email address will not be published. Required fields are marked *