Android ExpandableListView indicator/icon always stretched

Question

I use my own icon image as indicator for ExpandableListView, but the icon seems to be stretched, I tried to put the image file in /drawable and /drawable-hdpi with no luck. If I do not use my own icon, the built-in Android one looks nice, so I wonder is there any restriction on image dimension, or is there anything I've done wrong?

Thanks!

Answer 1

Whatever image you are using as your group indicator, make it a 9 patch (xxx.9.png) image and set its stretchable areas to around the border pixels (which probably may be transparent). It will prevent stretching of image from the middle.

Answer 2

If you want to do this all via coding, without using a different image, this is how I got this working.

(1) Setting the group indicator to null

(2) Including my custom group indicator in the group Layout.

(3) Having an groupClickListener that changes the state of you indicator.

Code Snippets :

(1) mListView.setGroupIndicator(null);

(2) Included my indicator in the group layout.

   <ImageView
    android:id="@+id/help_group_indicator"
    android:layout_width="@dimen/help_group_indicator_dimension"
    android:layout_height="@dimen/help_group_indicator_dimension"
    android:layout_marginTop="@dimen/help_group_indicator_dimension"
    android:src="@drawable/down_icon" />

(3)

mListView.setOnGroupClickListener(new OnGroupClickListener() {
    @Override
    public boolean onGroupClick(ExpandableListView parent, View clickedView, int groupPosition, long rowId) {
        ImageView groupIndicator = (ImageView) clickedView.findViewById(R.id.help_group_indicator);
        if (parent.isGroupExpanded(groupPosition)) {
            parent.collapseGroup(groupPosition);
            groupIndicator.setImageResource(R.drawable.down_icon);
        } else {
            parent.expandGroup(groupPosition);
            groupIndicator.setImageResource(R.drawable.up_icon);
         }
        return true;
    }
});

Answer 3

The expandable list is a pain. It always stretches the icons. An easy solution is to use a nine patches images which contains only a stretchable pixel at both top and bottom. Thus only those two pixels are stretched and the rest of your image remains unmodified.

hope this make sense