How can i overlap list item on each other in android jetpack compose?

Viewed 5497

enter image description here

I want to implement this ui. How can i overlap post list item on each other in android jetpack compose?

4 Answers

If you're using a Column or a LazyList to display the items, you can use the verticalArrangement parameters with a negative spacedBy space.

LazyColumn(
    verticalArrangement = Arrangement.spacedBy((-32).dp)
) {
    // Put the items to overlap here
}

spacedBy() doc

Use Box to put one element on top of another.

Also, read official documentation here

You can use Box

sample :

Box(modifier = Modifier.fillMaxSize()) {
     Image(modifier = Modifier.fillMaxSize()) {} //Image1
     Image(modifier = Modifier.fillMaxSize()) {} //Image2
}

In the above example, Image2 will cover the Box's maxSize. Image1 will be beneath Image2.

Adding to Bagadeshkumar R's answer, you can place Spacer with height that is spacer(modifier = Modifier.height(8.dp)), attribute between image 1 and 2, for image 1 to be partially visible.

Related