How to create Android material design bottom navigation

Google announced Material Design Support Library in their Google IO 2015. This month Google announced that there’s a new element to be added in Material Design components and it’s the Bottom Navigation. In this tutorial we’ll have a look on Android Material Design Bottom Navigation and how to implement it and understand its parameters and functions.

Quick Overview

Bottom navigation bars make it easy to walk through between top-level views in a single tap as it provides quick navigation between top-level views of an Android Application Development.

And according to Google design guidelines, the bottom navigation should consist of three to five items. In this tutorial we will be building 2 Activities, one has three buttons and the other has four buttons on the bottom navigation bar.

It consists of .XML file in menus and a java code to inflate this layout in your activity.

Three Buttons Navigation:

  • Creating Android Project, In Android Studio, create a new project by navigating to File ⇒ New Project and fill all the required details. When it prompts to select a default activity, select Empty Activity and lets name MainActivity.
  • We need to add Material Design Support Library so we can use it, so open build.gradle file and add the following code:

  • dependencies {
    //Design support Library
    compile 'com.android.support:design:25.0.1'
    }

  • Let’s create the menu file that represents the icons and its labels, So under res ⇒ menu add new menu resource file, name it three_buttons_menu and add the following code:

    <!--?xml version="1.0" encoding="utf-8"?-->
  • Open the layout file the main activity activity_main.xml and add below code:

    <!--?xml version="1.0" encoding="utf-8"?-->
  • And finally Open the layout file the main activity MainActivity.java and add below code:

    import android.support.design.widget.BottomNavigationView;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.MenuItem;
    import android.widget.Toast;

    public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    BottomNavigationView bottomNavigationView = (BottomNavigationView)
    findViewById(R.id.bottom_navigation);
    //Attach the listener
    bottomNavigationView.setOnNavigationItemSelectedListener(
    new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    switch (item.getItemId()) {

    case R.id.recent_item:
    Toast.makeText(MainActivity.this, "Recent Item Selected", Toast.LENGTH_LONG).show();
    break;
    case R.id.location_item:
    Toast.makeText(MainActivity.this, "Favorite Item Selected", Toast.LENGTH_LONG).show();
    break;
    case R.id.favorite_item:
    Toast.makeText(MainActivity.this, "Location Item Selected", Toast.LENGTH_LONG).show();
    break;
    }
    return true;
    }
    });

    }
    }

Want to Scale
Your Business?
Let’s Meet & Discuss!

Canada Flag

CANADA

30 Eglinton Ave W Mississauga, Ontario L5R 3E7

India Flag

INDIA

3rd floor Purusharth Plaza, Amin Marg, Rajkot, Gujarat. 360002

Get a Quote Now

Let's delve into a thorough understanding of your challenges and explore potential solutions together