Floating Action Button in Jetpack Compose with Material 3

Published in

ITNEXT

3 min readDec 12, 2022

The FAB represents the most important action on a screen. It puts key actions within reach. FAB typically contains an icon, for a FAB with text and an icon, see ExtendedFloatingActionButton.

Getting Started
Floating Action Button
- FAB
- Large FAB
- Small FAB & Extended FAB
FAB with SharedViewModel & LazyColumn (List)

Getting Started

First, let’s add Material 3 dependency. You can check the latest M3 versions on the Compose Material 3 releases page.

def material3_version = "1.0.1"
implementation "androidx.compose.material3:material3:$material3_version"

Optionally, if you are already using Material 2, you can follow this blog and migrate to Material 3.

Floating Action Button

FAB implementation is very easy. With Material 3 we have 4 different FAB options to select from.

FAB

FloatingActionButton(
    onClick = {
        //OnClick Method
    },
    containerColor = MaterialTheme.colors.secondary,
    shape = RoundedCornerShape(16.dp),
) {
    Icon(
        imageVector = Icons.Rounded.Add,
        contentDescription = "Add FAB",
        tint = Color.White,
    )
}

containerColor, the color used for the background of this FAB.

shape, defines the shape of this FAB’s container.

Large FAB

Large FAB is useful when the layout calls for a clear and prominent primary action, and where a larger footprint would help the user engage. For example, when appearing on taller and larger device screens.

LargeFloatingActionButton(
    onClick = {
        //OnClick Method
    },
    containerColor = MaterialTheme.colors.secondary,
) {
    Icon(
        imageVector = Icons.Rounded.Add,
        contentDescription = "Add FAB",
        tint = Color.White,
    )
}

Large FAB. It doesn’t really look nice on small screen :)

Small FAB & Extended FAB

Small FAB is used for a secondary, supporting action, or in place of a default FAB on smaller screens. One or more small FABs can be paired with a default FAB or extended FAB.
Extended FAB is the most visually prominent button. Use an extended FAB on screens with long, scrolling views that require persistent access to an action, such as a check-out screen. Do not use an extended FAB in a view that cannot scroll.

Small FAB & Extended FAB implementation is very similar to FAB. Only difference is Extended FAB has text, optional icon and expanded parameters.

expanded, controls the expansion state of this FAB. In an expanded state, the FAB will show both the icon and text. In a collapsed state, the FAB will show only the icon.

As you might’ve noticed, onClick & expanded is using sharedViewModel. In the next section, we’ll implement SharedViewModel and see how it works.

FAB with SharedViewModel & LazyColumn (List)

Let’s create SharedViewModel first,

class SharedViewModel: ViewModel() {
    var fabOnClick = mutableStateOf({})
    var smallFabOnClick = mutableStateOf({})

    val expandedFab = mutableStateOf(true)
}

Now we can create example screen,

derivedStateOf is used when your state or key is changing more than you want to update your UI.

If first visible item index in LazyColumn is 0, expandedFabState is true else false. When expandedFabState changes, LaunchedEffect will be triggered and update sharedViewModel.expandedFab.

Also, we use LaunchedEffect(key1 = Unit) for one time usage, when we enter the Composable it’ll set the fabOnClick and smallFabOnClick. We can set different values for different screens with the same method.

Finally, in LazyColumn we set state value to react to scroll position changes.

That’s it! I hope it was useful. 👋👋