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.
|
1 2 3 4 5 |
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:
|
1 2 3 4 5 6 7 8 9 10 |
<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 theapp:layout_anchorto 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:menuis 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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"/> <img class="alignnone wp-image-33617 size-full" src="https://all-learning.com/wp-content/uploads/2018/05/android-p-build-gradle3.png" alt="android-p-build-gradle" width="1200" height="628" /> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
<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.
Now let’s build our application where we’ll use both BottomAppBar and MaterialButton together.
The code for the activity_main.xml layout file is given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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.