List view with custom view items with partially overlaps (Android)

Question

I want to implement a list in Android that contains some customized views. My problem is that I want the the views will be put one after the other with a little overlap between them. like in the following schema: enter image description here

I also want to control this overlap in such a way that when the user clicks on one of the items, they will move apart from each other.

I tried to extend ListView but it seems to be very obscured, any suggestions?

Edit: This can be more clear:

enter image description here

I did it by setting the divider height to -50dp. this is exactly what I want to achieve, but somehow it doesn't reflect on my app.

score 4 · Accepted Answer · answered Nov 27 '12 at 07:29

4

I managed to achieve this by using scroll view with a single relative layout as a child. I then dynamically place the views by defining a rule and margin:

for (int i = 0; i < 30; i++) {
        TextView tv = new TextView(context);
        tv.setText("Text \n Text" + i);

        tv.setBackgroundColor(i % 2 == 0 ? Color.RED : Color.GREEN);

        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        lp.leftMargin = 0;
        lp.topMargin = (i * 45);
        rl.addView(tv, lp);
}

Later, you can control the positioning of the sub-views by changing their y value (for example: if you want to add animation).

This is the final result:

Layout containing overlapping items

answered Nov 27 '12 at 07:29

Daniel L.

5,060
10
36
59

1

ScrollView doesn't support view recycling. So, if performance is a factor, it's pretty useless for several views. – Saket Mar 18 '14 at 11:46
I've implemented views recycling for my ScrollView based view. – Daniel L. Mar 18 '14 at 14:34
1

@DanielL.would you please like to share your code on github or anywhere you like? – AZ_ Aug 21 '14 at 09:53

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

This can probably be achieved by using the Camera.setTranslate function. See Android: Vertical ListView with overlaped rows and Android: vertical 3d listview for similar questions (with solutions)

edited May 23 '17 at 11:58

Community

1
1

answered Nov 27 '12 at 07:37

Marc Van Daele

2,856
1
26
52

List view with custom view items with partially overlaps (Android)

2 Answers2

Linked