How to set FAB in front of bottom app bar?

Question

How can I bring the floating action button in front of the bottom app bar? In other words, how to set the bottom app bar to fill the entire row behind the fab?

From this:

To this:

Images via medium.com

According to this tutorial there should be an attribute named fabCradleDiameter but in reality there is no such attribute for this component.

Answer 1

Just use the official BottomAppBar and use the:

• fabCradleMargin attribute. It increases or decreases the distance between the FloatingActionButton and the BottomAppBar
• fabCradleRoundedCornerRadius attribute. It specifies the roundness of the corner around the cutout

Use:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bar"
    android:layout_gravity="bottom"
    app:fabCradleMargin="0dp"
    app:fabCradleRoundedCornerRadius="0dp"
    ... />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:layout_anchor="@id/bar"
    .../>