Bottom Navigation Tab Bar with Fragment in Android

In this blog, we’re going to create a bottom navigation tab bar with a fragment. Before going to the coding part first, let’s understand what the bottom navigation tab bar is and its behavior.

Bottom Navigation Tab Bar:

Uses of Bottom Navigation Tab Bar:

There are three fundamentals for the bottom navigation tab bar, these are:

  1. Ergonomic, that means user-friendly. The bottom navigation bar is easy to reach on a handheld mobile device.
  2. Consistent, that means compatible. When used, the bottom of the navigation bar appears at the bottom of every screen.
  3. Related, that means correlated. Bottom navigation bar destinations should be of equal value.

When to use Bottom Navigation Tab Bar:

Bottom navigation Tab Bar should be used for:

  • Three to five destinations (3–5)
  • Mobile or tablet only

Do

Do use more than three and less than or equal to five destinations. This is ideal for a bottom navigation tab bar.

Bottom navigation Tab Bar shouldn’t be used for:

  • User preferences or settings

Don’t

Don’t use a bottom navigation tab bar for fewer than three destinations.

Don’t

Don’t use more than five destinations. For those cases, try tabs or a navigation drawer.

A Study of Bottom Navigation Tab bar:

  1. Container
  2. Inactive icon
  3. Inactive text label
  4. Active icon
  5. Active text label

Representing destinations:

  • Three destinations (or tabs): Display icons and text labels for all destinations.
  • Four destinations (or tabs): Active destinations display an icon and text label. Inactive destinations display icons, and text labels are recommended.
  • Five destinations (or tabs): Active destinations display an icon and text label. Inactive destinations use icons, and use text labels are recommended.

There are four destinations in this bottom navigation tab bar, each with an icon, and text labels are visible only for the clicked destinations.

Icons

Icons paired with text labels in the bottom navigation tab bar.

Text labels

Do

Use short text labels.

Don’t

Don’t truncate text. The truncation may obscure important destination information.

Don’t

Don’t shrink text to fit on a single line

Caution

Avoid wrapping text.

Icon & label colors

Do

Use the Primary or High-Emphasis “On” color for the active destination in a bottom navigation bar.

Don’t

Don’t use multiple or low-contrast colors in a bottom navigation bar, as they make it harder for users to distinguish the active item and navigate to other destinations.

Bottom Navigation Tab bar with Fragment:

2. Before going to create the bottom navigation tab bar in the main XML file first create the destinations or tabs of it. Here four destinations or tabs are used. For the navigation, create a menu for it.

3. For menu go to the res folder of android and create a new Android Resource Directory named “menu” under it (res > New > Android Resource Directory > Select Menu). Under the menu directory create a new menu resource file (menu > New > Menu Resource File) and paste the below code:

<?xml version=”1.0" encoding=”utf-8"?>
<menu xmlns:android=”http://schemas.android.com/apk/res/android">
<
item
android:id=”@+id/nav_home”
android:icon=”@drawable/icons_home”
android:title=”Home”
/>
<
item
android:id=”@+id/nav_blog”
android:icon=”@drawable/icons_blog”
android:title=”Blog”
/>
<
item
android:id=”@+id/nav_profile”
android:icon=”@drawable/icons_customer”
android:title=”Profile”
/>
<
item
android:id=”@+id/nav_saved”
android:icon=”@drawable/icons_bookmark”
android:title=”Saved”
/>
</
menu>

**Make sure you paste the drawable file under the res > drawable folder before pasting the code.

4. After that import that menu file into the main XML file using <BottomNavigationView>.

<com.google.android.material.bottomnavigation.BottomNavigationView

android:id="@+id/bottom_navigation"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="?android:attr/windowBackground"

app:menu="@menu/bottom_navigation" />

5. Now create those four destinations shown in the bottom navigation tab bar. For destinations create four new blank fragments (java package > New > Fragment > Blank Fragment). Here fragments are Home, Blog, Profile, and Saved.

6. Now initiate the Bottom Navigation View under java onCreate() method.

BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);

7. And set the Navigation item selected click listener using BottomNavigationView.OnNavigationItemSelectedListener.

private BottomNavigationView.OnNavigationItemSelectedListener navListener =
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Fragment selectedFragment =
null;
switch (item.getItemId()) {
case R.id.nav_home:
selectedFragment =
new HomeFragment();
break;
case R.id.nav_blog:
selectedFragment =
new BlogFragment();
break;
case R.id.nav_profile:
selectedFragment =
new ProfileFragment();
break;
case R.id.nav_saved:
selectedFragment =
new SavedFragment();
break;
}
getSupportFragmentManager().beginTransaction().replace(R.id.
fragment_container,
selectedFragment).commit();
return true;
}
};

8. Then call the navigation listener using setOnNavigationItemSelectedListener under onCreate() callback method.

bottomNav.setOnNavigationItemSelectedListener(navListener);

Codes:

<?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"
xmlns:tools=”http://schemas.android.com/tools"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”
>

<
FrameLayout
android:id=”@+id/fragment_container”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”#CCCCCC”
android:layout_above=”@id/bottom_navigation”
/>

<
com.google.android.material.bottomnavigation.BottomNavigationView
android:id=”@+id/bottom_navigation”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
android:background=”?android:attr/windowBackground”
app:menu=”@menu/bottom_navigation”
/>

</
RelativeLayout>

ActivityMain.java:

package com.codewithgolap.fragment;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import android.os.Bundle;
import android.view.MenuItem;
import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

BottomNavigationView bottomNav = findViewById(R.id.
bottom_navigation);
bottomNav.setOnNavigationItemSelectedListener(
navListener);
//I added this if statement to keep the selected fragment when rotating the device
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction().replace(R.id.
fragment_container,
new HomeFragment()).commit();
}
}

private BottomNavigationView.OnNavigationItemSelectedListener navListener =
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Fragment selectedFragment =
null;
switch (item.getItemId()) {
case R.id.nav_home:
selectedFragment =
new HomeFragment();
break;
case R.id.nav_blog:
selectedFragment =
new BlogFragment();
break;
case R.id.nav_profile:
selectedFragment =
new ProfileFragment();
break;
case R.id.nav_saved:
selectedFragment =
new SavedFragment();
break;
}
getSupportFragmentManager().beginTransaction().replace(R.id.
fragment_container,
selectedFragment).commit();
return true;
}
};
}

Output:

Follow me for content like this. And for more follow my website GBAndroidBlogs.

Happy Coding!!

Hi everyone, myself Golap an Android app developer with UI/UX designer.