Android P : BottomAppBar and MaterialButton

Filed Under: Android

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!).

android p sdk install

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.

android p avd manager

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.


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:
android p build gradle

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:
android p bottomappbar ui

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

BottomAppbar is defined in the XML in the following way:


<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.
You have to set a menu on the BottomAppBar using bottomAppbar.replaceMenu(). Otherwise, the BottomAppbar won’t be displayed.

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


<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 bottomappbar fab

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.

android p material button ui

To define a MaterialButton we do:


<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.

android p material button icon

  • 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.
  • android materialbutton stroke icon tint

  • 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 p project structure

Android BottomAppBar MaterialButton Code

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


<?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:


<?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:


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.

android p bottomappbar materialbutton app output

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

You can also checkout Android Studio project from our GitHub Repository.

Comments

  1. shaim says:

    this project in not work navigation view

  2. Mike Wolfson says:

    This is a great example. It is clear, and demonstrates a few key concepts very well (and doesn’t include anything not important to this use-case).

    Kudos for the well-written example.

  3. Roar Grønmo says:

    Android 8.+ (P) API Level 28 Revision 4 just released, including Android SDK Build-Tools 28

    Anyhow,.. android support libraries are still in 27.1.1, so we “cannot” post any on 28.0.0-alpha1 in Google Play yet.

    AS 3.2 Canary 16 screams about violation on support libaries 27.1.1 vs CompileSDKVersion 28… so we’re hoping for a soon release on support libraries 28.+. Then this will be awesome…

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages