How to make cradled FAB in Jetpack Compose Material 3?

Question

I am trying to make a Cradled FAB using Jetpack Compose Material 3. Based on the images from the documentation on this site:https://m3.material.io/components/bottom-app-bar/implementation

However in the code I can not find anything about where to specify the anchor position or set the fab to docked. The example code is XML and I'm using Compose. How is this done? I'm using Scafold and BottomAppBar now but they don't seem to have any options to dock or cradle or anchor the Floating Action Button.

Answer 1

I am not using the Material Compose library, but recently I was having the same problem while migrating from Material 2 to Material 3.

https://pasteboard.co/LWzXHPOg3waX.jpg

Adding the app:fabAnchorMode="cradle" attribute on my BottomAppBar compenent fixed the issue for me.

https://pasteboard.co/qmZE2NQovGFq.png

Here a code sample

 <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/my_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/my_fab_description"
        android:src="?attr/myFabIcon"
        app:layout_anchor="@+id/my_bottom_app_bar" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/my_bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/global_action_bar_height"
        android:layout_gravity="bottom"
        app:backgroundTint="?attr/myBottomAppBarColor"
        app:fabAlignmentMode="end"
        app:fabAnchorMode="cradle"
        app:fabCradleMargin="@dimen/bottom_action_bar_fab_cradle_margin"
        app:hideOnScroll="true"
        app:menu="@menu/my_bottom_app_bar_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 2

One of the options is to use scaffold and you can set up "floatingActionButtonPosition"

 Scaffold(
    bottomBar = { //bottomBar sample },
    floatingActionButton = {
        //Button
    },
    floatingActionButtonPosition = FabPosition.Center,
    content = {//your content