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:

1. 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.

2. 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'
}


3. 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:



4. Open the layout file the main activity activity_main.xml and add below code:




5. 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;
}
});

}
}