In this Tutorial I am going to discuss about How to create bottom navigation view in android app .
Bottom Navigation View creates bottom navigation bars, making it easy to explore and switch between top-level content views with a single tap. Bottom Navigation view should be used when application has three to five top-level destinations.
1. Create a New Project :
Lets we start with a new project in Android Studio from File New Project ⇒
select Empty Activity and go through it.
2. Implement Design support library :
Implement Design support Library inside your project build.gradle file .
implementation 'com.android.support:design:28.0.0'
Try to add the latest version of the Design support library. Once that’s done, save the file and perform a Gradle sync.
3. Implement Bottom Navigation view and FrameLayout to the XML Layout :
Implement BottomNavigation view and FrameLayout to your XML Layout file i.e. activity_main.xml to display it for better user experience .
BottomNavigation :
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="@color/colorAccent"
android:layout_gravity="bottom"
tools:elevation="2dp"
app:itemTextColor="#fff"
android:layout_alignParentBottom="true"
app:menu="@menu/bottom_menu" />
FrameLayout :
<FrameLayout
android:id="@+id/viewlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<FrameLayout
android:id="@+id/viewlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="@color/colorAccent"
android:layout_gravity="bottom"
tools:elevation="2dp"
app:itemTextColor="#fff"
android:layout_alignParentBottom="true"
app:menu="@menu/bottom_menu" />
</RelativeLayout>
4.Create menu resourse file :
Create menu resourse file inside res/menu/bottom_menu.xml
<?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_home_black_24dp"
android:title="@string/home"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_msg"
android:enabled="true"
android:icon="@drawable/ic_message_black_24dp"
android:title="@string/msg"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_video"
android:enabled="true"
android:icon="@drawable/ic_ondemand_video_black_24dp"
android:title="@string/video"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_info"
android:enabled="true"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/info"
app:showAsAction="ifRoom" />
</menu>
5.Create Fragments for each of the views :
Here we create four fragments named as Home, Message, Video and Notification .
You can read our last tutorial for How to create Fragments in android ?
6.Implement OnItemSelectedListener of BottomNavigation view :
Now implement OnItemSelectedListener of bottomnavigation view to switch between different fragments .
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Fragment fragment;
switch (item.getItemId()) {
case R.id.action_home:
fragment = home;
setTitle(item.getTitle());
break;
case R.id.action_msg:
fragment = msg;
setTitle(item.getTitle());
break;
case R.id.action_video:
fragment = video;
setTitle(item.getTitle());
break;
case R.id.action_info:
default:
fragment = noti;
setTitle(item.getTitle());
break;
}
fragmentManager.beginTransaction().replace(R.id.viewlayout, fragment).commit();
return true;
}
});
// Set default selection
bottomNavigationView.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);
bottomNavigationView.setSelectedItemId(R.id.action_home);
MainActivity.java :
Now open your MainActivity.java and add following code .
package com.technxtcodelabs;
import android.support.annotation.NonNull;
import android.support.design.bottomnavigation.LabelVisibilityMode;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.FrameLayout;
public class MainActivity extends AppCompatActivity {
BottomNavigationView bottomNavigationView;
FrameLayout viewlayout;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewlayout = (FrameLayout)findViewById(R.id.viewlayout);
bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
final FragmentManager fragmentManager = getSupportFragmentManager();
// Declare fragments here
final Home home = new Home();
final Message msg = new Message();
final Video video = new Video();
final Notification noti = new Notification();
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Fragment fragment;
switch (item.getItemId()) {
case R.id.action_home:
fragment = home;
setTitle(item.getTitle());
break;
case R.id.action_msg:
fragment = msg;
setTitle(item.getTitle());
break;
case R.id.action_video:
fragment = video;
setTitle(item.getTitle());
break;
case R.id.action_info:
default:
fragment = noti;
setTitle(item.getTitle());
break;
}
fragmentManager.beginTransaction().replace(R.id.viewlayout, fragment).commit();
return true;
}
});
// Set default selection
bottomNavigationView.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);
bottomNavigationView.setSelectedItemId(R.id.action_home);
}
}
Now run the project/app in android device or any Emulator to add Bottom navigation bar android to your app.