https://kotlinlang.org logo
#compose
Title
# compose
b

brandonmcansh

07/21/2021, 3:15 PM
Im assuming no, but is there currently a way to animate the
BottomAppBarCutoutOffset
of the BottomAppBar?
a

alorma

07/21/2021, 3:22 PM
I gues... if it uses
Dp
, you can use animateDpAsState? https://developer.android.com/jetpack/compose/animation#animate-as-state
b

brandonmcansh

07/21/2021, 3:25 PM
yeah just trying to find how to provide the cutout since its not available at top level
playing around with shape
gonna require a custom shape that animates the height
a

alorma

07/21/2021, 3:29 PM
Uhm, never played with cut shapes on compose... any sample?
b

brandonmcansh

07/21/2021, 3:29 PM
Copy code
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
ha got it
a

alorma

07/21/2021, 3:34 PM
But, how do you define you want cutout shapes instead of rounded?
b

brandonmcansh

07/21/2021, 3:34 PM
its a different Shape
a

alorma

07/21/2021, 3:40 PM
Ooh, it looks great
b

brandonmcansh

07/21/2021, 3:42 PM
thanks!
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)