Android P : BottomAppBar and MaterialButton

Android P Developer Preview is available for public now. In this tutorial, we’ll be looking at two interesting components: BottomAppBar and MaterialButton that come up with the Support Library v28 and are a part of the updated Material Design.

If you haven’t updated your Android Studio and AVD Emulator to Android P please follow the below steps before proceeding further.

Updating Android Studio to SDK 28

Goto Tools | SDK Manager and download the Android P Developer preview(or the stable release whichever is the latest available for you!).

Install the latest build tools (28.0.0 or above) from the SDK-build tools tab in the SDK Manager.
Now to run Android P target code on your emulator goto Tools | AVD Manager and install the latest Android P system image to create the emulator.

Now create a new Android Studio project and set the target SDK version to Android:28(android-p).

Add the following libraries in your app’s build.gradle.

Copy
implementation 'com.android.support:appcompat-v7:28.0.0-alpha1'
implementation 'com.android.support:design:28.0.0-alpha1'
implementation 'com.android.support:support-v4:28.0.0-alpha1'

Your build.gradle should look like this:

Now we are ready to implement BottomAppBar and MaterialButton that come with Android Support v28.
Before we do that let’s see how are they defined.

Android BottomAppBar

BottomAppBar extends the Toolbar and is defined at the bottom of the screen. It comes with a semi-circular cutout that cradles the attached FloatingActionButton.

Something like this:

We can set the FloatingActionButton diameter and position in the BottomAppBar.

BottomAppbar is defined in the XML in the following way:

Copy
<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabAttached="true"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

• app:fabAttached="true" is used to attach the FloatingActionButton. In the FloatingActionButton, you must set the app:layout_anchor to the BottomAppBar id. Besides, you can set the following attributes:
• app:fabAlignmentMode : Set the position of the FloatingActionButton in the BottomAppBar. By default it goes in center.
• app:fabCradleDiameter : Sets the diameter of the cutout arc.
• app:fabCradleVerticalOffset : Sets the vertical distance of the FloatingActionButton from the arc cut off.
• app:menu is used to set menu resource file. You can do it programmatically also.

Position FAB in the middle of the BottomAppBar without showing the arc.

Copy
<android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottom_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:fabAttached="true"
        app:backgroundTint="@color/colorPrimary"
        app:fabCradleDiameter="8dp"
        app:fabCradleVerticalOffset="4dp"/>

Android MaterialButton

MaterialButton is the new Material Design theme on a Button. It extends AppCompatButton. It provides the Material Theme directly without the need to add a style/theme.

To define a MaterialButton we do:

Copy
<android.support.design.button.MaterialButton
            android:id="@+id/materialButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="18dp"
            android:layout_gravity="center"
            android:textColor="#fff"
            android:text="Material Button"
            app:backgroundTint="@color/colorPrimary"/>

By default the background color is the same as the colorAccent.

app:backgroundTint is used to set a new color.

app:icon is used to set an icon drawable besides the Button text.

• app:iconTint is used to set the tint color of the icon.
• app:iconPadding sets the padding.

app:rippleColor : is used to set the ripple color when the button is clicked.

• app:strokeColor : is used to set the border color on the Button.
• app:strokeWidth : is used to set the width of the border.



• app:cornerRadius is used to set the radius on the corners.

Now let’s build our application where we’ll use both BottomAppBar and MaterialButton together.

Android BottomAppBar MaterialButton Example Project Structure

Android BottomAppBar MaterialButton Code

The code for the activity_main.xml layout file is given below:

Copy
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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">

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottom_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:fabAttached="true"
        app:backgroundTint="@color/colorPrimary"
        app:fabCradleVerticalOffset="12dp"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@+id/bottom_appbar"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.button.MaterialButton
            android:id="@+id/materialButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="18dp"
            android:gravity="center_vertical"
            android:layout_gravity="center"
            app:icon="@android:drawable/ic_input_get"
            app:iconTint="@android:color/holo_red_dark"
            app:rippleColor="@color/colorAccent"
            app:strokeColor="@android:color/holo_green_dark"
            app:strokeWidth="3dp"
            android:textColor="#fff"
            android:text="Toggle FAB Position"
            app:backgroundTint="@color/colorPrimary"/>

    </FrameLayout>

</android.support.design.widget.CoordinatorLayout>

Now create a menu resource directory if you haven’t already. Right-click res | new | directory. Name it as menu. Create new menu file in the directory.

The code for the my_menu.xml file is given below:

Copy
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/next_btn"
        android:checked="true"
        android:icon="@android:drawable/ic_input_add"
        android:title="Item"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Settings" />

</menu>

The code for MainActivity.java class is given below:

Copy
package com.journaldev.android28;

import android.os.Bundle;
import android.support.design.bottomappbar.BottomAppBar;
import android.support.design.button.MaterialButton;
import android.support.v7.app.AppCompatActivity;
import android.view.View;


public class MainActivity extends AppCompatActivity {

    BottomAppBar bottomAppBar;
    MaterialButton materialButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomAppBar = findViewById(R.id.bottom_appbar);
        materialButton = findViewById(R.id.materialButton);

        bottomAppBar.replaceMenu(R.menu.my_menu);
        materialButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (bottomAppBar.getFabAlignmentMode() == BottomAppBar.FAB_ALIGNMENT_MODE_CENTER)
                    bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_END);
                else {
                    bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_CENTER);
                }
            }
        });
    }

}

bottomAppBar.replaceMenu() is used to set the menu items in the BottomAppBar.
On clicking the MaterialButton, we toggle the FAB position with respect to the BottomAppBar.

The output of the above application in action is given below.

This brings an end to this tutorial. You can download the Android BottomAppBar Material Button Project.

About Anupam Chugh

He loves learning new stuff in Android and iOS. Shoot him queries.