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

Material 3 recommends putting Floating Action Bar inside the Bottom Bar, without the cutoff.

If you need the cutoff, use Material 2 components or create a custom one.

If you prefer to follow Material 3 guidelines, put the FAB inside the bar like the following:

Scaffold(
    bottomBar = {
        BottomAppBar(
            actions = {},
            floatingActionButton = {
                FloatingActionButton(onClick = { }) {
                    Icon(Icons.Default.Add, contentDescription = "Add")
                }
            },
        )
    }
) {
    Text("The content", modifier = Modifier.padding(it))
}

Answer 2

Google recommends just placing it inside the bottom navbar.

But to answer your question: spent a good two days figuring this out. Turns out you can just wrap your FAB in a Box and use Modifier.offset. As far as I can tell, pointerInput is accurate as well. There are probably a few ways to do this, and this is likely far from the best.

You'll probably need to manually compute the exact offset you're looking for based on screen size, height of the bottom nav, etcetera. But this is a relatively easy way to achieve the docked FAB, at least.

Scaffold(
    modifier = Modifier,
    floatingActionButton = {
        Box(){
            FloatingActionButton(
                onClick = { /* stub */ },
                shape = CircleShape,
                modifier = Modifier
                    .align(Alignment.Center)
                    .size(80.dp)
                    .offset(y = 50.dp)
            ) {
                Icon(
                    imageVector = FontAwesomeIcons.Solid.Plus,
                    contentDescription = null,
                    modifier = Modifier.size(45.dp)
                )
            }
        }
    },
    floatingActionButtonPosition = FabPosition.Center,
    content = { Content() },
    bottomBar = {
        BottomNavWr(
            navController,
            tabs
        )
    }
)

Produces something similar to the following, depending on other code:

Answer 3

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

Answer 4

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>