CODEWITHSUNDEEP
androidandroid-listview
Pritin Tyagaraj
Pritin Tyagaraj

Reputation: 93

Android ListView items overlap while scrolling

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.sstatic.net/cTcfD.png

Here is how it looks when I am select-ing one of the items : https://i.sstatic.net/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>

Upvotes: 2

Views: 4549

Answers (5)

King of Masses
King of Masses

Reputation: 18765

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.

Upvotes: 0

Pavan Tilak
Pavan Tilak

Reputation: 153

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.

Upvotes: 5

Pavan Tilak
Pavan Tilak

Reputation: 153

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.

Upvotes: 3

user2242419
user2242419

Reputation: 31

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.

Upvotes: 3

user2049877
user2049877

Reputation: 1

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

Upvotes: 0

Related Questions