FabConfiguration

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

Configuration for a FloatingActionButton in a BottomAppBar

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

A typical cutout FAB may look like:

import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.BottomAppBar.FabConfiguration
import androidx.ui.material.FloatingActionButton

val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()

val navigationIcon: @Composable() () -> Unit = {
    AppBarIcon(someNavigationImage) { /* doSomething()*/ }
}
val actionData = listOf(someActionImage, someActionImage)

BottomAppBar(
    navigationIcon = navigationIcon,
    fabConfiguration = FabConfiguration(cutoutShape = CircleShape) {
        FloatingActionButton(
            color = (+MaterialTheme.colors()).secondary,
            icon = someActionImage,
            onClick = { /** doSomething() */ })
    },
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}
This also works with an extended FAB:
import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.BottomAppBar.FabConfiguration
import androidx.ui.material.FloatingActionButton
import androidx.ui.text.TextStyle

val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()

val navigationIcon: @Composable() () -> Unit = {
    AppBarIcon(someNavigationImage) { /* doSomething()*/ }
}
val actionData = listOf(someActionImage, someActionImage)

BottomAppBar(
    navigationIcon = navigationIcon,
    fabConfiguration = FabConfiguration(cutoutShape = CircleShape) {
        FloatingActionButton(
            color = (+MaterialTheme.colors()).secondary,
            text = "Extended FAB",
            textStyle = TextStyle(color = Color.White),
            onClick = { /** doSomething() */ })
    },
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}
A more complex example with a fancy animating FAB that switches between cut corners androunded corners:
import androidx.animation.TweenBuilder
import androidx.ui.animation.animatedFloat
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.BottomAppBar.FabConfiguration
import androidx.ui.material.FloatingActionButton
import androidx.ui.foundation.shape.corner.CutCornerShape

val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()

val navigationIcon: @Composable() () -> Unit = {
    AppBarIcon(someNavigationImage) { /* doSomething()*/ }
}
val actionData = listOf(someActionImage, someActionImage)

// Consider negative values to mean 'cut corner' and positive values to mean 'round corner'
val sharpEdgePercent = -50f
val roundEdgePercent = 45f

// Start with sharp edges
val animatedProgress = +animatedFloat(sharpEdgePercent)

val progress = animatedProgress.value.roundToInt()

// When progress is 0, there is no modification to the edges so we are just drawing a rectangle.
// This allows for a smooth transition between cut corners and round corners.
val fabShape = if (progress < 0) {
    CutCornerShape(abs(progress))
} else {
    RoundedCornerShape(progress)
}

val switchShape = {
    val target = animatedProgress.targetValue
    val nextTarget = if (target == roundEdgePercent) sharpEdgePercent else roundEdgePercent
    animatedProgress.animateTo(
        targetValue = nextTarget,
        anim = TweenBuilder<Float>().apply { duration = 600 }
    )
}

BottomAppBar(
    navigationIcon = navigationIcon,
    fabConfiguration = FabConfiguration(cutoutShape = fabShape) {
        FloatingActionButton(
            color = (+MaterialTheme.colors()).secondary,
            icon = someActionImage,
            onClick = switchShape,
            shape = fabShape
        )
    },
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}

Summary

Public constructors

<init>(fabPosition: BottomAppBar.FabPosition = FabPosition.Center, cutoutShape: Shape? = null, fab: () -> Unit)

Configuration for a FloatingActionButton in a BottomAppBar

Public constructors

<init>

FabConfiguration(
    fabPosition: BottomAppBar.FabPosition = FabPosition.Center,
    cutoutShape: Shape? = null,
    fab: () -> Unit)

Configuration for a FloatingActionButton in a BottomAppBar

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

A typical cutout FAB may look like:

import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.BottomAppBar.FabConfiguration
import androidx.ui.material.FloatingActionButton

val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()

val navigationIcon: @Composable() () -> Unit = {
    AppBarIcon(someNavigationImage) { /* doSomething()*/ }
}
val actionData = listOf(someActionImage, someActionImage)

BottomAppBar(
    navigationIcon = navigationIcon,
    fabConfiguration = FabConfiguration(cutoutShape = CircleShape) {
        FloatingActionButton(
            color = (+MaterialTheme.colors()).secondary,
            icon = someActionImage,
            onClick = { /** doSomething() */ })
    },
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}
This also works with an extended FAB:
import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.BottomAppBar.FabConfiguration
import androidx.ui.material.FloatingActionButton
import androidx.ui.text.TextStyle

val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()

val navigationIcon: @Composable() () -> Unit = {
    AppBarIcon(someNavigationImage) { /* doSomething()*/ }
}
val actionData = listOf(someActionImage, someActionImage)

BottomAppBar(
    navigationIcon = navigationIcon,
    fabConfiguration = FabConfiguration(cutoutShape = CircleShape) {
        FloatingActionButton(
            color = (+MaterialTheme.colors()).secondary,
            text = "Extended FAB",
            textStyle = TextStyle(color = Color.White),
            onClick = { /** doSomething() */ })
    },
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}
A more complex example with a fancy animating FAB that switches between cut corners androunded corners:
import androidx.animation.TweenBuilder
import androidx.ui.animation.animatedFloat
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.material.AppBarIcon
import androidx.ui.material.BottomAppBar
import androidx.ui.material.BottomAppBar.FabConfiguration
import androidx.ui.material.FloatingActionButton
import androidx.ui.foundation.shape.corner.CutCornerShape

val someActionImage: Image = getMyActionImage()
val someNavigationImage: Image = getMyNavigationImage()

val navigationIcon: @Composable() () -> Unit = {
    AppBarIcon(someNavigationImage) { /* doSomething()*/ }
}
val actionData = listOf(someActionImage, someActionImage)

// Consider negative values to mean 'cut corner' and positive values to mean 'round corner'
val sharpEdgePercent = -50f
val roundEdgePercent = 45f

// Start with sharp edges
val animatedProgress = +animatedFloat(sharpEdgePercent)

val progress = animatedProgress.value.roundToInt()

// When progress is 0, there is no modification to the edges so we are just drawing a rectangle.
// This allows for a smooth transition between cut corners and round corners.
val fabShape = if (progress < 0) {
    CutCornerShape(abs(progress))
} else {
    RoundedCornerShape(progress)
}

val switchShape = {
    val target = animatedProgress.targetValue
    val nextTarget = if (target == roundEdgePercent) sharpEdgePercent else roundEdgePercent
    animatedProgress.animateTo(
        targetValue = nextTarget,
        anim = TweenBuilder<Float>().apply { duration = 600 }
    )
}

BottomAppBar(
    navigationIcon = navigationIcon,
    fabConfiguration = FabConfiguration(cutoutShape = fabShape) {
        FloatingActionButton(
            color = (+MaterialTheme.colors()).secondary,
            icon = someActionImage,
            onClick = switchShape,
            shape = fabShape
        )
    },
    actionData = actionData
) { actionImage ->
    AppBarIcon(actionImage) { /* doSomething()*/ }
}
Parameters
fabPosition: BottomAppBar.FabPosition = FabPosition.Center the position of the FloatingActionButton attached to the BottomAppBar
cutoutShape: Shape? = null the shape of the cutout that will be added to the BottomAppBar - this should typically be the same shape used inside the fab. This shape will be drawn with an offset around all sides. If null no cutout will be drawn, and the fab will be placed on top of the BottomAppBar.
fab: () -> Unit the FloatingActionButton that will be attached to the BottomAppBar