Bottom App Bar. How to start

Robert Levonyan
AndroidPub
Published in
2 min readAug 20, 2018

--

At the Google IO 2018 the company has introduced a new View component for Android: Bottom App Bar.

It is a simple toolbar with up to five actions and the ability to have Floating Action Button on it. The main advantages of the Bottom App Bar are flexibility (you can have different locations for the Floating Action Button) and ergonomic (it is more comfortable to reach the bottom area of the screen with one finger rather than the top area). The main restrictions are that you should not have both Bottom App Bar and Bottom Navigation Bar and you should have 2-5 actions.

Like the standard Action bar, the Bottom App Bar has the navigation icon (to navigate through the screens or to open a Navigation menu), also the action icons and the overflow menu icon. Also the Bottom App Bar can have a Floating Action Button as it was mentioned earlier.

So, let’s create a new project and build a Bottom App Bar.

Add the dependency to build.gradlefile:

implementation 'com.android.support:design:28.0.0'

or for AndroidX:

implementation 'com.google.android.material:material:1.0.0'

First of all, lets create the xml layout:

a layout xml with Bottom App Bar and Floating Action Bar

Let’s take a look into the arguments.

app:backgroundTint : the background color of view

app:buttonGravity : the gravity of navigation button has two values - top and bottom, or if you want to center it - top|bottom 😑

app:fabAlignmentMode : the position of the Floating Action Button (center or end)

app:fabCradleMargin : the space between the cradle in the App Bar and the Floating Action Button

app:fabCradleRoundedCornerRadius: the cradle radius

app:fabCradleVerticalOffset : the distance between the Floating Action Button and the Bottom App Bar

After creating the xml layout, let’s do some coding.

and voila.

Also read about the new Material Design and it’s Components:

Also you can follow or contact me:

Twitter: https://twitter.com/RobertLevonyan
Github: https://github.com/robertlevonyan
Email: me@robertlevonyan.com
Website: https://robertlevonyan.com

--

--