Implementing BottomAppBar I: Material Components for Android
One of the new Android Material Components that are introduced in Google I/O 2018 is BottomAppBar which is an extension of Toolbar. The new BottomAppBar is placed at the bottom of app window in contrary to Toolbar which is located at the upper side of app window. With this paradigm shift Material Design team expects a new user experience. User can access BottomAppBar more easily compared to the ordinary toolbar. Bringing navigation drawer control and action menu to the bottom of an app, BottomAppBar suggests a fresh new design to Android apps.
Together with BottomAppBar, Floating Action Button(FAB) placement has also been changing. With the new design, FABs can be placed as either being cradled/docked into some notch of the bar or overlapping the bar.
This article will show the implementation of the basics of BottomAppBar together with the new FAB placement options.
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.
- 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" />
BottomAppBar Attributes
Table below shows 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.
fabAttached attribute is for setting FAB - BottomAppBar attachment and can be set true or false. Although material design guidelines does not suggest FAB placement outside of bottom app bar, this option is still provided. Screenshot below shows the situation when 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.
Part II and Part III of this BottomAppBar series is on handling navigation drawer control & action menu and the implementation of BottomAppBar behaviors conforming to Material Design guidelines.
Implementing BottomAppBar III: Behavior for Android
How to implement BottomAppBar behaviors
medium.com
Feel free to ask questions and make comments. Also you can follow me on Twitter.
