Expandable ListView Child return wrong view after scroll down

Question

I use Expandable Listview for displaying two group of content and the list is always expand like Picture A. I found a problem, when I run it on my device. When I run, it show just a half of the list like in Picture B, so I scroll down to see the rest of the list but what I get is some of child from the second group is come from first group, like in Picture C.

I have check my code and I think there's no error or problem. and this is my code

this the activity

public class MainActivity extends ActionBarActivity {

    ExpandableListView lv;
    ParentListAdapter listAdapter;
    List<HeaderObject> listDataHeader;
    List<OpiniObject> opini;
    List<OpiniObject> related;
    HashMap<HeaderObject, List<OpiniObject>> listDataChild;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        opini = new ArrayList<OpiniObject>();
        related = new ArrayList<OpiniObject>();

        lv = (ExpandableListView) findViewById(R.id.expandLV);

        prepareListData();
    }

    private void prepareListData() {

        listDataHeader = new ArrayList<HeaderObject>();
        listDataChild = new HashMap<HeaderObject, List<OpiniObject>>();

        HeaderObject itemData1 = new HeaderObject();
        itemData1.setOwner("Your Name");
        itemData1.setQuestion("Whats up");
        listDataHeader.add(itemData1);

        HeaderObject itemData2 = new HeaderObject();
        itemData2.setTitle("Related");
        listDataHeader.add(itemData2);

        opini.add(new OpiniObject("name 1","Lorem \n ipsum \n hahaha \n test \n data"));
        opini.add(new OpiniObject("name 2","content 2 \n jus \n test \n content"));
        opini.add(new OpiniObject("name 3","content 3 \n bla \n bla \n bla"));

        related.add(new OpiniObject("text 1"));
        related.add(new OpiniObject("text 2"));
        related.add(new OpiniObject("text 3"));
        related.add(new OpiniObject("text 4"));
        related.add(new OpiniObject("text 5"));
        related.add(new OpiniObject("text 6"));
        related.add(new OpiniObject("text 7"));
        related.add(new OpiniObject("text 8"));

        listDataChild.put(listDataHeader.get(0), opini); 
        listDataChild.put(listDataHeader.get(1), related);

        listAdapter = new ParentListAdapter(this, listDataHeader, listDataChild);
        lv.setAdapter(listAdapter);
    }
}

and this is my adapter

public class ParentListAdapter extends BaseExpandableListAdapter{

    private Context context;
    private List<HeaderObject> listDataHeader;
    private HashMap<HeaderObject, List<OpiniObject>> listDataChild;

    public ParentListAdapter(Context context,
            List<HeaderObject> listDataHeader,
            HashMap<HeaderObject, List<OpiniObject>> listDataChild) {
        super();
        this.context = context;
        this.listDataHeader = listDataHeader;
        this.listDataChild = listDataChild;
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        // TODO Auto-generated method stub
        return this.listDataChild.get(this.listDataHeader.get(groupPosition)).get(childPosition);
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        // TODO Auto-generated method stub
        return childPosition;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition,boolean isLastChild, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub

        if (convertView == null) {
            LayoutInflater infalInflater = (LayoutInflater) this.context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.listview2, null);
        }

        LinearLayout container = (LinearLayout) convertView.findViewById(R.id.containerOpini);
        TextView txtListChild = (TextView) convertView.findViewById(R.id.lblListItem);
        TextView txtUser = (TextView) convertView.findViewById(R.id.lblUserOpini);
        TextView txtOpini = (TextView) convertView.findViewById(R.id.lblIsiOpini);

        OpiniObject opini = (OpiniObject) getChild(groupPosition, childPosition);
        if(groupPosition==0){
            container.setVisibility(View.VISIBLE);
            txtListChild.setVisibility(View.GONE);
            txtUser.setText(opini.getName());
            txtOpini.setText(opini.getContent());
        }else{
            txtListChild.setText(opini.getText());
            txtListChild.setTypeface(null, Typeface.BOLD);
        }
        return convertView;
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        // TODO Auto-generated method stub
        return this.listDataChild.get(this.listDataHeader.get(groupPosition)).size();
    }

    @Override
    public Object getGroup(int groupPosition) {
        // TODO Auto-generated method stub
        return this.listDataHeader.get(groupPosition);
    }

    @Override
    public int getGroupCount() {
        // TODO Auto-generated method stub
        return this.listDataHeader.size();
    }

    @Override
    public long getGroupId(int groupPosition) {
        // TODO Auto-generated method stub
        return groupPosition;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub

        if (convertView == null) {
            LayoutInflater infalInflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.listview1, null);
        }

        ExpandableListView eLV = (ExpandableListView) parent;
        eLV.expandGroup(groupPosition);

        LinearLayout container = (LinearLayout) convertView.findViewById(R.id.PertanyaanHeader);
        TextView lblListHeader = (TextView) convertView.findViewById(R.id.lblListHeader);
        TextView lblOwner = (TextView) convertView.findViewById(R.id.lblUser);
        TextView lblQuestion = (TextView) convertView.findViewById(R.id.lblTanya);

        HeaderObject item = (HeaderObject) getGroup(groupPosition);

        if(groupPosition==0){
            container.setVisibility(View.VISIBLE);
            lblListHeader.setVisibility(View.GONE);
            lblOwner.setText(item.getOwner());
            lblQuestion.setText(item.getQuestion());
        }else{
            lblListHeader.setText(item.getTitle());
            lblListHeader.setTypeface(null, Typeface.BOLD);
        }

        return convertView;
    }

    @Override
    public boolean hasStableIds() {
        // TODO Auto-generated method stub
        return false;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        // TODO Auto-generated method stub
        return true;
    }

}

Can anyone help me? Maybe I missed something that can be very important?

Thank you.

Answer 1

You have this result because of android recycling mechanism.

To solve this, just change this code:

if(groupPosition==0){
      container.setVisibility(View.VISIBLE);
      txtListChild.setVisibility(View.GONE);
      txtUser.setText(opini.getName());
      txtOpini.setText(opini.getContent());
}else{
      txtListChild.setText(opini.getText());
      txtListChild.setTypeface(null, Typeface.BOLD);
}

to this:

if(groupPosition==0){
      container.setVisibility(View.VISIBLE);
      txtListChild.setVisibility(View.GONE);
      txtUser.setText(opini.getName());
      txtOpini.setText(opini.getContent());
}else{
      container.setVisibility(View.GONE);      // changes here
      txtListChild.setVisibility(View.VISIBLE);// changes here
      txtListChild.setText(opini.getText());
      txtListChild.setTypeface(null, Typeface.BOLD);
}