Android Bottom Navigation Bar Introduction:-

Android Bottom Navigation stays at the bottom of the screen providing navigation between top-level views in the app.

When to use Bottom Navigation?
As per the design specs, the below navigations should be used depending on the criteria.

i.    Navigation Drawer – Use when top-level navigation has more than six destinations.

 ii.  Tabs – Use when there are two navigational destinations.

 iii. Bottom Navigation – Use when there are three to five top-level destinations.


Here is the the demo video of Bottom Navigation Bar


Start the Project

 
You can add Bottom Navigation bar in your app in two ways. The quick and easy way is choosing the Bottom Navigation Activity from Android Studio when the new project is created. This creates an empty project with bottom navigation  added.

 

 

This creates the below basic skeleton app with few bottom navigation menu items.

 

Even though Android Studio gives you basic  Bottom Navigation Bar, making it fully functional takes some effort.

To give you full information about Bottom navigation Bar, instead of choosing the Bottom Navigation temple, I am creating an empty project and add the bottom navigation by explaining every step is needed. So let’s get
started.



Start New Project:-

Open strings.xml, dimens.xml, colors.xml located under res ⇒ values and add the below values.

strings.xml
<resources>
<string name="app_name">BottomNavigation</string>
<string name="title_home">Home</string>
<string name="title_profile">Profile</string>
<string name="title_notifications">Notifications</string>
</resources>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
</resources>
dimens.xml
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
</resources>

 

Download Home,Notifications and Profile icons  and add them to your project’s res folder. These icons will be used as bottom navigation  item icons.

Under res ⇒ menu directory, create menu xml files named bottom_nav_menu.xml

 
 
bottom_nav_menu.xml
<?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="@drawable/ic_home_black_24dp"
android:title="@string/title_home" />

<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications" />
<item
android:id="@+id/navigation_profile"
android:icon="@drawable/ic_person_black_24dp"
android:title="@string/title_profile" />
</menu>


Creating Fragment & Layout:-

Create all the fragment classes needed for bottom navigation bar. Overall I am creating three fragment classes. 

 

HomeFragment.java
package com.androidcreation.bottomnavigation.ui.home;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProviders;

import com.androidcreation.bottomnavigation.R;

public class HomeFragment extends Fragment {

private HomeViewModel homeViewModel;

public View onCreateView(@NonNull LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
homeViewModel =
ViewModelProviders.of(this).get(HomeViewModel.class);
View root = inflater.inflate(R.layout.fragment_home, container, false);
final TextView textView = root.findViewById(R.id.text_home);
homeViewModel.getText().observe(this, new Observer<String>() {
@Override
public void onChanged(@Nullable String s) {
textView.setText(s);
}
});
return root;
}
}

 

NotificationsFragment.java

package com.androidcreation.bottomnavigation.notifications;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProviders;

import com.androidcreation.bottomnavigation.R;

public class NotificationsFragment extends Fragment {

    private NotificationsViewModel notificationsViewModel;

    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        notificationsViewModel =
                ViewModelProviders.of(this).get(NotificationsViewModel.class);
        View root = inflater.inflate(R.layout.fragment_notifications, container, false);
        final TextView textView = root.findViewById(R.id.text_notifications);

        textView.setText("This is Notification Fragment");
        return root;
    }
}
ProfileFragment.java

package com.androidcreation.bottomnavigation.profile;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProviders;

import com.androidcreation.bottomnavigation.R;

public class ProfileFragment extends Fragment {

    private ProfileViewModel profileViewModel;

    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        profileViewModel =
                ViewModelProviders.of(this).get(ProfileViewModel.class);
        View root = inflater.inflate(R.layout.fragment_profile, container, false);
        final TextView textView = root.findViewById(R.id.text_dashboard);
        textView.setText("This is Profile Fragement");

        return root;
    }
}

 

add below code in  fragment_home.xml,fragment_notifications.xml and fragment_profile.xml.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

<TextView
android:id="@+id/text_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

now we create a file mobile_navigation.xml in res=>navigation directory.

Navigation occurs between your app’s destinations—that is, anywhere in your app to which users can navigate. These destinations are connected via actions.

A navigation graph is a resource file that contains all of your destinations and actions. The graph represents all of your app’s navigation paths.

mobile_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/mobile_navigation"
app:startDestination="@+id/navigation_home">

<fragment
android:id="@+id/navigation_home"
android:name="com.androidcreation.bottomnavigation.ui.home.HomeFragment"
android:label="@string/title_home"
tools:layout="@layout/fragment_home" />


<fragment
android:id="@+id/navigation_notifications"
android:name="com.androidcreation.bottomnavigation.ui.notifications.NotificationsFragment"
android:label="@string/title_notifications"
tools:layout="@layout/fragment_notifications" />
<fragment
android:id="@+id/navigation_profile"
android:name="com.androidcreation.bottomnavigation.ui.profile.ProfileFragment"
android:label="@string/title_profile"
tools:layout="@layout/fragment_profile" />

</navigation>

 

finally in the MainActivity.java add the below code:-

MainActivity.java
package com.androidcreation.bottomnavigation;

import android.os.Bundle;

import com.google.android.material.bottomnavigation.BottomNavigationView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BottomNavigationView navView = findViewById(R.id.nav_view);
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
R.id.navigation_home, R.id.navigation_notifications, R.id.navigation_profile)
.build();
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
NavigationUI.setupWithNavController(navView, navController);
}

}

Output:-

0 CommentsClose Comments

Leave a comment

shares

Newsletter Subscribe

Get the Latest Posts & Articles in Your Email

We Promise Not to Send Spam:)