ListView changes records while scrolling

Question

This is how I see my screen the when the page loads. But when I start scrolling through the list, all my records start to change and it becomes really weird. I really don't know why, any suggestions?

This is the screen after I scroll through my ListView up and down.

Adapter:

private class TechnicalDocumentationAdapter extends
        ArrayAdapter<TechnicalDocumentation> {

    private ArrayList<TechnicalDocumentation> items;

    public TechnicalDocumentationAdapter(Context context,
            int textViewResourceId, ArrayList<TechnicalDocumentation> items) {
        super(context, textViewResourceId, items);
        this.items = items;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;
        if (v == null) {
            LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = vi.inflate(R.layout.technicaldocumentationrow, null);
        }
        TechnicalDocumentation technicalDocumentation = items.get(position);
        if (technicalDocumentation != null) {
            TextView tt = (TextView) v.findViewById(R.id.TDRdate);
            TextView bt = (TextView) v.findViewById(R.id.TDRobjectTypeCode);
            TextView ct = (TextView) v
                    .findViewById(R.id.TDRperformedAction);
            TextView at = (TextView) v.findViewById(R.id.TDRobjectName);

            tt.setText(tt.getText() + "\n " + technicalDocumentation.date);
            bt.setText(bt.getText() + "\n "
                    + technicalDocumentation.objectTypeCode);
            ct.setText(ct.getText() + "\n "
                    + technicalDocumentation.performedAction);
            at.setText(at.getText() + "\n "
                    + technicalDocumentation.objectName);

        }
        return v;
    }
}

Answer 1

Something that worked for me was this:

View row = convertView;
ComponentsHolder holder = null;
**row = null;** // Added this line to fix the problem. 

if (row == null) {...}

But this solution made the navigation much slower.

EDIT

This was not the correct solution.

The way to go was to clean all views before assigning the new values.

if (row == null) {

LayoutInflater inflater = ((Activity) context).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);
holder = new ComponentsHolder();
holder.id = (TextView) row.findViewById(R.id.id);
holder.name = (TextView) row.findViewById(R.id.name);
holder.description = (TextView) row.findViewById(R.id.description);
holder.price = (TextView) row.findViewById(R.id.price);
holder.photo = (ImageView) row.findViewById(R.id.photo);
holder.add = (Button) row.findViewById(R.id.btnAddDish);
row.setTag(holder);
} else {
holder = (ComponentsHolder) row.getTag();
holder.id.setText("");
holder.name.setText("");
holder.description.setText("");
holder.price.setText("");
holder.photo.setVisibility(View.GONE); //This was the real problem, if the image was not empty or gone, the view gone crazy
}

Answer 2

Android ListView recycles views. At the moment the problem is that your adapter always appends new data to the TextViews. Now every time a new row is shown, you are appending the data from the new row to the old data.

To solve this, you should clear the TextViews from the old data if you are using the convertView parameter.