If you’re looking to add some extra flair to your app’s user interface, a Floating Action Button (FAB) is a great place to start. With Jetpack Compose, creating a FAB is easier than ever. In this guide, we’ll walk you through the steps to create a FAB that will elevate your UI design skills and make your app stand out.
Understanding Floating Action Buttons.
A Floating Action Button (FAB) is a circular button that floats above the UI and is used to promote the primary action of the app. It’s a common design pattern in modern Android apps and is often used for actions like adding a new item, creating a new post, or initiating a search. In Jetpack Compose, creating a FAB is easy and can be done with just a few lines of code. Let’s dive in and learn how to create one!
Creating a Floating Action Button in Jetpack Compose
To create a Floating Action Button in Jetpack Compose, you first need to add the Material Design library to your project. Once you have done that, you can create a FAB by using the FloatingActionButton component. You can customize the FAB by changing its background color, content color, and icon. Just create a @Composable function named is FloatingActionButtonCompose and configure the FAB
package com.composefloatingactionbutton import androidx.compose.foundation.shape.CornerSize import androidx.compose.material.FloatingActionButton import androidx.compose.material.Icon import androidx.compose.material.MaterialTheme import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import com.composefloatingactionbutton.ui.theme.Accent @Composable fun FloatingActionButtonCompose() { val context = LocalContext.current FloatingActionButton(shape = MaterialTheme.shapes.large.copy(CornerSize(percent = 50)), backgroundColor = Accent, contentColor = Color.White, onClick = { makeToast(context, "Fab clicked") }) { Icon(Icons.Default.Add, contentDescription = null) } }
Adding Functionality to the Floating Action Button
Once you have created your Floating Action Button in Jetpack Compose, you can add functionality to it. This can be done by using the onClick parameter of the FloatingActionButton component. You can specify a function that will be called when the user clicks on the FAB. This function can perform any action you want, such as opening a new screen, displaying a message, or performing a calculation. I am display a toast just for demo purpose.
onClick = { makeToast(context, "Fab clicked") }) { Icon(Icons.Default.Add, contentDescription = null) }
How to use Floating Action Button Compose function
In the Scaffold compose function pass the floatingActionButton and bottomBar params just like below. I have written a separate tutorial on the Bottom bar using compose. You can check out that for details
package com.composefloatingactionbutton import android.content.Context import android.os.Bundle import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.tooling.preview.Preview import com.composefloatingactionbutton.ui.theme.ComposeFloatingActionButtonTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeFloatingActionButtonTheme { // A surface container using the 'background' color from the theme Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) { ComposeScaffold() } } } } } @Composable fun ComposeScaffold() { val context = LocalContext.current val scaffoldState = rememberScaffoldState() Scaffold( bottomBar = { BottomAppBarCompose(context) }, floatingActionButton = { FloatingActionButtonCompose() }, scaffoldState = scaffoldState ) { } }
Customizing the Floating Action Button
You can change the color, shape, and size of the FAB to match your app’s design. To change the color, you can use the backgroundColor parameter and specify a color resource or a color value.
To change the shape, you can use the shape parameter and specify a shape resource or a custom shape. And to change the size, you can use the size parameter and specify a size resource or a custom size.
Placement of FAB button
- Position FAB at the bottom of the screen in the center, above the BottomAppBar (if it exists)
- Position FAB at the bottom of the screen at the end, above the BottomAppBar (if it exists)

Scaffold( bottomBar = { BottomAppBarCompose(context) }, floatingActionButton = { FloatingActionButtonCompose() }, floatingActionButtonPosition = FabPosition.End, // FabPosition.Center scaffoldState = scaffoldState )
The shape of FAB Button and embedded bottom bar
Customizing the Shape of FAB using shape param like below

FloatingActionButton( shape = MaterialTheme.shapes.large.copy(CornerSize(percent = 50)), backgroundColor = Accent, contentColor = Color.White, onClick = { makeToast(context, "Fab clicked") }) { Icon(Icons.Default.Add, contentDescription = null) }
Dock in Bottom Bar
Make true isFloatingActionButtonDocked param,
Scaffold( bottomBar = { BottomAppBarCompose(context) }, floatingActionButton = { FloatingActionButtonCompose() }, floatingActionButtonPosition = FabPosition.End, isFloatingActionButtonDocked = true, scaffoldState = scaffoldState )
Finally, The Compose function looks like below
Now you really want to check out the code, that code looks like below
package com.composefloatingactionbutton import androidx.compose.foundation.shape.CornerSize import androidx.compose.material.FloatingActionButton import androidx.compose.material.Icon import androidx.compose.material.MaterialTheme import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import com.composefloatingactionbutton.ui.theme.Accent @Composable fun FloatingActionButtonCompose() { val context = LocalContext.current FloatingActionButton( shape = MaterialTheme.shapes.large.copy(CornerSize(percent = 50)), backgroundColor = Accent, contentColor = Color.White, onClick = { makeToast(context, "Fab clicked") }) { Icon(Icons.Default.Add, contentDescription = null) } }
Scaffold config for FAB button with the bottom bar
Now open the activity and simply configure the the Scaffold compose functions as per code snnipts
package com.composefloatingactionbutton import android.content.Context import android.os.Bundle import android.widget.Toast import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.tooling.preview.Preview import com.composefloatingactionbutton.ui.theme.ComposeFloatingActionButtonTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeFloatingActionButtonTheme { // A surface container using the 'background' color from the theme Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) { ComposeScaffold() } } } } } @Composable fun ComposeScaffold() { val context = LocalContext.current val scaffoldState = rememberScaffoldState() Scaffold( bottomBar = { BottomAppBarCompose(context) }, floatingActionButton = { FloatingActionButtonCompose() }, floatingActionButtonPosition = FabPosition.End, isFloatingActionButtonDocked = true, scaffoldState = scaffoldState ) { } } fun makeToast(ctx: Context, msg: String) { Toast.makeText(ctx, msg, Toast.LENGTH_SHORT).show() }
Conclusion
That is all about FAB, Using jetpack compose easily you can create Floating Action Button for beauty in your android application. I hope this compose tutorial will help you. If you have any questions please put them into the comment box, I will be happy to answer that.
Please keep in touch and follow us on social media for latest android and cross-platform articles. Please share this blog on own personal facebook and linked profile, That help me to reach out more people for better blog,
1 Comment
Good One