How to Use Floating Action Buttons in Jetpack Compose (With Usage Examples) [2025]

Overview

A Floating Action Button (FAB) is a high-emphasis button in Jetpack Compose that promotes a primary action in an application. Typically anchored to the bottom right of the screen, it provides quick access to the most common user pathway.

Available in four variants - FAB, Small FAB, Large FAB, and Extended FAB, they cater to different visual styles and content needs. This guide demonstrates how to implement them using Jetpack Compose, with customization tips and best practices for 2025.

FAB Types Table

Type	Usage Examples
FAB	Create new note, start new task, add post, initiate call
Small FAB	Add attachment, quick edit, zoom in, filter list
Large FAB	Center map location, start recording, create event, open camera
Extended FAB	Add new contact, compose email, create document, start chat

Version Compatibility & Dependencies

This implementation requires a minimum SDK of API level 21 (Android 5.0). Add the Compose BOM to your project:


dependencies {
    implementation(platform("androidx.compose:compose-bom:2025.05.00"))
    implementation("androidx.compose.material3:material3")
}

Ensure your app uses a Material 3 theme, such as MaterialTheme. Refer to the Material 3 FAB Guidelines for details.

Creating Floating Action Buttons in Jetpack Compose

FAB Example

Creates a standard FAB with an icon.


import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add

@Composable
fun FABExample(onClick: () -> Unit) {
    // Standard FAB with default size and shape
    FloatingActionButton(
        onClick = { onClick() }
    ) {
        // Icon for primary action
        Icon(Icons.Filled.Add, contentDescription = "Add item")
    }
}

Result: A standard FAB with a rounded corner, shadow, and an 'add' icon.

Small FAB Example

Creates a smaller FAB with custom colors.


import androidx.compose.material3.SmallFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.material3.MaterialTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add

@Composable
fun SmallFABExample(onClick: () -> Unit) {
    // Smaller FAB with custom colors
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        // Icon for quick action
        Icon(Icons.Filled.Add, contentDescription = "Add attachment")
    }
}

Result: A small FAB with a secondary color scheme and an 'add' icon.

Large FAB Example

Creates a larger FAB with a circular shape.


import androidx.compose.material3.LargeFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.ui.shape.CircleShape

@Composable
fun LargeFABExample(onClick: () -> Unit) {
    // Larger FAB with circular shape
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape
    ) {
        // Icon for prominent action
        Icon(Icons.Filled.Add, contentDescription = "Center location")
    }
}

Result: A large, circular FAB with an 'add' icon.

Extended FAB Example

Creates an FAB with both icon and text.


import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit

@Composable
fun ExtendedFABExample(onClick: () -> Unit) {
    // Extended FAB with icon and text
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, contentDescription = "Compose") },
        text = { Text("Compose") }
    )
}

Result: An extended FAB with an 'edit' icon and "Compose" text.

Key Points for Implementation

onClick: Defines the action triggered when the FAB is pressed.
containerColor: Customizes the FAB’s background color (e.g., MaterialTheme.colorScheme.primary).
contentColor: Sets the color of the icon or text (e.g., MaterialTheme.colorScheme.onPrimary).
shape: Adjusts the FAB’s shape using Shape (e.g., CircleShape for circular FABs).
Accessibility: Ensure FABs have a 48dp touch target and use contentDescription for screen readers (e.g., contentDescription = "Add item").

Theming FABs

Customize FAB appearance by defining a Material 3 theme in res/values/themes.xml or using MaterialTheme in Compose.


import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add

@Composable
fun ThemedFABExample(onClick: () -> Unit) {
    MaterialTheme(
        colorScheme = MaterialTheme.colorScheme.copy(
            primary = Color(0xFF4CAF50)
        )
    ) {
        FloatingActionButton(onClick = { onClick() }) {
            Icon(Icons.Filled.Add, contentDescription = "Add item")
        }
    }
}

FAQ

What are Floating Action Buttons?

High-emphasis buttons that promote a primary action, typically anchored to the bottom right of the screen.

Which composable is used for a standard FAB?

Use FloatingActionButton for a standard FAB.

How to make FABs accessible?

Use contentDescription for screen readers and ensure a 48dp touch target.

Can I customize FAB colors?

Yes, via containerColor, contentColor, or a custom MaterialTheme.colorScheme.

What is the minimum SDK required?

API level 21 (Android 5.0).

How to Use Floating Action Buttons in Jetpack Compose (With Examples) [2025]