blog bg

January 21, 2025

How to Implement Material Design Bottom Navigation Bar in Android?

Share what you learn in this blog to prepare for your interview, create your forever-free profile now, and explore how to monetize your valuable knowledge.

 

Ever wondered how certain applications make feature navigation easy and attractive? Material Design Bottom Navigation Bars are typically the key. This blogpost will show you how to create a stylish and effective navigation bar for your Android app.

 

Prerequisites

Get these before starting: 

  • Set up Android Studio. 
  • Basic Kotlin/Java knowledge. 
  • An Android emulator or device for testing. 

Please ensure your app's minSdkVersion supports Material Design (typically 21 or above).

 

Step-by-Step Implementation

 

Create a New Android Project

Create a new Android Studio project: 

  • Select Empty Activity during setup. 
  • Select Kotlin/Java as the language and name your project. 
  • Min SDK should be 21 or above. 

Adding a bottom navigation bar is now possible.

 

Add Dependencies

Include this dependency in your app-level build.gradle file to utilize Material Design components: 

implementation 'com.google.android.material:material:1.9.0' 

Download the libraries by syncing your project after adding the dependency.

 

Design the Bottom Navigation Layout

Now, arrange the bottom navigation bar. Add BottomNavigationView to activity_main.xml:

<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"  
    app:menu="@menu/navigation_menu" />  

 

Next, define the menu items in res/menu/navigation_menu.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">  
    <item  
        android:id="@+id/home"  
        android:title="Home"  
        android:icon="@drawable/ic_home" />  
    <item  
        android:id="@+id/search"  
        android:title="Search"  
        android:icon="@drawable/ic_search" />  
    <item  
        android:id="@+id/profile"  
        android:title="Profile"  
        android:icon="@drawable/ic_profile" />  
</menu>  

 

Set Up Navigation Logic

Now, add navigation logic to MainActivity:

val bottomNavigation = findViewById<BottomNavigationView>(R.id.bottom_navigation)  
bottomNavigation.setOnNavigationItemSelectedListener { item ->  
    when (item.itemId) {  
        R.id.home -> loadFragment(HomeFragment())  
        R.id.search -> loadFragment(SearchFragment())  
        R.id.profile -> loadFragment(ProfileFragment())  
    }  
    true  
}  

private fun loadFragment(fragment: Fragment) {  
    supportFragmentManager.beginTransaction().replace(R.id.fragment_container, fragment).commit()
}

 

This smooths out navigation item selection fragment swapping.

 

Conclusion

So, you've successfully integrated Material Design Bottom Navigation Bar. This small tweaking can greatly enhance your app's navigation and user excitement.

Ready to level up? Use unique animations, icons, or dynamic theming to make your navigation bar stand out. You can also use Material Design to improve the navigation bar's color, shape, and look.

43 views

Please Login to create a Question