Agfdhyk

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.

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

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

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>