Overlap two Box jetpack compose-CodePudding

I'm trying to overlap two Box or perhaps is better to use Row on this case.

My design is one Row overlapped with another one, and I've wrapped it on a Column, is that correct?

This is the design, what I'd like to have is the rectangle of the top be the same size of the one below and then move it some pixels as you can see in the image, but they should have the same width but not the same height.

Is it okay if the hierarchy is :

Column 
  Box (the one of the top)
    Row
  Box (the one of the bottom)
    Row (inside there is text and it's all the same align)

CodePudding user response：

In order for the Composables to overlap, you should put them in the same Box. Try this out:

Box(modifier = Modifier.size(width = 300.dp, height = 100.dp)) {
    Row(modifier = Modifier
        .size(width = 200.dp, height = 50.dp)
        .background(color = Color.Blue)
        .align(Alignment.TopEnd)) {}
    Row(modifier = Modifier
        .size(width = 200.dp, height = 70.dp)
        .background(color = Color.Red)
        .align(Alignment.BottomStart)) {}
}

CodePudding user response：

You can achieve this in many ways,

@Composable
fun BoxOverBox() {
    Box(
        modifier = Modifier.fillMaxSize()
            .background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(50.dp)
                .background(Color.Red)
        )
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(50.dp)
                .zIndex(2f)
                .graphicsLayer {
                    translationX = -50f
                    translationY = 50f
                }
                .background(Color.Blue)
        )
    }
}