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:

If you want to move in between the app then you should add the bottom navigation tab bar in your application. The bottom navigation bars allow users to move between the primary destinations in the app.

Uses of Bottom Navigation Tab Bar:

In Bottom navigation tab bars, one can display three to five destinations at the bottom of a screen at a time. Each destination is represented by an icon with an optional text label. When a bottom navigation tab is clicked, the user is redirected to the top-level navigation destination linked with that icon.

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:

• Top-level destinations that need to be accessible from anywhere in the app
• 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:

• Single tasks, such as viewing a single email
• 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:

There are three destinations in this bottom navigation, each with an icon and text label.

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

Representing destinations:

The way bottom navigation destinations are represented can depend on how many tabs are used:

• 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

Bottom navigation destinations always include an icon. It’s best to pair icons with text labels, especially if the icon doesn’t have an obvious meaning.

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

Text labels

Text labels should be short, meaningful descriptions of the bottom navigation

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

Active and inactive icons and text labels should have sufficient contrast with the container. Active and inactive icons and text labels should have sufficient contrast with the container.

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:

1. Create a new Android Studio Project.

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:

main_activity.xml:

<?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!!