How to implement this layout using box composable in Jetpack Compose?

Layout

As you can see the layout, I want to overlay the smaller box over the edge of the bigger one.
I tried implementing it on my own but all i was able to do was to overlay the smaller one across the edge of the bigger one and not above the edge.

I was trying to implement it like this but i guess i’m just not giving the correct arguments in the offset modifier.

Box {
        Card(
            modifier= Modifier
                .fillMaxWidth()
                .height(300.dp)
        ){

        }
        Box(
            modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .background(Color.Blue)
                .align(Alignment.TopStart)
                .offset(x=0.dp ,y=40.dp)
        )
    }

  • 1

    In Compose, the order of modifiers often matters. If you place .offset before .background, the offset should work

    – 

Leave a Comment