How to add a header icon for category titles in Android ExpandableListView

Question

Here is my expandablelistadapter:

public class ExpandableListAdapter extends BaseExpandableListAdapter {

private Context _context;
private List<String> _listDataHeader; // header titles
// child data in format of header title, child title
private HashMap<String, List<String>> _listDataChild;
private HashMap<String, List<String>> _listDataChildID;
public ExpandableListAdapter(Context context, List<String> listDataHeader,
        HashMap<String, List<String>> listChildData,HashMap<String, List<String>> listChildIDData) {
    this._context = context;
    this._listDataHeader = listDataHeader;
    this._listDataChild = listChildData;
    this._listDataChildID = listChildIDData;
}

@Override
public Object getChild(int groupPosition, int childPosititon) {
    return this._listDataChild.get(this._listDataHeader.get(groupPosition))
            .get(childPosititon);
}

public Object getChildrenID(int groupPosition, int childPosititon) {
    return this._listDataChildID.get(this._listDataHeader.get(groupPosition))
            .get(childPosititon);
}

@Override
public long getChildId(int groupPosition, int childPosition) {
    return childPosition;
}

@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);
    return convertView;
}

@Override
public int getChildrenCount(int groupPosition) {
    return this._listDataChild.get(this._listDataHeader.get(groupPosition))
            .size();
}

@Override
public Object getGroup(int groupPosition) {
    return this._listDataHeader.get(groupPosition);
}

@Override
public int getGroupCount() {
    return this._listDataHeader.size();
}

@Override
public long getGroupId(int groupPosition) {
    return groupPosition;
}

@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);
    return convertView;
}

@Override
public boolean hasStableIds() {
    return false;
}

@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
    return true;
}

}

When I add in activity

    **// get the listview
    expListView = (ExpandableListView) findViewById(R.id.lvExp);
    Drawable d = getResources().getDrawable(R.drawable.header_icon);
    expListView.setGroupIndicator(d);** 

It actually sets the same groupindicator for all groups however I want different icons for different groups. How shall I make changes to the adapter.

Answer 1

First define the expandable listview

    <ExpandableListView
    android:id="@+id/left_drawer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="start"
    android:background="#e5e5e5"
    android:choiceMode="singleChoice"
    android:divider="#000"
    android:dividerHeight="1dp" />

then an xml to define your groups of the expandable listview

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:orientation="vertical"
android:paddingLeft="40dp"
tools:context=".MainActivity" 
>
 <ImageView 
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:id="@+id/imgicon"

    />

<TextView
    android:id="@+id/textViewsub"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawablePadding="5dp"
    android:text="@string/hello_world"
    android:textSize="14sp"
    android:textStyle="bold"
    android:textColor="#000"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@+id/imgicon"
 >
</TextView>


<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/black" />

then in your adapter you can do this in the getGroupView() method Write the below code

ImageView imgicon = (ImageView) convertView.findViewById(R.id.imgicon); imgicon.setImageBitmap(bitmap);

hope this will solve your problem

New Added Code

Make an custom class with group title and group icon as the attributes

groups.java

public class Group {

public String string;
public Bitmap bitmap;
public final List<String> children = new ArrayList<String>();

public Group(String string,Bitmap bitmap){
    this.string = string;
    this.bitmap = bitmap;
}

}

Now in just use this class accordingly

use this class to initialize your group title and icon

and in the getGroupView() method do the following:

final groups group = (groups) getGroup(groupPosition);

textviewsub.setText(group.string); icon_img.setImageBitmap(group.bitmap)

Answer 2

The group indicator you can set on the ListView will always be applied to all elements. So to get the behavior you want you have to customize the layout of you list items to replicate the effect. Add an ImageView to the list items, and set the image programatically for each list item.