Bottom Navigation (Android Material Design)

Android Material Design

Material design is a design language developed by Google in 2014. The idea was to have a unified front for all design aspects.

Bottom Navigation

Bottom navigation bars are situated as name suggests at the bottom of your view. It enables you to select or to say explore top-level views on single tap. The requirement should be clear in your head, if you have two main views to show, its better you don't use Bottom Navigation View, instead go for Tabs. There can be minimum three to maximum five top-levels destinations. In case, you add sixth element it will throw an exception at run-time.

Bottom Navigation view

A simple example to create Bottom Navigation View.

1. Create a Project in Android Studio.
2. Select type of Activity you want to create. Here we will select "Bottom Navigation Activity".   

   

   Select your Activity

3. Customizing the view accordingly now, will require we add are own icons and text. To change the designated icons from the bottom navigation view,you need to change the "navigation.xml" file from /menu folder. My changes looks like this.                                                                                          

 <?xml version="1.0" encoding="utf-8"?>  
 <menu xmlns:android="http://schemas.android.com/apk/res/android">  
   <item  
     android:id="@+id/navigation_home"  
     android:icon="@mipmap/ic_home"  
     android:title="@string/title_home" />  
   <item  
     android:id="@+id/navigation_offer"  
     android:icon="@mipmap/ic_offers"  
     android:title="@string/offers" />  
   <item  
     android:id="@+id/navigation_ticket"  
     android:icon="@mipmap/ic_ticket"  
     android:title="@string/tickets" />  
 </menu>  

   4. OnNavigationItemSelected(MenuItem item) is overridden for OnNavigationItemSelectedListener , for each cases you can define your action to be implemented.

 public class MainActivity extends AppCompatActivity {  
   private TextView mTextMessage; // text to show on screen  
   /**  
    * This listener is used to detect item selected when any tab is pressed.  
    */  
   private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener  
       = new BottomNavigationView.OnNavigationItemSelectedListener() {  
     @Override  
     public boolean onNavigationItemSelected(@NonNull MenuItem item) {  
       switch (item.getItemId()) {  
         case R.id.navigation_home:  
           mTextMessage.setText(R.string.title_home); //change text on screen  
           return true;  
         case R.id.navigation_offer:  
           mTextMessage.setText(R.string.offers);//change text on screen  
           return true;  
         case R.id.navigation_ticket:  
           mTextMessage.setText(R.string.tickets);//change text on screen  
           return true;  
       }  
       return false;  
     }  
   };  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     mTextMessage = (TextView) findViewById(R.id.message);  
     BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);  
     navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);  
   }  
 }  

Full source code