Material Components Android: BottomAppBar — Part I

3 min readOct 21, 2018

One of the new features introduced in the Google I/O 2018 was Material Theming, which customizes Material Design to better reflect our product’s brand. These changes improve elements as typography, surfaces and components. For this reason, Google is introducing a brand new library of components based on Material Design called Material Components.

One of the new components is the BottomAppBar based on AppBar and which provides the possibility of having our action bar in the bottom and adding a floating action button (FAB).

In order to use this component we need to import the MaterialComponents library to our Android project. We need to make sure that the build.gradle file contains these lines:

allprojects {
    repositories {
        google()
        jcenter()
    }
}

Moreover, we need to add the library dependency into the dependencies of our build.gradle.

dependencies {
    ...
    implementation 'com.google.android.material:material:1.0.0-rc02'
    ...
}

We need to make sure that the version of ‘compileSdkVersion’ is 28 and if we want to use the styles of MaterialComponents in our application, we need to modify the styles.xml.

<style name="AppTheme" parent="Theme.MaterialComponents.Light">

Implementation

To use this component in our app we should insert in the XML layout of our activity. It should be noted that the main component must be a CoordinatorLayout in order to anchor our FAB button to the BottomAppBar.

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:navigationIcon="@drawable/ic_baseline_menu_24px">
</com.google.android.material.bottomappbar.BottomAppBar>

We add a FAB button, specifying its definition in the XML. In addition, we anchor the FAB to our BottomAppBar by passing its id to the value of the layout_anchor attribute.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_baseline_add_24px"
    app:fabSize="normal"
    app:layout_anchor="@id/bottomAppBar">
</com.google.android.material.floatingactionbutton.FloatingActionButton>

If we want to customize the button position and the shape of our BottomAppBar there are the following attributes.