ListView items drawn on top of each other when scrolling (Android)

Question

In a fragment, I have a ListView that has a custom ParseQueryAdapter<T> . The problem may not have anything to do with Parse, although I'm not sure.

As I was testing my app, I noticed something very strange. When I would scroll down my ListView, all the visible ListView items would be drawn on top of the next ListView item as seen in the second image below.

The list initialized properly as such:

As you can see, in my list item layout, I have an ImageView ( ParseImageView to be specific) and a TextView. The TextView now displays some notes (don't mind the ID user_name_text_view ) and the ImageView displays a placeholder blank profile picture.

When I scrolled down, the list looked like:

Here's my list view layout named fragment_post_view_list_view :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/post_list_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

Here's my list item layout named list_item_post_view :

<?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">

    <com.parse.ParseImageView
        android:id="@+id/icon"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_alignParentLeft="true"
        android:background="@drawable/com_facebook_profile_picture_blank_square" />

    <TextView
        android:id="@+id/user_name_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/icon"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@color/link_blue" />

</RelativeLayout>

Here's my adapter named PostViewListViewAdapter :

public class PostViewListViewAdapter extends ParseQueryAdapter<Post> {
    // call superclass with a query to populate list view
    public PostViewListViewAdapter(Context context, final String[] postsObjectIds) {
        super(context, new ParseQueryAdapter.QueryFactory<Post>(){
            public ParseQuery<Post> create() {
                ParseQuery<Post> query = Post.getQuery();
                query.whereContainedIn("objectId", Arrays.asList(postsObjectIds));
                return query;
            }
        });
    }

    // this is similar to getView method in an adapter
    @Override
    public View getItemView(Post post, View v, ViewGroup parent) {
        if(v == null) {
            v = View.inflate(getContext(), R.layout.list_item_post_view, null);
        }

        super.getItemView(post, v, parent);
        TextView usernameTextView = (TextView) v.findViewById(R.id.user_name_text_view);
        usernameTextView.setText(post.getNotes()); // some string

        return v;
    }
}

How can I fix this problem?

Is this an issue with XML or Java ?

I was following the two tutorials from Parse and the example from the Parse docs :

• MealSpotting

• Parse Query Adapter

I set the adapter and ListView here:

View rootView = inflater.inflate(R.layout.fragment_post_view_list_view, container, false);
mPostsObjectIds = SOME_STRING[];

PostViewListViewAdapter adapter = new PostViewListViewAdapter(getActivity(), mPostsObjectIds);

ListView listView = (ListView) rootView.findViewById(R.id.post_list_view);
listView.setAdapter(adapter);

I've tried getting rid of the ParseImageView in my list item layout, but my TextViews still draw on top of each other when I scroll.

Edit:

I forgot to mention that the list items display on top of each other after an orientation change.

I tested this on my Galaxy S5 (Android version 4.4.2 and Parse 1.4.1).

In my Activity, I show the Fragment here (called PostViewListViewFragment ):

getSupportFragmentManager().beginTransaction().add(android.R.id.content, new PostViewListViewFragment()).commit();

Answer 1

Try below 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="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/post_list_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:scrollbars="none"    >

    </ListView>

</RelativeLayout >

Answer 2

Make Sure your adapter like this:

@Override
  public View getView(int position, View convertView, ViewGroup parent) {
    View rowView = convertView;
    // reuse views
    if (rowView == null) {
      LayoutInflater inflater = context.getLayoutInflater();
      rowView = inflater.inflate(R.layout.rowlayout, null);
      // configure view holder
      ViewHolder viewHolder = new ViewHolder();
      viewHolder.text = (TextView) rowView.findViewById(R.id.TextView01);
      rowView.setTag(viewHolder);
    }

    // fill data
    ViewHolder holder = (ViewHolder) rowView.getTag();
    String s = names[position];
    holder.text.setText(s);

    return rowView;
  }
} 

PS:You should watch this Google IO video about Listview,and here is the slides .

Answer 3

First create a ViewHolder class

static class ViewHolder {

        protected TextView usernameTextView;
    }

Then change your getItemView method like below

public View getItemView (Post post, View convertView , ViewGroup parent)
{

    ViewHolder viewHolder = null;

    if (convertView == null)
    {
        LayoutInflater inflator = context.getLayoutInflater();
        convertView = inflator.inflate(R.layout.list_item_post_view, null);
        viewHolder = new ViewHolder();
        viewHolder.usernameTextView = (TextView)convertView.findViewById(R.id.user_name_text_view);

        convertView.setTag(viewHolder);

        convertView.setTag(R.id.user_name_text_view, viewHolder.usernameTextView);


    }

    else
    {
        viewHolder = (ViewHolder) convertView.getTag();
    }


    viewHolder.usernameTextView.setText(post.getNotes()); // some string


    return convertView;


}

Answer 4

The problem seems to be in your list item layout -

Change it to this -

<?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">

    <com.parse.ParseImageView
        android:id="@+id/icon"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_alignParentLeft="true" />

    <TextView
        android:id="@+id/user_name_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/icon"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="@color/link_blue" />

</RelativeLayout>

Probably you have extra background for each list item set that is causing such effect. Alter and watch.

Hope this gives you idea!

Answer 5

尝试将列表视图的布局高度更改为match_parent。

Answer 6

Credit to @VedPrakash for helping me fix this.

In case it helps anyone, I fixed the problem by replacing the fragment not adding it. So I changed this line from :

getSupportFragmentManager().beginTransaction().add(android.R.id.content, new PostViewListViewFragment()).commit();

to :

getSupportFragmentManager().beginTransaction().replace(android.R.id.content, new PostViewListViewFragment()).commit();