CODEWITHSUNDEEP
androidkotlinuser-interfaceoverlapandroid-jetpack-compose
Mohammad
Mohammad

Reputation: 201

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

enter image description here

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

Upvotes: 18

Views: 9444

Answers (4)

Quentin Nivelais
Quentin Nivelais

Reputation: 421

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

Upvotes: 20

Patrice Mulindi
Patrice Mulindi

Reputation: 1

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.

Upvotes: 0

Bagadeshkumar R
Bagadeshkumar R

Reputation: 240

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.

Upvotes: 8

Ayush Saini
Ayush Saini

Reputation: 180

Use Box to put one element on top of another.

Also, read official documentation here

Upvotes: 7

Related Questions