A modern programming language that makes developers happier.

kotlinlang

Im assuming no, but is there currently a way to animate the `BottomAppBarCutoutOffset` of the BottomAppBar?

I gues... if it uses `Dp`, you can use animateDpAsState? <https://developer.android.com/jetpack/compose/animation#animate-as-state|https://developer.android.com/jetpack/compose/animation#animate-as-state>

yeah just trying to find how to provide the cutout since its not available at top level

gonna require a custom shape that animates the height

Uhm, never played with cut shapes on compose... any sample?

```    private fun Path.addCutoutShape(layoutDirection: LayoutDirection, density: Density) {
        // The gap on all sides between the FAB and the cutout
        val cutoutOffset = with(density) { BottomAppBarCutoutOffset.toPx() }

        val cutoutSize = Size(
            width = fabPlacement.width + (cutoutOffset * 2),
            height = fabPlacement.height + (cutoutOffset * 2)
        )

        val cutoutStartX = fabPlacement.left - cutoutOffset
        val cutoutEndX = cutoutStartX + cutoutSize.width

        val cutoutRadius = cutoutSize.height / 2f
        // Shift the cutout up by half its height, so only the bottom half of the cutout is actually
        // cut into the app bar
        val cutoutStartY = -cutoutRadius

        addOutline(cutoutShape.createOutline(cutoutSize, layoutDirection, density))
        translate(Offset(cutoutStartX, cutoutStartY))

        // TODO: consider exposing the custom cutout shape instead of just replacing circle shapes?
        if (cutoutShape == CircleShape) {
            val edgeRadius = with(density) { BottomAppBarRoundedEdgeRadius.toPx() }
            // TODO: possibly support providing a custom vertical offset?
            addRoundedEdges(cutoutStartX, cutoutEndX, cutoutRadius, edgeRadius, 0f)
        }
    }```

this is how BottomAppBar internally render the cut

But, how do you define you want cutout shapes instead of rounded?

screen-20210721-113730.mp4

for those who find this thread in search, you can pull it off with using `animateFloatAsState` for the scale and apply that the `FloatingActionButton` modifier in tandem with `M.size(width = fabWidth * scale, height = fabHeight * scale)`