Skip to main content

Create Amazing Bottom Navigation Bar In Android

Google has added the Bottom Navigation menu to Google Support Library. Bottom navigation bars make it easy to switch between the view within a single layout. As per material design guidelines, now we can add it using a standard library. In this article, I will explain how to add the bottom navigation bar to the android app.




As per material design guideline, bottom navigation bar should be used where we need to use 3 to 5 menu item.  More than that menu item is not recommended for the bottom navigation bar. If you would like to know more about bottom navigation bar recommendation you can check on material design website here.

1. Introduction


In this tutorial, we are going to create an app to show how to use and implement the Bottom Navigation Bar in Android. We will create two fragments with different kind of content and view which will be changed as you touch the tab from Bottom Navigation Bar.

2. Create the project for Bottom Navigation Bar with Activity


So creating the project Go To File> New > New Project, Put the name of your project here, for example, we have take name as Bottom Navigation Bar Demo then click on Next and select the empty activity.

3. Setting the dependency Bottom Navigation Bar for Activity


As I explained at the starting of this tutorial Bottom Navigation Bar added to support Library from version 25.0.0.  So add the dependency in project build.gradle files and sync the project. So we can add the Bottom Navigation bar to our Activity, but for that, we need to add the follwing dependency to our project first.
   compile 'com.android.support:appcompat-v7:25.2.0'  
compile 'com.android.support:design:25.2.0'

4. Adding Bottom Navigation Bar for Activity to your XML


Before adding the Bottom Navigation Bar to our app first we will test our application to check whether the application is working or not. So just click on run button from Android Studio Navigation menu and select the emulator.
Now open your main activity XML files and add the Bottom Navigation Bar to your activity_main.xml file.

<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_menu"
/>


An important point to note here is that weBottom Navigation Layout Design have added it under Linear Layout and apart for that, I have added a Frame Layout also inside Linear layout so that we can use this later on to show our fragment. You can check the layout using the Android Layout editor by clicking on Design Button it will look like as given in the screenshots.



 

 

 


5. Create Bottom Navigation Bar Menu Item


As you can see in the screenshots we have just added the Bottom Navigation Bar to our project, but there is no any item inside our Bottom Navigation Bar. So it is time to add the menu Item to it.
Bottom Navigation Layout Design

 So for adding the menu item we need to add a menu resource files inside menu folder. Right click on menu folder and create an XML file with the name of bottom_nav_menu_item.xml, you can choose your name as per your convenience and if menu folder does not exist then first create the menu folder and then added the menu XML files.



 5.1 Create Menu Folder



So For creating the menu folder just right-click on res folder and select the New>  New Resource Directory and select the type from the Resource type drop down option, Put the name of the directory as menu and click on Ok Button.


5.1 Create Menu resource File



Now, similarly right-click on menu directory and select the Menu Resource Files put the name of your menu XML files as bottom_nav_menu_item.xml.



Your menu resource files will get created, now add the menu item to our resource files.
For adding the menu Item to add the below code to your XML files or you can use the Android Studio Design Tool to add the menu item to your menu resource files.

<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:id="@+id/Home"
android:icon="@drawable/ic_home_black_24dp"
android:title="Home" />
<item
android:id="@+id/Gallery"
android:icon="@android:drawable/ic_menu_gallery"
android:title="Gallery" />
</menu>


6. Setting menu item to Bottom Navigation Bar


We have created the menu item in our last steps which contain two item Home and Gallery, but if we run our app this menu will now show in our app because we still not added the menu item to our Bottom Navigation Bar. Now we will add the menu item to the navigation menu.

For adding the menu item open the main_activity.xml files once again and add the below line to your Bottom Navigation Bar declaration section.

 app:menu="@menu/bottom_nav_menu"


So, After this change, our full Bottom Navigation Bar declaration looks like as given below.

<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_menu"
/>




At this point, you may want to test your app whether your menu item is showing or not, so hit the run button in from your Android Studio Menu bar and check out the application layout, if everything works well and implemented correctly then you will see two menu item inside your Bottom navBar menu one is Home and Gallery are visible.

7. Detecting touch or click event to switch the View


As of now, we have not done anything related to coding part of Bottom Navigation Bar implementation. So now its time to do some coding to see the real implementation of Bottom Navigation Bar. We need to modify our MainActivity.java file similar as given below to see the Bottom Navigation Bar in action.

