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

# compose

[brandonmcansh]

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

[alorma]

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

[brandonmcansh]

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

[brandonmcansh]

playing around with shape

[brandonmcansh]

gonna require a custom shape that animates the height

[alorma]

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

[brandonmcansh]

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)
        }
    }

[brandonmcansh]

this is how BottomAppBar internally render the cut

[brandonmcansh]

ha got it

[alorma]

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

[brandonmcansh]

its a different Shape

[brandonmcansh]

screen-20210721-113730.mp4

[alorma]

Ooh, it looks great

[brandonmcansh]

thanks!

[brandonmcansh]

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)