[img]https://drive.google.com/uc?id=1A5NqD41YVdm24UtSUV-ia8TNkp6l63PE[/img]
 
BottomAppBar - this is one of the new Android Material components that were presented on Google I /O 2018 . By moving the Navigation Drawer and the application menu to the bottom of the screen, BottomAppBar radically changes the look and feel of Android applications.
 
In first and second parts of our series of articles about BottomAppBar we got acquainted with BottomAppBar and discussed its attributes. We also explained how to implement the Navigation Drawer and application menus within BottomAppBar.
for the BottomAppBar .
 
Layout
 
The first one describes the BottomAppBar layout. Here is that is proposed :
 
For different in the meaning screens of the application, you can change the layout and set of menu items in BottomAppBar. For example, you can display more or fewer menu items depending on what is best for a particular screen.
[img]https://drive.google.com/uc?id=1qOT38Cm7aYBoSdbIQPylhwJfIJhdkuIe[/img]
 
Based on this guide, at
the main screens
it is recommended to use the BottomAppBar layout, which shows several items in the menu and the centered FAB (Floating Action Button). At
secondary screens
, the transition to which is carried out from the main, the BottomAppBar layout should consist of a right-aligned FAB and several additional items in the menu. Transitions between these two screens should be performed properly. Gif above shows this guide.
 
Now let's see how this behavior can be realized. We have two xml-files in the folder res /menu for each screen menu:
 

    <?xml version="1.0" encoding="utf-8"?>

    <?xml version="1.0" encoding="utf-8"?>

When there is a transition between screens, for example, by pressing the button TOGGLE SCREEN in our case, the BottomAppBar layout, including the menu and the FAB, should change. Here is the base code for this behavior of the BottomAppBar layout:

    //Hide navigation drawer icon
bottom_app_bar.navigationIcon = null
//Move FAB from the center of BottomAppBar to the end of it
bottom_app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END
//Replace the action menu
bottom_app_bar.replaceMenu (bottomappbar_menu_secondary)
//Change FAB icon
fab? .setImageDrawable (baseline_reply_white_24)    

If you want to make animated transitions, you need an additional code. You can learn the source code attached at the end of this article, in which you will find the animation.

Scrolling

Scrolling is an important behavior trigger for components such as BottomAppBar. On the Material Design guideline page, the following behavior is recommended for this case:

When scrolling BottomAppBar may appear or disappear:
 
- Scrolling down hides BottomAppBar. If it was FAB, it disconnects from the panel and stays on the screen.
 
- Scrolling up shows BottomAppBar and rejoins it to FAB if it was there.

Below is a demonstration of the behavior of BottomAppBar when scrolling.

[img]https://drive.google.com/uc?id=1CKxIFgoMuXIZePHZ-kRPBsjgbK05hvp7[/img]

To use this behavior, BottomAppBar and FAB must be direct children of CoordinatorLayout . Then we include hideonscroll and set the scrolling flags for BottomAppBar:

This is enough to implement such behavior BottomAppBar.

Elevation

Each component in the world of Material Design has an elevation similar to our physical world. At BottomAppBar the elevation is 8dp , and the content of the screen itself rises to 0dp . FAB in the static state rises to 12dp . The two components that we will recall in this article, Navigation Drawer and Snackbar, rise to 16dp and 6dp respectively.

Typically, Snackbar is a component for notifying the user, popping up from the bottom of the screen. But if the screen has BottomAppBar or Navigation Drawer, Snackbar behavior should change. In these cases, Snackbar should show over lower components. Here is a demonstration and the corresponding code for implementation:

[img]https://drive.google.com/uc?id=1duPRNVKW1eaCYp5QZqbqH8-v5MEakfLV[/img]

    private fun displayMaterialSnackBar () {
val marginSide = 0
val marginBottom = 550
val snackbar = Snackbar.make ( 

? coordinatorLayout?
"FAB Clicked",
Snackbar.LENGTH_LONG
) .setAction ("UNDO") {}
//Changing message text color
snackbar.setActionTextColor (ContextCompat.getColor (this, R.color.colorSnackbarButton))
val snackbarView = snackbar.view
val params = snackbarView.layoutParams as CoordinatorLayout.LayoutParams
params.setMargins (

? params.leftMargin + marginSide,

? params.topMargin,
params.rightMargin + marginSide,
params.bottomMargin + marginBottom
)
snackbarView.layoutParams = params
snackbar.show ()
}

As we already mentioned, the Navigation Drawer rises to 16dp , which means - according to the guide -

Menus dropping out of BottomAppBar (for example, Navigation Drawer) open as modal windows a level higher than BottomAppBar itself.

Below is the implementation of our Navigation Drawer:

[img]https://drive.google.com/uc?id=1DDDGP-FT0Ylb269JZpS0xKX2L51uWPi1[/img]

The Navigation Drawer is modal window and therefore follows the above implementation rule.

Details of the implementation of this behavior are as follows. In the folder res /menu an xml menu file must be created for Navigation View , which will be used in Navigation Drawer:

    <?xml version="1.0" encoding="utf-8"?>