[FIXED] Overlap two Box jetpack compose

Issue

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)

......

Solution

I've faced with this some days ago and I solved it using ConstraintLayout.

What I had to do is :

1. Add implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02" to build.gradle
2. Wrap every Box in a ConstraintLayout { .. }
3. Inside each Box add a Modifier.constrainAs to align the Top Bottom Start End as you want.
4. If you want the first box be the same width as the second one without hardcoding the dps you should use width = Dimension.fillToConstraints

fillToConstraints - the layout will expand to fill the space defined by its constraints in that dimension.

Basic example without hard-coding :

ConstraintLayout() {
            val (title, description) = createRefs()
            Box(
                modifier = Modifier
                    .padding(start = 28.dp)
                    .background(color = Red)
                    .padding(
                        horizontal = 16.dp,
                    )
                    .constrainAs(title) {
                        top.linkTo(parent.top)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                        width = Dimension.fillToConstraints
                    }
            ) {
                Text(text = "Hello World")
            }

            Box(
                modifier = Modifier
                    .padding(end = 4.dp)
                    .background(Color.Magenta)
                    .padding(bottom = 5.dp, start = 8.dp, end = 16.dp, top = 4.dp)
                    .constrainAs(description) {
                        top.linkTo(title.top, margin = 16.dp)
                        start.linkTo(parent.start)
                        end.linkTo(parent.end)
                        bottom.linkTo(parent.bottom)
                    }
            ) {
                Text(text = "Skizo-ozᴉʞS rules")
            }
        }

Now you have to play with the padding according to your UI and adapt it, result is something like this :

Answered By - Skizo-ozᴉʞS
Answer Checked By - David Marino (JavaFixing Volunteer)