Open In App

Material Design Component Bottom App Bar in Android

Improve
Improve
Like Article
Like
Save
Share
Report

Material Design Components (MDC Android) offers designers and developers a way to implement Material Design in their Android applications. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android applications. Material design in Android is one of the key features that attracts and engages the customer towards the application. This is a special type of design, which is guided by Google. So in this article, it has been demonstrated how to use the Bottom App bar in android. Have a look at the following image to get an overview of the discussion.

Material Design Component Bottom App Bar in Android

Create an empty activity project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Add Required Dependency

Include google material design components dependency in the build.gradle file. After adding the dependencies don’t forget to click on the “Sync Now” button present at the top right corner. Note that the Navigation Rail is introduced in the latest release of the material design components version that is 1.4.0 and above.

implementation ‘com.google.android.material:material:1.4.0’

Note that while syncing your project you need to be connected to the network and make sure that you are adding the dependency to the app-level Gradle file as shown below.

Why Bottom App Bar?

The bottom app bar provides easy access to the navigation drawer and up to four primary actions of the current activity including the Floating Action Button. By including this component in the application provides a huge response to the User Experience because, the user shouldn’t have to stretch their fingers to touch the primary actions on the top of the screen whereas by including this, the user can easily click on primary actions and access the navigation drawer.

When to use Bottom App Bar?

  • This should be used only for mobile devices.
  • Users seeking easier access to navigation drawer that can be placed at the bottom.
  • An activity with two to five primary actions.

When not to use Bottom App Bar?

  • Application which is having a bottom navigation bar.
  • An activity with one or two actions.

Anatomy of the Bottom App Bar

Anatomy of the Bottom App Bar

In the above anatomy taking the example of an e-commerce application, one can see the primary action here is search and also the cart icon may be the primary action for the current screen so the cart can also be included beside the search icon.

Steps to implement Bottom App Bar in an Application

Step 1: Creating menu items for Bottom App Bar

Creating a separate menu for Bottom App Bar so that we can make what items should appear on the bar and what items should appear under the Overflow menu control. To implement the sample menu invoke the following in the bottom_app_bar_menu.xml file under the menus folder.

XML




<?xml version="1.0" encoding="utf-8"?>
  
    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom" />
  
    <item
        android:id="@+id/option_1"
        android:title="Option 1"
        app:showAsAction="never" />
  
    <item
        android:id="@+id/option_2"
        android:title="Option 2"
        app:showAsAction="never" />
  
</menu>


Step 2: Working with activity_main.xml file

The main layout of this sample contains one floating action button which is anchored to Bottom App Bar, which in turn both the views should be under the CoordinatorLayout otherwise error will occur. And the size of the Floating Action Button should be auto. To implement the same invoke the following code inside the activity_main.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/black"
        android:src="@drawable/ic_add"
        android:tintMode="@color/white"
        app:fabSize="auto"
        app:layout_anchor="@id/bottom_app_bar" />
  
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabCradleMargin="0dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_app_bar_menu"
        app:navigationIcon="@drawable/ic_menu" />
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>


Output UI:

The above diagram is an example of the Bottom App Bar with the Floating Action Button. However, the Floating action button is optional. To implement the Bottom App Bar without floating action button without the Floating Action Button invoke the following code in the activity_main.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabCradleMargin="0dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_app_bar_menu"
        app:navigationIcon="@drawable/ic_menu" />
  
</androidx.coordinatorlayout.widget.CoordinatorLayout>


Output UI:

Step 3: Working with MainActivity.kt file

In the MainActivity.kt file there is a need to handle the buttons and the hamburger icon to perform the appropriate actions. Upon clicking the hamburger icon Navigation Drawer needs to be shown. To know how to implement Navigation Drawer refer to Navigation Drawer in Android, upon clicking the search icon the search screen should appear, etc. To implement the same invoke the following code inside the MainActivity.kt file.

Kotlin




import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.google.android.material.bottomappbar.BottomAppBar
import com.google.android.material.floatingactionbutton.FloatingActionButton
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        val fab: FloatingActionButton = findViewById(R.id.fab)
        fab.setOnClickListener {
            Toast.makeText(this, "FAB Clicked", Toast.LENGTH_SHORT).show()
        }
  
        val bottomAppBar: BottomAppBar = findViewById(R.id.bottom_app_bar)
        bottomAppBar.setOnMenuItemClickListener {
            when (it.itemId) {
                R.id.search -> {
                    Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.option_1 -> {
                    Toast.makeText(this, "Option 1 Clicked", Toast.LENGTH_SHORT).show()
                    true
                }
                R.id.option_2 -> {
                    Toast.makeText(this, "Option 2 Clicked", Toast.LENGTH_SHORT).show()
                    true
                }
                else -> false
            }
        }
    }
}


Output:



Last Updated : 04 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads