How to add image in expandable List in parent in android?

Working with SimpleExpandableListAdapter is anything but simple. Here’s some code that should get you started, assuming that you’re using ExpandableListActivity.

In this example, we use the standard android.R.layout.simple_expandable_list_item_1 for our group header view, but we use our own custom layout for the children.

    // Construct Expandable List
    final String NAME = "name";
    final String IMAGE = "image";
    final LayoutInflater layoutInflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    final ArrayList<HashMap<String, String>> headerData = new ArrayList<HashMap<String, String>>();

    final HashMap<String, String> group1 = new HashMap<String, String>();
    group1.put(NAME, "Group 1");
    headerData.add( group1 );

    final HashMap<String, String> group2 = new HashMap<String, String>();
    group2.put(NAME, "Group 2");
    headerData.add( group2);


    final ArrayList<ArrayList<HashMap<String, Object>>> childData = new ArrayList<ArrayList<HashMap<String, Object>>>();

    final ArrayList<HashMap<String, Object>> group1data = new ArrayList<HashMap<String, Object>>();
    childData.add(group1data);

    final ArrayList<HashMap<String, Object>> group2data = new ArrayList<HashMap<String, Object>>();
    childData.add(group2data);


    // Set up some sample data in both groups
    for( int i=0; i<10; ++i) {
        final HashMap<String, Object> map = new HashMap<String,Object>();
        map.put(NAME, "Child " + i );
        map.put(IMAGE, getResources().getDrawable(R.drawable.icon));
        ( i%2==0 ? group1data : group2data ).add(map);
    }

    setListAdapter( new SimpleExpandableListAdapter(
            this,
            headerData,
            android.R.layout.simple_expandable_list_item_1,
            new String[] { NAME },            // the name of the field data
            new int[] { android.R.id.text1 }, // the text field to populate with the field data
            childData,
            0,
            null,
            new int[] {}
        ) {
            @Override
            public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
                final View v = super.getChildView(groupPosition, childPosition, isLastChild, convertView, parent);

                // Populate your custom view here
                ((TextView)v.findViewById(R.id.name)).setText( (String) ((Map<String,Object>)getChild(groupPosition, childPosition)).get(NAME) );
                ((ImageView)v.findViewById(R.id.image)).setImageDrawable( (Drawable) ((Map<String,Object>)getChild(groupPosition, childPosition)).get(IMAGE) );

                return v;
            }

            @Override
            public View newChildView(boolean isLastChild, ViewGroup parent) {
                 return layoutInflater.inflate(R.layout.expandable_list_item_with_image, null, false);
            }
        }
    );

And inside your custom child layout, named expandable_list_item_with_image.xml:

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right" />

</RelativeLayout>

Leave a Comment