Custom Material-3 Expandable Floating Action Button in Jetpack Compose

The Material-3 is rolled out with some awesome designs for components in Android applications, some are still planning for Jetpack Compose, but we can create those UI components just like this Expandable Floating Action Button.

Preview:

We are creating a Material 3 Floating Action Button in Jetpack Compose that expands into a Sheet with multiple options when clicked. You can visit the website of Material-3 for the source of inspiration for this Floating Action Button.

Now let’s talk about how we can achieve it 🧐

For better understanding, I have created the images below to showcase the UI layouts and order of components used to develop this design.

Slide-1

Slide-2

Slide-3

Slide-4

Slide-5

Slide-6

Let’s start coding:

We will call the Composable function in the MainActivity.kt and implement it in the floatingActionButton(value-parameter) inside a Scaffold.

    val context = LocalContext.current

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        floatingActionButton = {

            val itemList = listOf(
                FABItem(icon = Icons.Rounded.Call, text = "Call"),
                FABItem(icon = Icons.Rounded.Create, text = "Create"),
                FABItem(icon = Icons.Rounded.AccountCircle, text = "Account"),
            )

            CustomExpandableFAB(
                items = itemList,
                onItemClick = {item ->

                    when(item.text) {
                        "Call" -> Toast.makeText(context, "call clicked", Toast.LENGTH_SHORT).show()
                        "Create" -> Toast.makeText(context, "create clicked", Toast.LENGTH_SHORT).show()
                        "Account" -> Toast.makeText(context, "account clicked", Toast.LENGTH_SHORT).show()
                    }

                }
            )
        }

    ) { innerPadding ->
        Greeting(
            name = "Android",
            modifier = Modifier.padding(innerPadding)
        )
    }

And finally, we are done with it 👍

If you find my work helpful, you can show appreciation by buying me some coffee. Your support is greatly appreciated and will help me continue to create better articles, videos, projects, and much more. The link to do so: https://www.buymeacoffee.com/DeveloperChunk