The Bottom Navigation Bar is a popular UI component in Android apps that allows users to navigate between different sections quickly. It is often seen in apps like Instagram, YouTube, and Facebook, where users switch between Home, Profile, and other pages effortlessly.
A Bottom Navigation Bar typically consists of three to five menu items, each representing a different section of the app. It improves user experience by making navigation simple and intuitive. In this article, we will implement a Bottom Navigation Bar in Android using Java with detailed step-by-step guidance.
Why Use a Bottom Navigation Bar?
1. Improves User Experience
A Bottom Navigation Bar enhances user experience by providing a consistent and easily accessible navigation structure. Since it is located at the bottom of the screen, users can switch between sections with minimal effort.
2. Saves Screen Space
Unlike traditional menus, the Bottom Navigation Bar does not take up too much space. It remains visible on the screen, allowing users to quickly access different sections without opening a drawer or sidebar.
3. Encourages Better Navigation
Most modern Android apps use the Bottom Navigation Bar for primary app sections like Home, Search, Profile, and Settings. This reduces confusion and makes it easier for users to navigate between important features.
Step-by-Step Guide to Implement Bottom Navigation in Android
To implement a Bottom Navigation Bar in Android, follow these steps:
Step 1: Create a New Android Project
- Open Android Studio.
- Select New Project → Empty Activity.
- Choose Java as the language.
- Click Finish and wait for the project to build.
Step 2: Add Dependencies
Before implementing the Bottom Navigation Bar, ensure you have the latest Material Components dependency in your build.gradle (Module: app) file.
dependencies {
implementation 'com.google.android.material:material:1.6.0'
}
After adding this, click Sync Now to apply changes.
Step 3: Modify activity_main.xml
Now, modify your activity_main.xml file to include the BottomNavigationView component.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<!-- FrameLayout to Display Fragments -->
<FrameLayout
android:id="@+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<!-- Bottom Navigation View -->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_menu"/>
</LinearLayout>
👉 Explanation:
FrameLayoutwill be used to load different fragments when a menu item is clicked.BottomNavigationViewdisplays the navigation bar at the bottom.app:menu="@menu/bottom_nav_menu"links the navigation bar to a menu file.
Step 4: Create the Bottom Navigation Menu
Now, create a menu file bottom_nav_menu.xml inside the res/menu/ folder.
Steps to Create Menu File
- Go to res → menu.
- Right-click menu → New → Menu Resource File.
- Name it bottom_nav_menu.xml and add the following items:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_home"
android:icon="@android:drawable/ic_menu_home"
android:title="Home"/>
<item
android:id="@+id/nav_search"
android:icon="@android:drawable/ic_menu_search"
android:title="Search"/>
<item
android:id="@+id/nav_profile"
android:icon="@android:drawable/ic_menu_myplaces"
android:title="Profile"/>
</menu>
👉 Explanation:
- This menu contains three items: Home, Search, and Profile.
- Each item has a unique ID, an icon, and a title.
Step 5: Create Three Fragments
Since each menu item will load a different screen, we need to create three Fragments.
1. HomeFragment.java
package com.example.bottomnavigationexample;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class HomeFragment extends Fragment {
public HomeFragment() {}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_home, container, false);
}
}
2. SearchFragment.java
package com.example.bottomnavigationexample;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SearchFragment extends Fragment {
public SearchFragment() {}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_search, container, false);
}
}
3. ProfileFragment.java
package com.example.bottomnavigationexample;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ProfileFragment extends Fragment {
public ProfileFragment() {}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_profile, container, false);
}
}
Step 6: Implement Bottom Navigation in MainActivity.java
Now, modify MainActivity.java to handle navigation between fragments.
package com.example.bottomnavigationexample;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
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 bottomNavigationView = findViewById(R.id.bottom_navigation);
// Set default fragment
getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, new HomeFragment()).commit();
bottomNavigationView.setOnNavigationItemSelectedListener(item -> {
Fragment selectedFragment = null;
if (item.getItemId() == R.id.nav_home) {
selectedFragment = new HomeFragment();
} else if (item.getItemId() == R.id.nav_search) {
selectedFragment = new SearchFragment();
} else if (item.getItemId() == R.id.nav_profile) {
selectedFragment = new ProfileFragment();
}
// Load selected fragment
getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, selectedFragment).commit();
return true;
});
}
}
Final Step: Run the App
- Click Run ▶️ in Android Studio.
- The app will launch with a Bottom Navigation Bar.
- Click on Home, Search, and Profile to switch between fragments.
Conclusion
The Bottom Navigation Bar is a great way to provide users with a seamless navigation experience. It improves usability, saves space, and keeps navigation consistent across the app.
Key Takeaways
- Use
BottomNavigationViewfor smooth navigation. - Load different Fragments dynamically when users select menu items.
- Keep navigation simple to enhance the user experience.
🚀 Now, try customizing it with different icons and additional fragments!
