Its been a while i have not written any article. Today we are going to learn new design widget in Android naming Bottom Navigation View which has been added to version 25 of the Design Support Library.
The Bottom Navigation View has been in the material design guidelines for some time, but it hasn’t been easy for us to implement it into our apps. Some applications have built their own solutions, whilst others have relied on third-party open-source libraries to get the job done. Now the design support library is seeing the addition of this bottom navigation bar, let’s take a dive into how we can use it!
In this tutorial, we are going to learn how to implement 3 types Bottom Navigation View : Default, Custom and Bottom Navigation with more than 3 Menus.
Types of Bottom Navigation View that we are going to learn:
1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is MainActivity.java.
2. Open build.gradle and include this libraries show below:
1 2 |
/** Library Version should be 25 or 25+ **/ compile 'com.android.support:design:25.1.0' |
3. Once you have synced your project with the Design support library. Now create a new layout naming bottom_navigation_view_activity.xml and we simply need to add the Bottom Navigation View widget to our desired layout file. Remember that this should be aligned with the bottom of the screen with all content displaying above it.
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 39 40 41 42 43 44 45 46 47 48 49 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- Frame Container for Fragment --> <FrameLayout android:id="@+id/frame_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/default_bottom_navigation" /> <!-- All 3 Bottom Navigation Views --> <android.support.design.widget.BottomNavigationView android:id="@+id/default_bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:visibility="gone" app:itemBackground="@color/colorPrimary" app:itemIconTint="@android:color/white" app:itemTextColor="@android:color/white" app:menu="@menu/bottom_navigation_main" /> <android.support.design.widget.BottomNavigationView android:id="@+id/custom_bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:visibility="gone" app:itemBackground="@android:color/white" app:itemIconTint="@drawable/custom_navigation_selector" app:itemTextColor="@drawable/custom_navigation_selector" app:menu="@menu/bottom_navigation_main" /> <android.support.design.widget.BottomNavigationView android:id="@+id/more_menu_bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:visibility="gone" app:itemBackground="@color/colorPrimary" app:itemIconTint="@android:color/white" app:itemTextColor="@android:color/white" app:menu="@menu/more_bottom_navigation_main" /> </RelativeLayout> |
You’ll notice that the widget has a couple of attributes set on it. We can use these to set menu items we wish to display and the colours to be used throughout the Bottom Navigation View:
We can also set these values programatically by using the following methods on our BottomNavigationView instance:
4. So we referenced a menu in the previous section, so create a menu under menu directory naming bottom_navigation_menu.xml and more_bottom_navigation_menu.xml and add the menu items according to your requirement.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_home" android:enabled="true" android:icon="@drawable/ic_dashboard_black_24dp" android:title="@string/home" app:showAsAction="ifRoom" /> <item android:id="@+id/action_message" android:enabled="true" android:icon="@drawable/ic_chat_black_24dp" android:title="@string/message" app:showAsAction="ifRoom" /> <item android:id="@+id/action_notification" android:enabled="true" android:icon="@drawable/ic_notifications_black_24dp" android:title="@string/notification" app:showAsAction="ifRoom" /> </menu> |
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 |
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_home" android:enabled="true" android:icon="@drawable/ic_dashboard_black_24dp" android:title="@string/home" app:showAsAction="ifRoom" /> <item android:id="@+id/action_message" android:enabled="true" android:icon="@drawable/ic_chat_black_24dp" android:title="@string/message" app:showAsAction="ifRoom" /> <item android:id="@+id/action_notification" android:enabled="true" android:icon="@drawable/ic_notifications_black_24dp" android:title="@string/notification" app:showAsAction="ifRoom" /> <item android:id="@+id/action_profile" android:enabled="true" android:icon="@drawable/ic_account_circle_black_24dp" android:title="@string/profile" app:showAsAction="ifRoom" /> </menu> |
It’s important to note that the maximum number of items we can display is 5. This may change at any point, so it’s important to check this by using the getMaxItem() method provided by the BottomNavigationView class rather than hard-coding the value yourself.
5. For custom Navigation View we need to create a selector file under drawable directory naming custom_navigation_selector.xml. This selector file is going to be used in your point 3 layout file.
1 2 3 4 5 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@android:color/black" android:state_checked="false" /> <item android:color="@color/colorPrimaryDark" android:state_checked="true" /> </selector> |
6. Now to handle the click event over Bottom Navigation Bar you need setOnNavigationItemSelectedListener() method to set a listener for menu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
defaultBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.action_home: break; case R.id.action_message: break; case R.id.action_notification: break; case R.id.action_profile: break; } return true; } }); |
7. Now create BottomNavigationViewActivity.java class and add the below code to it. This class contains the implementation of Bottom Navigation View.
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
package com.bottomnavigationview_demo; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.design.widget.BottomNavigationView; import android.support.v4.app.Fragment; import android.support.v7.app.AppCompatActivity; import android.view.MenuItem; import android.view.View; /** * Created by sonu on 14/01/17. */ public class BottomNavigationViewActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener { public static final String NAVIGATION_TYPE = "navigation_type"; private BottomNavigationView defaultBottomNavigationView, customBottomNavigationView, moreMenuNavigationView; private BottomNavigationType bottomNavigationType; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.bottom_navigation_view_activity); //Get the Type of Navigation Via Intent bottomNavigationType = (BottomNavigationType) getIntent().getSerializableExtra(NAVIGATION_TYPE); //Find IDs for all Navigation Views defaultBottomNavigationView = (BottomNavigationView) findViewById(R.id.default_bottom_navigation); customBottomNavigationView = (BottomNavigationView) findViewById(R.id.custom_bottom_navigation); moreMenuNavigationView = (BottomNavigationView) findViewById(R.id.more_menu_bottom_navigation); setNavigation(); setListeners(); } //Create a method to implement listeners over all Navigation Views private void setListeners() { defaultBottomNavigationView.setOnNavigationItemSelectedListener(this); customBottomNavigationView.setOnNavigationItemSelectedListener(this); moreMenuNavigationView.setOnNavigationItemSelectedListener(this); } //Show hide navigation views on basis of Navigation Type private void setNavigation() { switch (bottomNavigationType) { case DEFAULT: defaultBottomNavigationView.setVisibility(View.VISIBLE); customBottomNavigationView.setVisibility(View.GONE); moreMenuNavigationView.setVisibility(View.GONE); //By Default Set Home Fragment replaceDummyFragment(defaultBottomNavigationView.getMenu().findItem(R.id.action_home)); break; case CUSTOM: defaultBottomNavigationView.setVisibility(View.GONE); customBottomNavigationView.setVisibility(View.VISIBLE); moreMenuNavigationView.setVisibility(View.GONE); //By Default Set Home Fragment replaceDummyFragment(customBottomNavigationView.getMenu().findItem(R.id.action_home)); break; case MORE_MENU: defaultBottomNavigationView.setVisibility(View.GONE); customBottomNavigationView.setVisibility(View.GONE); moreMenuNavigationView.setVisibility(View.VISIBLE); //By Default Set Home Fragment replaceDummyFragment(moreMenuNavigationView.getMenu().findItem(R.id.action_home)); break; } } @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { //If item is Checked make it unchecked if (item.isChecked()) item.setChecked(false); switch (item.getItemId()) { case R.id.action_home: //Check the Item item.setChecked(true); replaceDummyFragment(item); break; case R.id.action_message: //Check the Item item.setChecked(true); replaceDummyFragment(item); break; case R.id.action_notification: //Check the Item item.setChecked(true); replaceDummyFragment(item); break; case R.id.action_profile: //Check the Item item.setChecked(true); replaceDummyFragment(item); break; } return true; } //Replace Dummy Fragment and Pass the Fragment title via Fragment private void replaceDummyFragment(@NonNull MenuItem item) { Bundle b = new Bundle(); b.putString(DummyFragment.FRAGMENT_TITLE, item.getTitle().toString()); Fragment dummyFragment = new DummyFragment(); dummyFragment.setArguments(b); getSupportFragmentManager().beginTransaction().replace(R.id.frame_container, dummyFragment).commit(); } } |
8. Now you are all set up to create a Bottom Navigation Bar for your Android app.
Thanks. 🙂
Subscribe to us and get the latest news.
2 Comments
Hanry
Saturday, May 19th, 2018What about muli-line text in bottom navigation item?
Dr. Droid
Saturday, May 19th, 2018Hi Hanry,
You can check the Bottom Navigation design guidelines here: https://material.io/design/components/bottom-navigation.html#anatomy
If you want to make multiline you need to make it custom.
Thanks