Implementing Google’s newly launched Bottom AppBar
Google I/O ‘18 came up with many exciting new stuff, one of them was the updated Material Design Components. The revamped components are stunning and BottomAppBar is a new addition to the legacy. In this article I will explain how to take advantage of newly announced android support library version 28, within the current alpha version there is a collection of exciting new components that we now have access to.
Bottom App Bar
Based on the changing needs and behaviours of users, the Bottom App Bar is an evolution from standard Material guidance. It puts more focus on features, increases engagement, and visually anchors the UI.
The Floating Action Button can be anchored to the Bottom App Bar by setting app:layout_anchor or
by calling CoordinatorLayout.LayoutParams#setAnchorId(int).
Bottom App Bar Attributes
Background Tint — app:backgroundtint
FAB Alignment Mode — app:fabAlignmentMode
FAB Attached — app:fabAttached
FAB Cradle Margin — app:fabCradleMargin
FAB Cradle Corner Radius — app:fabCradleRoundedCornerRadiusFAB Vertical Offset — app:fabCradleVerticalOffset
Fab Alignment Mode
The placement of the FAB can be controlled by fabAlignmentMode which can be set to either Centre or End.
Fab Attachement
If fabAttached is set to true, the fab will be laid out attached to the BottomAppBar, else it will float above it.
Creating Jump Animation
The idea was quite simple yet innovative, the fab will make an abrupt jump from one screen to another along with changing the fab alignment mode from CENTRE to END.
How to achieve this
It is very simple, you just need to detach the fab from BottomAppBar
and then change the BottomAppBar Alignment from CENTRE to END (vice/versa). Add a handler and add a post delay of more than 150ms
as the animation time for changing alignment is of 300ms. Finally reattach the fab inside the runnable. Woof thats really simple.
You can checkout the implementation of newly added material design components along with this animation on my repository.
Conclusion
You can customise the behaviour of newly added components as per your wish by tweaking a bit and playing around. All you need is imagination, all other material design components are also amazing, you can check them out as well material.io website. Happy coding fellas…
