29Nov 2016

How to Create Android Material Design Bottom Navigation

  Android
matirial-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 in 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:

components_bottomnavigation_usage1

 

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:

1
2
3
4
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <item
       android:id="@+id/recent_item"
       android:icon="@drawable/ic_update"
       android:title="Recents" />
   <item
       android:id="@+id/location_item"
       android:icon="@drawable/ic_location"
       android:title="Location" />
   <item
       android:id="@+id/favorite_item"
       android:icon="@drawable/ic_favorite"
       android:title="Favorite" />
</menu>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

 <android.support.design.widget.BottomNavigationView
   android:id="@+id/bottom_navigation"
   app:menu="@menu/menu"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true" />
</RelativeLayout>

5. And finally Open the layout file the main activity MainActivity.java and add below code:

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
35
36
37
38
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;
                   }
               });

   }
}
Brevity

About Admin

Brevity Software provides services such as : Web design and development, Mobile application development, Web application development, Travel portal development, Event management systems, Transport & Logistics Software, Enterprise Mobility Solutions, eCommerce & M Commerce application and many more.

One thought on “How to Create Android Material Design Bottom Navigation

  1. Tim says:

    Great blog post! In my opinion, it’s a good idea to follow Google’s design guidelines for software development. But occasionally it can work against you. Anyway, looking forward to reading more great content!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>