Implementing BottomAppBar – Material Components

Google I/O ‘18 came up with much exciting new stuff, one of them was the updated Material Design Components. The new BottomAppBar is placed at the bottom of the app window in contrary to Toolbar which is located at the upper side of the app window. It puts more focus on features, increases engagement, and visually anchors the UI.

Lets learn how to implement BottomAppBar.

Setting Up

In order to use BottomAppBar, an initial setup is required.

For a detailed explanation on how to include Material Components for your Android project, you can visit this page. For this tutorial make sure that you are using Android Studio 3.2 or above (currently available as 3.2 Canary 15).

Following are the necessary setup steps.

  1. Include Google Maven repository in build.gradle.
allprojects {
repositories {
jcenter()
maven {
url "https://maven.google.com"
}
}
}

2. Place material components dependency in your build.gradle. Keep in mind that material version is regularly updating.

implementation 'com.google.android.material:material:1.0.0-alpha1'

3. Set compileSdkVersion, and targetSdkVersion to the latest API version targetting Android P which is 28.

4. Make sure your app inherits Theme.MaterialComponents theme in order to make BottomAppBar use the latest style. Alternatively you can declare the style for BottomAppBar in widget declaration within layout xml file as follows.

style=”@style/Widget.MaterialComponents.BottomAppBar”

Implementation

You can include BottomAppBar in your layout as follows. BottomAppBar must be a child of CoordinatorLayout.

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottom_app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:fabAlignmentMode="center"
    app:fabAttached="true"
    app:navigationIcon="@drawable/baseline_menu_white_24"/>

You can anchor a Floating Action Button (FAB) to BottomAppBar by specifying the id of the BottomAppBar in app:layout_anchor attribute of the FAB. BottomAppBar can cradle FAB with a shaped background or FAB can overlap BottomAppBar.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/baseline_add_white_24"
    app:layout_anchor="@id/bottom_app_bar" />
Image result for BottomAppBar with a cradled FAB

BottomAppBar Attributes

Table below shows BottomAppBar attributes.

Image result for BottomAppBar attributes.

backgroundTint is the attribute for setting BottomAppBar background color.

fabAlignmentMode attribute determines the position of the FAB either being at the center or at the end of BottomAppBar. Below screenshot shows FAB alignment when fabAlignmentMode is set to end.

Image result for fabAlignmentMode: end

fabAttached attribute is for setting FAB – BottomAppBar attachment and can be set true or false. Although material design guidelines do not suggest FAB placement outside of the bottom app bar, this option is still provided. The screenshot below shows the situation when the fabAttached attribute is set to false.

fabCradleDiameter specifies the diameter of the cradle containing the FAB.

fabCradleRoundedCornerRadius specifies the radius of the corner curve at the meeting point of cradle and horizontal part of the BottomAppBar.

fabCradleVerticalOffset specifies the offset of the cradle from the bottom.

Here is the whole layout xml file used for the examples above.

<?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=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

We have discussed the basics of the new Android Material Component – BottomAppBar as well as the new FAB features. The BottomAppBar widget itself is not complicated to use as it extends the traditional Toolbar but it comes with a dramatic app design change price.

Leave a Reply