Expandablelistview different images for groups and childs

Question

I have basic expandablelistview and would like to know how to make each child and group have different images. Do I need to somehow modify expandable list adapter? Any help, thoughts, comments will be appreciated. Thanks :)

MainActivity:

    public class MainActivity extends Activity{
           .....
public static final Integer[] images = {
            R.drawable.vegetables,
            R.drawable.fruits,
            R.drawable.drinks,
            R.drawable.dessert

        };

            @Override
            protected void onCreate(Bundle savedInstanceState) {


        }

}

My adapter

public class ExpandableListAdapter extends BaseExpandableListAdapter{


    @Override
    public View getChildView(int groupPosition,final int childPosition, boolean isLastChild, View convertView,
            ViewGroup parent) {

         final String childText = (String) getChild(groupPosition, childPosition);

          if (convertView == null) {
                LayoutInflater infalInflater = (LayoutInflater) this._context
                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = infalInflater.inflate(R.layout.list_item, null);
            }
          TextView txtListChild = (TextView) convertView
                    .findViewById(R.id.lblListItem);
          txtListChild.setText(childText);

          ImageView imgListChild= (ImageView) convertView
                  .findViewById(R.id.IV_childImage);

// I could store images somehow in two dimensional array and then depending on that draw their reference id.
//          imgListChild.setImageResource();

        return convertView;
    }


    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
            View convertView, ViewGroup parent) {


         String headerTitle = (String) getGroup(groupPosition);
            if (convertView == null) {
                LayoutInflater infalInflater = (LayoutInflater) this._context
                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = infalInflater.inflate(R.layout.list_group, null);
            }

            TextView lblListHeader = (TextView) convertView
                    .findViewById(R.id.lblListHeader);
            lblListHeader.setTypeface(null, Typeface.BOLD);
            lblListHeader.setText(headerTitle);
            ImageView imgListGroup= (ImageView) convertView
                    .findViewById(R.id.IV_group);

            imgListGroup.setImageResource(MainActivity.images[groupPosition]);

            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;
    }










}

Answer 1

Add an ImageView in list_group and list_item xml files and set image to those ImageViews in your Adapter Class.

Like you are setting the text to TextView, in the same way you can set the image to ImageView

TextView txtListChild = (TextView) convertView
                    .findViewById(R.id.lblListItem);
          txtListChild.setText(childText);
ImageView imgListChild = (ImageView) convertView
                    .findViewById(R.id.image);

            imgListChild.setImageResource(R.drawable.imagename);

and your xml file should be

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/lblListHeader"
    android:layout_width="wrap_content"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:layout_marginLeft="8dp"
    android:drawableRight="@drawable/ic_launcher"
    android:gravity="center_horizontal"
    android:paddingLeft="32dp"
    android:paddingTop="8dp"
    android:text="Test"
    android:textSize="20sp"
    android:textAlignment="textEnd"
    android:textStyle="bold" >


</CheckedTextView> 

    <ImageView 
    android:id="@+id/IV_group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"   
    android:contentDescription="group image"    

        />
</LinearLayout>

EDIT:

There are many ways to store image paths\ Resource IDs.The simplest way is to store them in ArrayList and HashMap.

Declare a new ArrayList and HashMap to store Resource IDs for Group and Child items.

public List<Integer> groupImages;
public HashMap<Integer, List<Integer>> childImages;

populate it in your prepareListData() function.

groupImages= new ArrayList<Integer>();
         groupImages.add(R.drawable.vegetables);
         groupImages.add(R.drawable.fruits);
         groupImages.add(R.drawable.drinks);
         groupImages.add(R.drawable.deserts);

         childImages = new HashMap<Integer, List<Integer>>();
         List<Integer> vegetablesi = new ArrayList<Integer>();
         vegetablesi.add(R.drawable.Tomatoes);
         vegetablesi.add(R.drawable.Potatoes);
         vegetablesi.add(R.drawable.Cucumbers);
         vegetablesi.add(R.drawable.Pumpkins);
         vegetablesi.add(R.drawable.Peppers);
         vegetablesi.add(R.drawable.Onions);
         vegetablesi.add(R.drawable.Garlic);

         List<Integer> fruitsi = new ArrayList<Integer>();
         fruitsi.add(R.drawable.Strawberries);
         fruitsi.add(R.drawable.Blackcurrants);
         fruitsi.add(R.drawable.Redcurrant);
         fruitsi.add(R.drawable.Gooseberry);
         fruitsi.add(R.drawable.Kiwifruit);
         fruitsi.add(R.drawable.Grape);


         List<Integer> drinksi = new ArrayList<Integer>();
         drinksi.add(R.drawable.Vodka);
         drinksi.add(R.drawable.Milk);
         drinksi.add(R.drawable.Water);
         drinksi.add(R.drawable.CocaCola);
         drinksi.add(R.drawable.Sprite);


         List<Integer> desertsi = new ArrayList<Integer>();
         desertsi.add(R.drawable.Vodka);
         desertsi.add(R.drawable.Milk);
         desertsi.add(R.drawable.Water);
         desertsi.add(R.drawable.CocaCola);
         desertsi.add(R.drawable.Sprite);


         childImages.put(groupImages.get(0), vegetablesi);
         childImages.put(groupImages.get(1), fruitsi);
         childImages.put(groupImages.get(2), drinksi);
         childImages.put(groupImages.get(3), desertsi);

In getGroupView and getChildView functions you can access those images in this way:

@Override
    public View getGroupView(int groupPosition, boolean isExpanded,
            View convertView, ViewGroup parent) {
         String headerTitle = (String) getGroup(groupPosition);
            if (convertView == null) {
                LayoutInflater infalInflater = (LayoutInflater) this._context
                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = infalInflater.inflate(R.layout.list_group, null);
            }

            TextView lblListHeader = (TextView) convertView
                    .findViewById(R.id.lblListHeader);
            lblListHeader.setTypeface(null, Typeface.BOLD);
            lblListHeader.setText(headerTitle);

            ImageView imageView = (ImageView) convertView.findViewById(R.id.IV_group);
            int imageId = this.groupImages.get(groupPosition);
            imageView.setImageResource(imageId);

            return convertView;
    }





@Override
    public View getChildView(int groupPosition,final int childPosition, boolean isLastChild, View convertView,
            ViewGroup parent) {

         final String childText = (String) getChild(groupPosition, childPosition);

          if (convertView == null) {
                LayoutInflater infalInflater = (LayoutInflater) this._context
                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = infalInflater.inflate(R.layout.list_item, null);
            }
          TextView txtListChild = (TextView) convertView
                    .findViewById(R.id.lblListItem);
          txtListChild.setText(childText);

          ImageView imageView = (ImageView) convertView.findViewById(R.id.IV_child);
          int imageId = this.childImages.get(this.groupImages.get(groupPosition)).get(childPosition);
          imageView.setImageResource(imageId);

        return convertView;
    }

Answer 2

In the getChildView-method you can identify the actual sublistitem through the signature of the method - the variables childPosition and groupPosition.

And from that you can use a switch-structure to load the relevant images.