Android ListView items overlap while scrolling

Question

I have implemented a ListView in my application using a custom implementation of CursorAdapter. My problem is, that whenever I fling to scroll quickly to the bottom of the list (right after launching the application), I sometimes end up with all the ListView items drawn overlapping each other. If I scroll back up or touch one of the items, they become properly arranged.

Here is how it looks after I quickly scroll down : https://i.stack.imgur.com/cTcfD.png

Here is how it looks when I am select-ing one of the items : https://i.stack.imgur.com/ZTRSt.png

Here is the XML for my ListView :

<ListView
        android:id="@+id/all_reminders_list"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:layout_alignParentLeft="true"
        android:clickable="true"
        android:dividerHeight="1.0sp"
        android:animateLayoutChanges="true">

Here's the newView(..) method of my custom CursorAdapter :

public View newView(Context context, Cursor cursor, ViewGroup parent) {
    LayoutInflater inflater = LayoutInflater.from(parent.getContext());
    View view = inflater.inflate(R.layout.view_list_item, parent, false);
    return view;
}

And this is the bindView(..) method :

    public void bindView(View view, Context context, Cursor cursor) {

        TextView whatTextView = (TextView) view.findViewById(R.id.item_what_text);
        whatTextView.setText(cursor.getString(1));
        TextView whenTextView = (TextView) view.findViewById(R.id.item_when_text);


        if(cursor.getInt(9) != 0) // DONE_FLAG = 1 (completed)
        {
            //Arrow visibility
            ImageView arrow = (ImageView)view.findViewById(R.id.list_item_arrow);
            arrow.setVisibility(View.INVISIBLE);

            //Text color
            whatTextView.setTextColor(Color.LTGRAY);
            whenTextView.setTextColor(Color.LTGRAY);

            //WHEN text
            whenTextView.setText(TimeCalculationHelper.getCompletedTimeString(cursor.getLong(2)));
        }
        else // DONE_FLAG = 0
        {
            //Arrow visibility
            ImageView arrow = (ImageView)view.findViewById(R.id.list_item_arrow);
            arrow.setVisibility(View.VISIBLE);

            //Text color
            whatTextView.setTextColor(Color.BLACK);
            whenTextView.setTextColor(Color.BLACK);

            //WHEN text
            whenTextView.setText(TimeCalculationHelper.getTimeRemainingString(cursor.getLong(2)));


        }
}

I've also noticed that I have been able to replicate it only when my device (Galaxy S2) is in power saving mode. Is there something I should be doing differently here? Thanks in advance!

EDIT : Including the list item's layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingLeft="2dp">

<TextView android:id="@+id/item_what_text"
          android:lines="1"
          android:maxLines="2"
          android:textSize="22dp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:paddingTop="3dp"/>

<TextView android:id="@+id/item_when_text"
          android:lines="1"
          android:maxLines="1"
          android:textSize="14dp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="13 minutes"
          android:paddingBottom="2dp"
          android:layout_below="@+id/item_what_text"/>

<ImageView
    android:id="@+id/list_item_arrow"
    android:src="@drawable/next"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"/>


</RelativeLayout>

Could you post your list item's layout? – Michał Z. Feb 07 '13 at 07:15 — Michał Z., Feb 07 '13 at 07:15
@MichałZ. I've included it now. – Pritin Tyagaraj Feb 07 '13 at 07:22 — Pritin Tyagaraj, Feb 07 '13 at 07:22

score 5 · Answer 1 · edited Aug 14 '13 at 17:44

5

I also faced the same problem, with List items in my ListView overlapping each other whilst scrolling.

My fix: I just specified a background for the parent layout that contained the ListView in question. Previously it was transparent.

edited Aug 14 '13 at 17:44

Robert Harvey

178,213
47
333
501

answered Mar 08 '13 at 04:19

Pavan Tilak

153
1
1
7

Can u write ur xml here. – Pratik Butani Apr 25 '14 at 05:19

score 3 · Answer 2 · edited Jul 19 '13 at 10:42

For solving this ,i have one more solution:

I faced problem by using this layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"    
    >       
        <ListView
            android:id="@+id/list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:scrollbars="none"            
            android:paddingTop="4dip"   
            android:dividerHeight="0dp"
            android:divider="@null"   
            android:cacheColorHint="#00000000"
            android:listSelector="@color/transprent_editbox"
            android:focusableInTouchMode="false" />           
</RelativeLayout>

In order to solve that Problem,i just did few modifications on Above layout,those are: 1)Changed top layout from Relative to Linear Layout. 2)Put my ListView in other Relative Layout .. i did like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"    
    android:orientation="vertical" >
        <RelativeLayout        
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"       
            android:orientation="vertical" >
        <ListView
            android:id="@+id/list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            android:scrollbars="none"            
            android:paddingTop="4dip"   
            android:dividerHeight="0dp"
            android:divider="@null"   
            android:cacheColorHint="#00000000"
            android:listSelector="@color/transprent_editbox"
            android:focusableInTouchMode="false" />
        </RelativeLayout>
</LinearLayout>

After using this,my problem is solved.

user2242419 · Answer 3 · 2013-04-04T22:51:49.763

I had the same problem and found it was caused by setting the animateLayoutChanges attribute to true on the listview.

Unfortunately I lose the animation of the listview by removing it but at least it draws properly when scrolling fast.

Giving the parent layout a background also appears to fix the issue, as mentioned by Pavan. Will experiment and change my answer if I discover issues with the background change.

score 0 · Answer 4 · answered Feb 07 '13 at 08:30

0

1. in my opinion, height is wrap_content because listview is restore row 2. other opinion is write this code android:cacheColorHint="#00000000" in ListView

answered Feb 07 '13 at 08:30

user2049877

1

1

Sorry, that doesn't help at all. – Pritin Tyagaraj Feb 07 '13 at 08:58

score 0 · Answer 5 · answered Feb 13 '18 at 13:29

0

I also faced the same problem and found that animateLayoutChanges attribute causing the problems.

So i changed

android:animateLayoutChanges="true"

to

android:animateLayoutChanges="false"

and it worked.

answered Feb 13 '18 at 13:29

King of Masses

18,405
4
60
77

Android ListView items overlap while scrolling

5 Answers5

Linked