We created a custom shape for a slideOver composab...

# compose

[Job Guldemeester]

We created a custom shape for a slideOver composable. When using the Modifier.clip the composable is shaped correctly but the inner content of the composable disappears in one of the screens where we use the composable.

Could it be that composable interferes with the Modifier.graphicsLayer used in other screens?

[Filip Wiesner]

🙏  🧵  👉 https://kotlinlang.slack.com/archives/CJLTWPH7S/p1615303547114200

[Job Guldemeester]

Woeps sorry didn’t see that 😅

[Job Guldemeester]

We created a custom shape for a slideOver composable. When using the Modifier.clip the composable is shaped correctly but the inner content of the composable disappears in one of the screens where we use the composable. The content of the screen are a few Images stacked on top of each other and are controlled by modifying the Modifier.graphicLayer. The inner content of the slideOver is visible until the images are loaded.

Currently we “solved” it by removing the Modifier.clip and use the Modifier.background with the shape. But since its clickable we want to have the ripple inside the shape. With the Modier.background its also outside the shape.

I also noticed that when using a “simpler” custom shape like:

GenericShape{ size, _ ->
    lineTo(size.width, 0f)
    lineTo(size.width /2 , size.height /2)
    lineTo(0f , size.height )
    close()
}

the inner content does not disappear when using the Modifier.clip.

Could it be that composable interferes with the Modifier.graphicsLayer used in other screens?

This is the custom shape we’re trying to use:

class DragIndicatorShape(private val cornerRadius: Float) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Generic(path = Path().apply {
            reset()
            quadraticBezierTo(
                x1 = 0f,
                y1 = cornerRadius,
                x2 = cornerRadius,
                y2 = cornerRadius
            )
            lineTo(x = size.width - cornerRadius, y = cornerRadius)
            quadraticBezierTo(
                x1 = size.width,
                y1 = cornerRadius,
                x2 = size.width,
                y2 = 2 * cornerRadius
            )
            lineTo(x = size.width, y = size.height - cornerRadius * 2)
            quadraticBezierTo(
                x1 = size.width,
                y1 = size.height - cornerRadius,
                x2 = size.width - cornerRadius,
                y2 = size.height - cornerRadius
            )
            lineTo(x = cornerRadius, y = size.height - cornerRadius)
            quadraticBezierTo(
                x1 = 0f,
                y1 = size.height - cornerRadius,
                x2 = 0f,
                y2 = size.height
            )
            close()
        })
    }
}

[Daniele Segato]

Hi, I do not have an answer but I'm interested.. following.

It surely is something to do with graphicsLayer cause clip is implemented like this:

/**
 * Clip the content to [shape].
 *
 * @param shape the content will be clipped to this [Shape].
 */
@Stable
fun Modifier.clip(shape: Shape) = graphicsLayer(shape = shape, clip = true)

maybe something to do with zindex?

[Daniele Segato]

I think you should file an issue about this (link in channel description).
If you do can you post the link here? I want to star it.