How To Set FAB In Front Of Bottom App Bar?

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:

Solution 1:

Yes, there isn't an attribute named fabCradleDiameter, its fabCradleMargin

and make sure the version is after:

com.google.android.material:material:1.0.0-alpha3

Solution 2:

Try this it worked for me.. may work for you as well.

<android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center"
        app:fabCradleMargin="0dp"
        app:fabCradleRoundedCornerRadius="0dp"
        app:hideOnScroll="true"
        app:navigationIcon="@drawable/ic_menu_black_24dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_favorite_red_24dp"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:layout_anchor="@id/bottomAppBar" />

Solution 3:

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"
    .../>

Solution 4:

Key is to use new material theme. Also your container layout should be coordinator layout. Use below code to change your layout.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- Other components and views -->

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      style="@style/Widget.MaterialComponents.BottomAppBar"      //Material style. 
      app:navigationIcon="@drawable/ic_menu_24"/>

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_anchor="@id/bar"/>

</android.support.design.widget.CoordinatorLayout>