Implementation of BottomAppBar. Part 1: Material components for Android
BottomAppBar - this is one of the new Android Material components that were presented on Google I /O 2018 . This is essentially an extension of the component. Toolbar . The new BottomAppBar is located at the bottom of the application window, unlike the toolbar that is at its top. With this paradigm, the Material Design team expects a new user experience (UX). BottomAppBar is much more accessible to the user in comparison with the usual toolbar. Moving the control panel and menu to the bottom of the application, BottomAppBar offers a completely new design for Android applications.
has also changed. Floating Action Button (FAB) (rus
floating action button
). Now FAB can be placed either "crashing" into BottomAppBar, or overlapping it.
This article will demonstrate the implementation of the basics of BottomAppBar together with the new FAB placement options.
First, a small initial setting is required.
A detailed explanation of how to enable the Material components for your Android project, you can find on see this page . In addition, in this tutorial you need to use Android Studio 3.2 or higher .
The following are the necessary configuration steps.
1.Add the Google Maven repository in the
file. build.gradle .
2. Add a dependency for the material components in the
file. build.gradle . Keep in mind that the version is updated regularly.
implementation 'com.google.android.material: material: ???-alpha1'
3. Set it as
targetSdkVersion version of the API minimum for Android P (ie 28 and above).
4.Make sure that your application inherits the theme Theme.MaterialComponents BottomAppBar uses the latest style. Alternatively, you can specify the style for BottomAppBar when declaring a widget in the XML layout file as follows:
style = "@ style /Widget.MaterialComponents.BottomAppBar"
You can add BottomAppBar to your layout as follows. Also BottomAppBar must be a child of CoordinatorLayout .
You can bind the FAB to BottomAppBar, specifying
id of the BottomAppBar element in the attribute
app: layout_anchor element FAB. BottomAppBar can envelop FAB or FAB can overlap BottomAppBar.
The table below shows the BottomAppBar attributes.
This attribute sets the background color of BottomAppBar.
The attribute specifies the position of the FAB (either in the center or at the end of the BottomAppBar). The following shows the alignment of the FAB at the end of BottomAppBar.
The attribute is intended for binding FAB to BottomAppBar and can be true or false . Though on guidance on material design It is not recommended to place FAB outside of BottomAppBar, the possibility of such a setting is available. The following is the situation where for the attribute
fabAttached the value is set. false .
Determines the diameter of the "cradle" containing the FAB.
Specifies the radius of the angle at the meeting point of the "cradle" and the horizontal part of the BottomAppBar.
Indicates the displacement of the "cradle" from below.
Here is the entire XML layout file that was used for the examples above.
<?xml version="1.0" encoding="utf-8"?>
We figured out the basics of the new Android Material component - BottomAppBar, as well as the new FAB features. The BottomAppBar widget itself is not difficult to use because it extends the normal Toolbar, but it fundamentally changes the approach to designing the application interface.
The second and third parts of this series about BottomAppBar will be devoted to working with menus and navigation and implementing various behaviors of BottomAppBar in accordance with the principles of Material Design.
It may be interesting
houston embroidery service
Houston Embroidery Service