Android Material Design!!

FloatingActionButton (FAB) with BottomAppBarUsing Material Design

Components, Animate your FAB and BottomAppBar!

Mustufa Ansari

Published in

CodeChai

3 min readAug 28, 2020

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.