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

Question

And is it possible to customize the child in expandable list?

Answer 1

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>