public class MainActivity extends AppCompatActivity {
ActionBar actionBar;
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.Home:
actionBar.setTitle("Home");
return true;
case R.id.Gallery:
actionBar.setTitle("Gallery");
return true;
}
return false;
}

};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
actionBar=getSupportActionBar();
BottomNavigationView bottom_navigation = (BottomNavigationView) findViewById(R.id.bottom_navigation);
bottom_navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
}
}


Test your app again and check by tapping on both bottom menu item. You will see that top title bar heading is getting changed as you change the view. So we have completed the implementation part. Next, we will integrate the fragment with these menu items so that View can also be changed as you tab on the bottom navigation bar menu item.

8. Loading Fragment in Bottom Navigation Bar


Loading the Fragment on Item click is very important because this is the real use of the menu. Because you want to show different layout to your user when they tab on home and Gallery menu Item.

So for adding the fragment we need to create two fragments and attach that fragment with item selected listener. Below is the fragment that we are creating to use with home and gallery item of our Bottom Navigation Bar.

HomeFragment.java

public class HomeFragment extends Fragment {
public HomeFragment() {
// Required empty public constructor
}
public static HomeFragment newInstance() {
HomeFragment fragment = new HomeFragment();
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_home, container, false);
}
}


fragment_home.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.debugandroid.bottomnavigationdemo.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text"
android:text="Home Fragment">

</TextView>
</FrameLayout>


In a similar way as we created our Home Fragment we can create our Gallery Fragment. It's time to bind the fragment with click event of the menu item.  For this, we are adding two methods to our MainActivity.java files.

    public void setHomeFragment(){
FragmentManager fm= getSupportFragmentManager();
FragmentTransaction ft=fm.beginTransaction();
Fragment homeFragment=HomeFragment.newInstance();
ft.replace(R.id.main_container,homeFragment);
ft.commit();
}

public void setGalleryFragment(){
FragmentManager fm= getSupportFragmentManager();
FragmentTransaction ft=fm.beginTransaction();
Fragment galleryFragment=GalleryFragment.newInstance();
ft.replace(R.id.main_container,galleryFragment);
ft.commit();
}


Now, we need to call these two methods from the respective case option of our Bottom Navigation Bar listener. Which will change the layout when user tab on the respective menu item of Navigation Bar.

public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.Home:
actionBar.setTitle("Home");
setHomeFragment();
return true;
case R.id.Gallery:
actionBar.setTitle("Gallery");
setGalleryFragment();
return true;
}
return false;
}


We are all done now test your application and you see that your view is getting changed as you click on Bottom Navigation Menu.

Bottom Navigation Bar

9. Conclusion


We have created a fully functioning application with Bottom Navigation Bar. It is quite easy to implement and gives good UX to our app user.

In short, this is up to us how we are using this in our application. But I recommend following the Bottom Navigation Bar material design guidelines to use this in your mobile application. As per that it is good to use this if we have three to five menu item to show at the bottom.

You can check out the other option and function on Android Developer Official Sites.

Comments

Post a Comment

Popular posts from this blog

Flutter Theme Creation, Programmatic Way

Flutter and Dart is an excellent combination for creating the mobile app with material design with nice GUI. Its lots of widget which help the developer for creating the app UI very fast with respect to the other language. You may face some problem in starting due to comm, curly brace and semicolon but after some time you will find the way how to work with these all stuff and it becomes very easy for you. But in this article, we are not going to discuss all these. In this article, we will handle a very interesting topic on how to create a custom theme or multiple themes and let's user decide which theme to use.



Create a flutter project



So let's create a flutter project by selecting the appropriate option from the File menu in android studio or Visual Code. If you are new to Flutter and Dart you can check out our recent post to get started Creating Cross-platform app using flutter.



Once your project is created you will get the default counter app and you try running the app in the…

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View.

Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android
Just go to the android folder and open it in separate windows. We will have the following project structure.









Create the Activity Just right click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project sync completed.
Update the project build config …

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit.
What is Retrofit?
If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps.

Further, you can check the Retrofit Library here.

So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website.
Prerequisite for using the Retrofit for WordPress Android App
There is s…