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

Question

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

score 19 · Accepted Answer · answered Oct 29 '21 at 02:50

19

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

answered Oct 29 '21 at 02:50

Quentin Nivelais

331
2
6

thanks a lot! you're a man. – Mohammad Nov 20 '21 at 14:51

score 8 · Answer 2 · answered Apr 04 '21 at 08:47

8

Use Box to put one element on top of another.

Also, read official documentation here

answered Apr 04 '21 at 08:47

Ayush Saini

180
5

1

Can you explain how to do this? I still can't find an example. – Dragos Rachieru May 25 '21 at 06:24

score 8 · Answer 3 · answered Jun 14 '21 at 07:16

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.

score 0 · Answer 4 · edited Oct 09 '21 at 13:09

0

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.

edited Oct 09 '21 at 13:09

Victor Lee

2,467
3
19
37

answered Oct 09 '21 at 09:37

Patrice Mulindi

1
3

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

4 Answers4