Android P : BottomAppBar and MaterialButton With Examples

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.

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-build-gradle

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

BottomAppbar is defined in the XML in the following way:

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

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

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:

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:

The code for MainActivity.java class is given below:

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.

By admin

Leave a Reply

%d bloggers like this: