Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

Bottom Navigation Bar in Android

A Bottom Navigation Bar is a primary navigation component typically seen at the bottom of an app, allowing users to switch between top-level views with a single tap. In Android, you can implement the Bottom Navigation Bar using the BottomNavigationView widget, which is a part of the AndroidX library.

How to Implement a Bottom Navigation Bar:

  • Add the Dependency:

Make sure you have the Material Design dependency in your app's build.gradle:

implementation 'com.google.android.material:material:latest_version'
  • Create Menu Resources:

You should define the items of your Bottom Navigation Bar in a menu resource file (e.g., res/menu/bottom_navigation_menu.xml):

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="@string/title_notifications" />
</menu>
  • Add BottomNavigationView to Layout:

In your layout XML, you can add the BottomNavigationView:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/bottom_navigation_menu" />
  • Handling Navigation Item Selection:

In your activity or fragment, set up an OnNavigationItemSelectedListener:

val navView: BottomNavigationView = findViewById(R.id.nav_view)

navView.setOnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.navigation_home -> {
            // Handle home navigation
            true
        }
        R.id.navigation_dashboard -> {
            // Handle dashboard navigation
            true
        }
        R.id.navigation_notifications -> {
            // Handle notifications navigation
            true
        }
        else -> false
    }
}
  • Integrate with NavController (Optional):

If you're using the Navigation Component library, you can integrate BottomNavigationView with a NavController:

First, set up your navigation graph and associate it with a NavHostFragment.

Then, in your main activity:

val navView: BottomNavigationView = findViewById(R.id.nav_view)
val navController = findNavController(R.id.nav_host_fragment)
navView.setupWithNavController(navController)

The setupWithNavController is an extension function provided by the Navigation UI library, making it easier to integrate navigation components.

  • Customization:

BottomNavigationView comes with various attributes for customization, such as app:itemTextColor, app:itemIconTint, app:labelVisibilityMode, etc.

Remember that according to Material Design guidelines, a Bottom Navigation Bar should contain between three and five items for optimal usability. Too many items can lead to confusion, and too few items can underutilize the bar.

  1. Bottom Navigation Bar example in Kotlin:

    • Description: An example demonstrating the implementation of Bottom Navigation Bar in Kotlin. This includes adding menu items, setting up the navigation listener, and handling item selection.
    • Code (Kotlin):
      val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_navigation)
bottomNavigationView.setOnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.menu_home -> {
            // Handle home item click
            true
        }
        R.id.menu_search -> {
            // Handle search item click
            true
        }
        R.id.menu_profile -> {
            // Handle profile item click
            true
        }
        else -> false
    }
}

  2. Customizing Bottom Navigation Bar in Android:

    • Description: Customize the appearance of the Bottom Navigation Bar by modifying attributes such as background color, item icon size, and text appearance. This allows developers to match the Bottom Navigation Bar with the app's design.
    • Code (XML):
      <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemIconSize="24dp"
    app:itemTextAppearanceActive="@style/BottomNavItemActive"
    app:itemBackground="@color/bottom_nav_background"
    app:menu="@menu/bottom_nav_menu"/>

  3. Handling item selection in Bottom Navigation Bar:

    • Description: Implement the OnNavigationItemSelectedListener to handle item selection events in the Bottom Navigation Bar. This allows developers to perform specific actions when a tab is selected.
    • Code (Kotlin):
      bottomNavigationView.setOnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.menu_home -> {
            // Handle home item click
            true
        }
        // Handle other items
        else -> false
    }
}

  4. Adding icons to Bottom Navigation Bar in Android:

    • Description: Enhance the Bottom Navigation Bar by adding icons to each tab. This provides a visual representation of each section, making it easier for users to identify and navigate to different parts of the app.
    • Code (XML):
      <menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_home"
        android:icon="@drawable/ic_home"
        android:title="Home"/>
    <!-- Add other menu items with icons -->
</menu>

  5. Changing colors and styles in Bottom Navigation View:

    • Description: Customize the colors and styles of the Bottom Navigation View to match the app's theme. This includes changing the background color, icon tint, and text appearance.
    • Code (XML):
      <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemIconTint="@color/bottom_nav_icon_color"
    app:itemTextColor="@color/bottom_nav_text_color"
    app:backgroundTint="@color/bottom_nav_background"
    app:menu="@menu/bottom_nav_menu"/>
Copyright © devanddep.com | All Rights Reserved