Google is committed to advancing racial equity for Black communities. See how.

FabConfiguration

@Immutable data class FabConfiguration
kotlin.Any
   ↳ androidx.ui.material.BottomAppBar.FabConfiguration

Configuration for a FloatingActionButton in a BottomAppBar.

This is state that is usually passed down to BottomAppBar by Scaffold or by another scaffold-like component that is aware of FloatingActionButton existence and its size and position.

When cutoutShape is provided in BottomAppBar, a cutout / notch will be 'carved' into the BottomAppBar based on FabConfiguration provided, with some extra space on all sides.

If you use BottomAppBar with Scaffold, a typical cutout for FAB may look like:

import androidx.ui.foundation.Icon
import androidx.ui.foundation.Text
import androidx.ui.material.BottomAppBar
import androidx.ui.material.ExtendedFloatingActionButton
import androidx.ui.material.IconButton
import androidx.ui.material.Scaffold

val fabShape = CircleShape

Scaffold(
    bottomAppBar = { fabConfiguration ->
        BottomAppBar(fabConfiguration = fabConfiguration, cutoutShape = fabShape) {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Favorite)
            }
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Favorite)
            }
        }
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Click me!") },
            shape = fabShape,
            onClick = { /* doSomething() */ }
        )
    },
    floatingActionButtonPosition = Scaffold.FabPosition.EndDocked
) {
    Text("Your app goes here")
}

Summary

Public constructors

<init>(fabSize: IntPxSize, fabTopLeftPosition: PxPosition, fabDockedPosition: BottomAppBar.FabDockedPosition)

Configuration for a FloatingActionButton in a BottomAppBar.

Public constructors

<init>

FabConfiguration(
    fabSize: IntPxSize,
    fabTopLeftPosition: PxPosition,
    fabDockedPosition: BottomAppBar.FabDockedPosition)

Configuration for a FloatingActionButton in a BottomAppBar.

This is state that is usually passed down to BottomAppBar by Scaffold or by another scaffold-like component that is aware of FloatingActionButton existence and its size and position.

When cutoutShape is provided in BottomAppBar, a cutout / notch will be 'carved' into the BottomAppBar based on FabConfiguration provided, with some extra space on all sides.

If you use BottomAppBar with Scaffold, a typical cutout for FAB may look like:

import androidx.ui.foundation.Icon
import androidx.ui.foundation.Text
import androidx.ui.material.BottomAppBar
import androidx.ui.material.ExtendedFloatingActionButton
import androidx.ui.material.IconButton
import androidx.ui.material.Scaffold

val fabShape = CircleShape

Scaffold(
    bottomAppBar = { fabConfiguration ->
        BottomAppBar(fabConfiguration = fabConfiguration, cutoutShape = fabShape) {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Favorite)
            }
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Favorite)
            }
        }
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Click me!") },
            shape = fabShape,
            onClick = { /* doSomething() */ }
        )
    },
    floatingActionButtonPosition = Scaffold.FabPosition.EndDocked
) {
    Text("Your app goes here")
}
Parameters
fabSize: IntPxSize the size of the FAB that will be shown on top of BottomAppBar
fabTopLeftPosition: PxPosition the top left coordinate of the FloatingActionButton on the screen for BottomAppBar to carve a right cutout if desired
fabDockedPosition: BottomAppBar.FabDockedPosition the docked position of the FloatingActionButton in the BottomAppBar