Jetpack Compose: split a card diagonally and put content inside them

Question

I was trying to achieve something like this

Where A is an Image and B is also an Image.

Currently, this is the best that I can do

 Card(
   modifier = Modifier
   .fillMaxWidth()
   .constrainAs(image) {
     top.linkTo(parent.top)
     start.linkTo(parent.start)
     end.linkTo(parent.end)
     width = Dimension.fillToConstraints}.fillMaxSize(0.3f)) {
       Row {
         AsyncImage(model = url1,
                    contentDescription = "Product Image",
                    modifier = Modifier.weight(1f),
                    contentScale = ContentScale.Crop
                    )

         AsyncImage(model = url2,
                    contentDescription = "Product Image",
                    modifier = Modifier.weight(1f),
                    contentScale = ContentScale.Crop
                    )
                }
            }
      }
}

It will split these 2 images vertically, but not diagonally like below picture.

Any help would be appreciated.

Thank you

user_5457853 · Answer

You can achieve this using shapes and Modifier.graphicsLayer{} with clip and shape or Modifier.clip(shape) which is graphicsLayer under the hood.

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

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

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

           val modifierLeft = Modifier
               .fillMaxWidth()
               .height(200.dp)
               .graphicsLayer {
                   clip = true
                   shape = shapeLeft
               }
               .border(3.dp, Color.Green)


           val modifierRight = Modifier
               .fillMaxWidth()
               .height(200.dp)
               .graphicsLayer {
                   clip = true
                   shape = shapeRight
               }
               .border(3.dp, Color.Red)

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

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

Result

Jetpack Compose: split a card diagonally and put content inside them

1 Answers