Rows in a Multi Column ListView are not properly ordered while Scrolling: Android

Question

I've populated the data into a multi column ListView from firebase database.

I've extended BaseAdapter class for getting getting this view as shown in below figures.

Why does the item positions change while scrolling ?

Rows are getting aligned up and down when scrolled. This is the scenario:

Scrolled a bit down... ( Looks fine! )

Scrolling...

( The records were not displayed in the order, as you can see they are getting changed every time I scroll through the list. )

What can be the reason for this? Can anyone explain?

Code for Adapter class:

    public class ReportAdapter extends BaseAdapter {

    public ArrayList<HashMap<String, String>> list;
    Activity activity;
    TextView childOneNameColumn, childTwoNameColumn, childThreeNameColumn;
    TextView checkInColumn;
    TextView parentCheckInColumn;
    TextView checkOutColumn;
    TextView parentCheckOutColumn;
    TextView familyNameColumn;


    public ReportAdapter(Activity activity, ArrayList<HashMap<String, String>> list) {
        super();
        this.activity = activity;
        this.list = list;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder viewHolder;

        LayoutInflater inflater = activity.getLayoutInflater();

        if (convertView == null) {
            convertView = inflater.inflate(R.layout.column_row, parent, false);
            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);

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

        HashMap<String, String> map = list.get(position);
        familyNameColumn.setText(map.get(FAMILY_NAME_COLUMN));
        childOneNameColumn.setText(map.get(CHILD_ONE_NAME_COLUMN));
        childTwoNameColumn.setText(map.get(CHILD_TWO_NAME_COLUMN));
        childThreeNameColumn.setText(map.get(CHILD_THREE_NAME_COLUMN));
        checkInColumn.setText(map.get(CHECKIN_COLUMN));
        parentCheckInColumn.setText(map.get(PARENT_CHECKIN_COLUMN));
        checkOutColumn.setText(map.get(CHECKOUT_COLUMN));
        parentCheckOutColumn.setText(map.get(PARENT_CHECKOUT_COLUMN));

        return convertView;
    }

    private class ViewHolder {

        public ViewHolder(View view) {
            childOneNameColumn = (TextView) view.findViewById(R.id.child1NameColumn);
            childTwoNameColumn = (TextView) view.findViewById(R.id.child2NameColumn);
            childThreeNameColumn = (TextView) view.findViewById(R.id.child3NameColumn);
            checkInColumn = (TextView) view.findViewById(R.id.checkInColumn);
            parentCheckInColumn = (TextView) view.findViewById(R.id.parentCheckInColumn);
            checkOutColumn = (TextView) view.findViewById(R.id.checkOutColumn);
            parentCheckOutColumn = (TextView) view.findViewById(R.id.parentCheckOutColumn);
            familyNameColumn = (TextView) view.findViewById(R.id.familyNameColumn);
        }
    }
}

Layout column_row.xml:

<?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:padding="10dp">


    <LinearLayout
        android:id="@+id/linearLayout5"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/familyNameColumn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.8"
            android:textColor="@color/colorBlack" />

        <TextView
            android:id="@+id/child1NameColumn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5" />

        <TextView
            android:id="@+id/child2NameColumn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5" />

        <TextView
            android:id="@+id/child3NameColumn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5" />

        <TextView
            android:id="@+id/checkInColumn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textColor="@color/colorGreen" />

        <TextView
            android:id="@+id/parentCheckInColumn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.7" />

        <TextView
            android:id="@+id/checkOutColumn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textColor="@color/colorGreen" />

        <TextView
            android:id="@+id/parentCheckOutColumn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.7" />

    </LinearLayout>
</RelativeLayout>

ListView properties:

<ListView
    android:id="@+id/reportListView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="40dp"
    android:transcriptMode="alwaysScroll" />

Answer 1

Better use a ViewHolder for long lists.

Anyway, you wrongly set views. In a ListView you should manage both branches, whether convertView == null or not. When convertView != null you also have to set views.

So, if you don't want to create a ViewHolder, write:

if (convertView == null) {
    convertView = inflater.inflate(R.layout.column_row, parent, false);
}
childOneNameColumn = (TextView) convertView.findViewById(R.id.child1NameColumn);
childTwoNameColumn = (TextView) convertView.findViewById(R.id.child2NameColumn);
...

Also try to name variables with lowercase.

Answer 2

The main reason for messed up rows are that you are not setting the text at the correct TextView objects.

You have 8 TextViews each row. That means, for all the rows showing on the screen, they each has 8 TextView objects.

For example, if you have 10 rows on screen, then you will have 10 individual copies of those 8 TextView.

You can use ViewHolder. The main purpose for the View Holder Pattern is to eliminate the need to call findViewById every time and that will give you better performance.