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
.
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.
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 theapp: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.
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 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:
<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: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.
app:rippleColor
: is used to set the ripple color when the button is clicked.
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:
<?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:
<?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:
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.
this project in not work navigation view
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.
Thank you!
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…