Android Material Design!!
FloatingActionButton (FAB) with BottomAppBarUsing Material Design
Components, Animate your FAB and BottomAppBar!
I always wondered while using floatingActionButton that I could be able to make this type of animations with that. Now BottomAppBar has solved this problem. You can animate your FAB with bottomAppBar.
Let me show you how to do it!
1) Adding BottomAppBar:
All you have to do is to make new project and add this dependency.
implementation 'com.google.android.material:material:1.1.0'
This is material design dependency which allows you to implement new material components. BottomAppBar is one of them.
I urged you to please go through the component section of material.io documentation for more new things to know!
Now after adding this dependency, open up your activity_main.xml.
BottomAppBar works with coordinatorLayout
, so turn your parent view to coordinatorLayout
like this.
Now in design panel, you will see something like this.
Don’t worry, this is because, bottomAppBar comes with material components theme and in your project by default your theme is AppCompat.
Theme.AppCompat.Light.DarkActionBar
Select AppComponent
and write MaterialComponents
instead.
Navigate to your xml, bottomAppBar must be there!
2) Adding FloatingActionButton (FAB)
I am using FAB that comes with material package i.e material.floatingactionbutton
.
FAB is showing at the top! We need it to be in the middle of the bottomAppBar. In order to do that, set the app:layout_anchor
attribute of floatingActionButton and reference the id
of bottomAppBar.
You will see your FAB move all the way in the middle of bottomAppBar.
It’s Coding Time!
The main part of this article, you can’t animate your bottomAppBar and FAB from XML. You need code to make it happen.
1) FAB Sliding
We need to set fabAlignmentMode of bottomAppBar. By default it is on center
. In order to animate FAB, I am going to set this attribute programmatically.
Run your app!
By default, bottomAppBar has fabAnimationMode
set to scale
in xml. You can change it to slide
to have a sliding experience of FAB!
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabAnimationMode="slide"/>
Run your app.
2) BottomAppBar Sliding
BottomAppBar behavior would be change to slideUp
and slidedown
. I am going to make it very simple just to make you understand.
Run your app.
You can play around with it by applying different scenarios. You can also animate fab with bottomAppBar sliding.
I will leave this on you 😉 You would need to combine above code.