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.BottomAppBarandroid:id="@+id/bar"android:layout_gravity="bottom"app:fabCradleMargin="0dp"app:fabCradleRoundedCornerRadius="0dp"... /><com.google.android.material.floatingactionbutton.FloatingActionButtonapp: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.CoordinatorLayoutxmlns: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.BottomAppBarandroid:id="@+id/bar"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"style="@style/Widget.MaterialComponents.BottomAppBar"      //Materialstyle.app:navigationIcon="@drawable/ic_menu_24"/><com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_anchor="@id/bar"/></android.support.design.widget.CoordinatorLayout>