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.core.Text
import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.FloatingActionButton
import androidx.ui.material.Scaffold

val someActionImage: Image = getMyActionImage()
val fabShape = CircleShape
Scaffold(
    bottomAppBar = { fabConfiguration ->
        val actionData = listOf(someActionImage, someActionImage)
        BottomAppBar(
            fabConfiguration = fabConfiguration,
            cutoutShape = fabShape,
            actionData = actionData
        ) { actionImage ->
            AppBarIcon(actionImage) { /* doSomething()*/ }
        }
    },
    floatingActionButton = {
        FloatingActionButton(icon = someActionImage, shape = fabShape)
    },
    floatingActionButtonPosition = Scaffold.FabPosition.EndDocked
) {
    Text("Your app goes there")
}

Summary

Public constructors

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

Configuration for a FloatingActionButton in a BottomAppBar.

Public constructors

<init>

FabConfiguration(
    fabSize: PxSize,
    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.core.Text
import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.FloatingActionButton
import androidx.ui.material.Scaffold

val someActionImage: Image = getMyActionImage()
val fabShape = CircleShape
Scaffold(
    bottomAppBar = { fabConfiguration ->
        val actionData = listOf(someActionImage, someActionImage)
        BottomAppBar(
            fabConfiguration = fabConfiguration,
            cutoutShape = fabShape,
            actionData = actionData
        ) { actionImage ->
            AppBarIcon(actionImage) { /* doSomething()*/ }
        }
    },
    floatingActionButton = {
        FloatingActionButton(icon = someActionImage, shape = fabShape)
    },
    floatingActionButtonPosition = Scaffold.FabPosition.EndDocked
) {
    Text("Your app goes there")
}
Parameters
fabSize: PxSize 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