CODEWITHSUNDEEP
androidlistviewandroid-listview
mooongcle
mooongcle

Reputation: 4097

How to overlay rows of Android Listview

I am trying to implement the below Android ListView. The each yellow box represents one row of ListView. If you see the rows, each row is over lapped by previous and next row. I have searched Google, but I could not find any proper solutions. If anyone has clues, please let me know.

Thanks in advance.

enter image description here

Upvotes: 0

Views: 1540

Answers (2)

Anthony K
Anthony K

Reputation: 1

I got the same issue but I managed to find a solution

In the ListView in the xml you can set a negative dividerHeight, it works for me.

<ListView
...
android:dividerHeight="-5dp" />

I hope it can help someone :)

Upvotes: 0

Aleks G
Aleks G

Reputation: 57316

Think outside the box. Imagine this list not having the rows overlap, but just having diagonal lines on it. In your code, set the Listview's divider height to 0:

ListView listView = (ListView)findViewById(R.id.your_listview);
listView.setDivider(null);
listView.setDividerHeight(0);

Then create two drawables for the rows- one for odd rows, another for even rows:

enter image description here and enter image description here

(don't use these two images, as they are not properly/evenly sized, but create the ones for your specific list).

Then create an adapter for your list view - and in its getView method, set the corresponding background to your element:

@override
public void getView(int position, View convertView, ViewGroup parent) {
    MyView row;

    if(convertView == null) {
        row = (MyView)convertView;
    }
    else {
        row = ... //create your view - inflate or create in code
    }

    row.setBackgroundResource(position%2==1 ? R.drawable.row_odd : R.drawable.row_even);

    ...  //populate the rest of the row with whatever you need

    return row;
}

And voila! You get what the effect you need (note, on this schematic the black lines represent the boundaries between rows - these are for schematic purposes only - in your final result you will not have them):

enter image description here

Finally, please note that if you want highlight on your "rows" when an item is selected, you'll have to implement custom state change listeners, which would change the background of the cell that's being selected and also the ones above and below it as to create the proper visual effect.

Upvotes: 3

Related Questions