Hello everyone. I'm trying to add a gradient on this cutout path, but with no success.

# compose

[AG]

Hello everyone. I'm trying to add a gradient on this cutout path, but with no success.

[AG]

Box(
    modifier =
    Modifier.fillMaxSize().drawBehind {
        
        val rectPath = Path().apply { addRect(Rect(0f, 0f, size.width, size.height)) }
        
        val cutoutPath =
            Path().apply {
                addOval(
                    Rect(
                        -radius + size.width / 2,
                        -radius,
                        radius + size.width / 2,
                        radius))
            }

        // Clip the half-circle cutout and fill the box background
        clipPath(
            Path().apply {
                addPath(rectPath)
                addPath(cutoutPath)
                fillType = PathFillType.EvenOdd
            }) {
            drawRect(surfaceColor)
        }
    }) {
    
}

The code I used to create a cutout

[romainguy]

Are you using clipPath to clip the grid of images or are you using it to clip the gray area?

[romainguy]

(either way, you don't need the two intermediate Path objects btw, just `addRect`/`addOval` to your clipPath directly

[romainguy]

The more efficient way to do this would be to just draw the gray area as a Path directly. I don't think you need a clipPath at all.

[AG]

I'm using clipPath to clip the top part of gray area so that the grid is visible behind it

[romainguy]

You don't need to clip it

[romainguy]

Just draw it as a shape

[romainguy]

(you can create the shape by subtracting an oval from a rect using Path boolean ops)

[AG]

Thank you!, I've just changed

val resultPath = Path().apply {
op(rectPath, cutoutPath, PathOperation.Difference)

It works, but how can I add a fading effect to the edge of that shape?

[romainguy]

You can't do one that follows the normal of the edge

[romainguy]

You can however draw it with a linear gradient

[romainguy]

That might be close enough to what you want

[romainguy]

(just drawPath + gradient brush)

[romainguy]

(there is a way on Android but it's not easy, you'd need to use drawVertices/drawBitmapMesh)

[AG]

Thank you! I'll try with gradient brush