The bottom Navigation Bar is a material component that allows you to quickly explore and transition between top-level views with just a single click or tap. So, in this Android tutorial, we’ll learn how to make a bottom navigation bar in fragments using binding.
Instagram, Facebook, and other popular applications use the bottom navigation bar. Let’s look at how to create a functional Bottom Navigation Bar in an Android app in this tutorial. Here’s a look at a sample Bottom Navigation Bar:
What is the importance of bottom navigation bar?
In his study of mobile device usage, Steven Hoober discovered that 49 percent of people rely on a single thumb to get things done on their phones. The diagrams that appear on the screens of mobile phones, as shown in the figure below, are approximate reach charts, in which the colors indicate what areas a user can reach with the thumb to interact with the screen. Green denotes an area that a user can easily reach, yellow denotes an area that requires a stretch, and red denotes an area that requires users to change the way they hold a device.
Learn Java Programming & get Certificate
- Top-level and frequently-used actions should be placed near the bottom of the screen since they are easier to reach with one-handed or one-thumb interactions.
This is something to avoid in the bottom navigation bar.
The tap targets will be too close together if you have more than five destinations in your bottom navigation. When a bottom nav bar has too many tabs, it can be physically challenging for users to tap the one they desire. And the complexity of your program grows with each extra tab you add.
Steps for Bottom Navigation Bar
Step 1: Open Android Studio and create a new project.
Step 2: Include the dependency in the file build.gradle(app).
//
implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.3.1'//livedata dependency
implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1' // lifecycle dependency
implementation 'androidx.navigation:navigation-fragment-ktx:2.3.5' // navigation dependency
implementation 'androidx.navigation:navigation-ui-ktx:2.3.5' // navigation dependency
Step 3: enable the view binding in your project.
–> Add this code to your build.gradle(app) file in the android section.
buildFeatures {
viewBinding true
}
Step 4: In activity_main.xml –>open the res/layout/activlty_main.xml file and Add BottomNavigationView widget. You must include one fragment in this layout file. It will act as a storage container for the many fragments.
<?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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu" />
<fragment
android:id="@+id/nav_host_fragment_activity_main"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="@id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 5: Adds items to the bottom navigation bar’s menu –> To make a Menu, go to the app’s res(right-click) -> New -> Android Resource Directory and pick Menu as the Resource Type->ok.
Click on the app -> res -> menu(right-click) -> New -> Menu Resource File and name it bottom_nav_menu.
<?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_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="@string/title_dashboard" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications" />
</menu>
We’re using Menu in this menu file to act as a container for menu items. Each has a title, an icon, and an id.
Step 6: Creating Fragments–> Now that we have our Bottom Navigation Bar, we’d like it to be functional by redirecting us to a different fragment/activity when we click an item. Create a fragment for each item in this example and navigate to it whenever the corresponding item is clicked. We’ll make three Fragments because we made three items in the Bottom Navigation Bar. To make a Fragment, open the app (right-click) and select New -> Fragment -> Fragment (Blank). DashBoard fragment is the name of the fragment, and fragment_dashboard is the name of the corresponding XML file. To keep things simple, each of the three fragments will only contain a TextView.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.dashboard.DashboardFragment">
<TextView
android:id="@+id/text_dashboard"
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"
android:gravity="center_horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Step 7: To display the fragment dashboard.xml, the code of DashBoardFragment.kt and DashBoardViewModel are listed below.
package com.sagar.bottomnavogationbar.ui.dashboard
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.lifecycle.Observer
import androidx.lifecycle.ViewModelProvider
import com.sagar.bottomnavogationbar.R
import com.sagar.bottomnavogationbar.databinding.FragmentDashboardBinding
class DashboardFragment : Fragment() {
private lateinit var dashboardViewModel: DashboardViewModel
private var _binding: FragmentDashboardBinding? = null
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
dashboardViewModel =
ViewModelProvider(this).get(DashboardViewModel::class.java)
_binding = FragmentDashboardBinding.inflate(inflater, container, false)
val root: View = binding.root
val textView: TextView = binding.textDashboard
dashboardViewModel.text.observe(viewLifecycleOwner, Observer {
textView.text = it
})
return root
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
}
package com.sagar.bottomnavogationbar.ui.dashboard
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
class DashboardViewModel : ViewModel() {
private val _text = MutableLiveData<String>().apply {
value = "This is dashboard Fragment Section"
}
val text: LiveData<String> = _text
}
Step 8: Create two more fragments for the remaining 2 items in the same way. The files fragment_home.xml, HomeFragment.kt, HomeViewModel, fragment_notification.xml, and NotificationsFragment.kt,NotificationsViewModel are listed below, in that order.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.home.HomeFragment">
<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_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:gravity="center_horizontal" />
</androidx.constraintlayout.widget.ConstraintLayout>
package com.sagar.bottomnavogationbar.ui.home
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.lifecycle.Observer
import androidx.lifecycle.ViewModelProvider
import com.sagar.bottomnavogationbar.R
import com.sagar.bottomnavogationbar.databinding.FragmentHomeBinding
class HomeFragment : Fragment() {
private lateinit var homeViewModel: HomeViewModel
private var _binding: FragmentHomeBinding? = null
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
homeViewModel =
ViewModelProvider(this).get(HomeViewModel::class.java)
_binding = FragmentHomeBinding.inflate(inflater, container, false)
val root: View = binding.root
val textView: TextView = binding.textHome
homeViewModel.text.observe(viewLifecycleOwner, Observer {
textView.text = it
})
return root
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
}
package com.sagar.bottomnavogationbar.ui.home
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
class HomeViewModel : ViewModel() {
private val _text = MutableLiveData<String>().apply {
value = "This is home Fragment Section"
}
val text: LiveData<String> = _text
}
–> fragment_notifications.xml , NotificationsFragment and Notificationsviewmodel are listed below.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.notifications.NotificationsFragment">
<TextView
android:id="@+id/text_notifications"
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_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:gravity="center_horizontal" />
</androidx.constraintlayout.widget.ConstraintLayout>
package com.sagar.bottomnavogationbar.ui.notifications
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.lifecycle.Observer
import androidx.lifecycle.ViewModelProvider
import com.sagar.bottomnavogationbar.R
import com.sagar.bottomnavogationbar.databinding.FragmentNotificationsBinding
class NotificationsFragment : Fragment() {
private lateinit var notificationsViewModel: NotificationsViewModel
private var _binding: FragmentNotificationsBinding? = null
private val binding get() = _binding!!
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
notificationsViewModel =
ViewModelProvider(this).get(NotificationsViewModel::class.java)
_binding = FragmentNotificationsBinding.inflate(inflater, container, false)
val root: View = binding.root
val textView: TextView = binding.textNotifications
notificationsViewModel.text.observe(viewLifecycleOwner, Observer {
textView.text = it
})
return root
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
}
package com.sagar.bottomnavogationbar.ui.notifications
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
class NotificationsViewModel : ViewModel() {
private val _text = MutableLiveData<String>().apply {
value = "This is notifications Fragment Section"
}
val text: LiveData<String> = _text
}
Step 9: Connect fragments for navigation –> To make a Navigation, go to the app’s res(right-click) -> New -> Android Resource Directory and pick Navigation as the Resource Type->ok.
Click on the app -> res -> Navigation (right-click) -> New -> Navigation Resource File and name it mobile_navigation.
<?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.sagar.bottomnavogationbar.ui.home.HomeFragment"
android:label="@string/title_home"
tools:layout="@layout/fragment_home" />
<fragment
android:id="@+id/navigation_dashboard"
android:name="com.sagar.bottomnavogationbar.ui.dashboard.DashboardFragment"
android:label="@string/title_dashboard"
tools:layout="@layout/fragment_dashboard" />
<fragment
android:id="@+id/navigation_notifications"
android:name="com.sagar.bottomnavogationbar.ui.notifications.NotificationsFragment"
android:label="@string/title_notifications"
tools:layout="@layout/fragment_notifications" />
</navigation>
Step 10: In MainActivity.kt file –> Now that we have everything we need, all that remains is to code the MainActivity.kt to connect everything to the application. Add a binding and navController in MainActivity.kt file.
package com.sagar.bottomnavogationbar
import android.os.Bundle
import android.view.Window
import android.view.WindowManager
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.appcompat.app.AppCompatActivity
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.setupActionBarWithNavController
import androidx.navigation.ui.setupWithNavController
import com.sagar.bottomnavogationbar.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
//binding
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
val navView: BottomNavigationView = binding.navView
val navController = findNavController(R.id.nav_host_fragment_activity_main)
val appBarConfiguration = AppBarConfiguration(
setOf(
R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications
)
)
setupActionBarWithNavController(navController, appBarConfiguration)
navView.setupWithNavController(navController)
}
}
- We hope that this guide will assist you in quickly creating Bottom Navigation Bar in Android. If you have any problems, please post them in the comments section and we will gladly assist you.
Android cardView | Android Recyclerview using cardView
Search View in Android Example | Android development
Pingback: Image Gallery App with Example Android - Developers Dome