Using two different layouts for child items in ExpandableListView

Question

I'm trying to do the ExpandableListView to use two different layouts depending on item type. At this time I made basic functionality except one thing: after selecting a group in the listview, the child item's text is displayed wrong (text of different items is mixed)

My adapter source code is following:

SimpleExpandableListAdapter adapter = new SimpleExpandableListAdapter(
            this,
            groupData,
            com.oleg.mart.foreign.R.layout.group_row,
            groupFrom,
            new int[] { com.oleg.mart.foreign.R.id.Group },
            childData,
            R.layout.simple_list_item_1,
            childFrom,
            childTo)
{
    @Override
    public int getChildTypeCount() {
        return 2;
    }

    /*@Override
    public int getChildrenCount(int groupPosition)
    {
        return childData.get(groupPosition).size();
    } */

    @Override
    public int getChildType(int groupPosition, int childPosition)
    {
        int result = 0;
        if (childPosition == getChildrenCount(groupPosition) - 1)
            result = 1;

        return result;
    }

    @Override
    public View getChildView (
            int groupPosition, int childPosition, 
            boolean isLastChild, 
            View convertView, ViewGroup parent)
    {
        if (convertView == null) {
            TextView textView = null;
            LayoutInflater inflater = (LayoutInflater)getSystemService(getBaseContext().LAYOUT_INFLATER_SERVICE);
            int itemType = getChildType(groupPosition,childPosition);
            String myText = childData.get(groupPosition).get(childPosition).get("chapter");

            switch (itemType) {
                case 0:
                    convertView = inflater.inflate(com.oleg.mart.foreign.R.layout.child_row_notlast, null);
                    textView = (TextView)convertView.findViewById(com.oleg.mart.foreign.R.id.NChild);
                    textView.setPadding(30,20,30,20);
                    textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 15);
                    textView.setText(Html.fromHtml(myText));
                    break;
                case 1:
                    convertView = inflater.inflate(com.oleg.mart.foreign.R.layout.child_row, null);
                    textView = (TextView)convertView.findViewById(com.oleg.mart.foreign.R.id.Child);
                    textView.setPadding(30,20,30,20);
                    textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 15);
                    textView.setText(Html.fromHtml(myText));
                    break;
            }
        }
        return convertView;
    }
};

As you can see I'm trying to set a different style on the last child item. What could be wrong?

Right getChildView method:

TextView textView = null;
String myText = null;
myText = childData.get(groupPosition).get(childPosition).get("chapter");

if (convertView == null) {
    LayoutInflater inflater = (LayoutInflater)getSystemService(getBaseContext().LAYOUT_INFLATER_SERVICE);
    int itemType = getChildType(groupPosition,childPosition);


    switch (itemType) {
        case 0:
            convertView = inflater.inflate(com.oleg.mart.foreign.R.layout.child_row_notlast, null);
            break;
        case 1:
            convertView = inflater.inflate(com.oleg.mart.foreign.R.layout.child_row, null);
            break;
    }
}

textView = (TextView)convertView.findViewById(com.oleg.mart.foreign.R.id.NChild);
textView.setPadding(30,20,30,20);
textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 15);
textView.setText(Html.fromHtml(myText));

return convertView;

Simmons

Answer 1

I'm pretty sure that you are not returning the good child values when convertView != null on your getChildView method. Try to set your values after your condition, like that :

TextView textView = null;

if (convertView == null) {
     LayoutInflater inflater = (LayoutInflater)getSystemService(getBaseContext().LAYOUT_INFLATER_SERVICE);
     int itemType = getChildType(groupPosition,childPosition);
     String myText = childData.get(groupPosition).get(childPosition).get("chapter");

     switch (itemType) {
         case 0:
             convertView = inflater.inflate(com.oleg.mart.foreign.R.layout.child_row_notlast, null);
             break;
         case 1:
             convertView = inflater.inflate(com.oleg.mart.foreign.R.layout.child_row, null);
             break;
    }
}

textView = (TextView)convertView.findViewById(com.oleg.mart.foreign.R.id.NChild);
textView.setPadding(30,20,30,20);
textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 15);
textView.setText(Html.fromHtml(myText));

If you still have a problem with that, please put a comment on my answer to tell me and I will see what I can do.

Theatricalize

Thank You very much for quick and quality answer! – Simmons

Didn't this create a problem? What if convertView is not null? How will we know which layout that is (Assuming there is different ID's in different layouts) – Maker

It depends what you have, but indeed, if you are managing different item view types with different content, you have to check the state of your convert view. One common way to do that is to use "setTag" and "getTag" on the convertView. In my answer, i'm expecting to have the id "com.oleg.mart.foreign.R.id.NChild" on both layouts com.oleg.mart.foreign.R.layout.child_row_notlast and com.oleg.mart.foreign.R.layout.child_row. – Chaqueta

@Sebastien how this solution will work in case of ViewHolder.? – Auxochrome

Answer 2

Use HeterogeneousExpandableList . (https://developer.android.com/reference/android/widget/HeterogeneousExpandableList.html) It provides feature to have different header/child views in expandable list view.and also maintains its reuse.

Zenobia