Define Custom Boundaries for a Composable

Question

By default all the Composables, much like views are defined in form of Rects, i.e., four specific corner points with distinct properties. Now, if I want to implement something like this

(This is just an example, I want to implement this with much complex shapes (PATHS using Canvas))

So, when the user clicks on either of the triangles, the specific codeblock implemented for that triangle should be executed.

I got almost no possible approaches to this, so please inform if anyone does, thanks!

Answer 1

You can accomplish it by creating a custom shape and applying the image that is drawn latest in a Box

@Composable
private fun DividedImage() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
    ) {

        val context = LocalContext.current

        val shapeLeft = GenericShape { size: Size, layoutDirection: LayoutDirection ->
            val width = size.width
            val height = size.height
            moveTo(0f, 0f)
            lineTo(0f, height)
            lineTo(width, height)
            close()
        }

        val modifierLeft = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .graphicsLayer {
                clip = true
                shape = shapeLeft
            }
            .clickable {
                Toast
                    .makeText(context, "LEFT", Toast.LENGTH_SHORT)
                    .show()
            }
            .border(3.dp, Color.Green)


        val modifierRight = Modifier
            .fillMaxWidth()
            .height(200.dp)

            .clickable {
                Toast
                    .makeText(context, "RIGHT", Toast.LENGTH_SHORT)
                    .show()
            }
            .border(3.dp, Color.Red)



        Image(
            modifier = modifierRight,
            painter = painterResource(id = R.drawable.landscape2),
            contentDescription = null,
            contentScale = ContentScale.FillBounds
        )

        Image(
            modifier = modifierLeft,
            painter = painterResource(id = R.drawable.landscape1),
            contentDescription = null,
            contentScale = ContentScale.FillBounds
        )
    }
    
}