Thread
#compose
    brandonmcansh

    brandonmcansh

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

    alorma

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

    brandonmcansh

    1 year ago
    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

    1 year ago
    Uhm, never played with cut shapes on compose... any sample?
    brandonmcansh

    brandonmcansh

    1 year ago
    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

    1 year ago
    But, how do you define you want cutout shapes instead of rounded?
    brandonmcansh

    brandonmcansh

    1 year ago
    its a different Shape
    a

    alorma

    1 year ago
    Ooh, it looks great
    brandonmcansh

    brandonmcansh

    1 year ago
    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)