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!

Unclear

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.

Lobby

its not working.... there is no change if we set the 9 patch image ..... one solution i apply is that make the arrow image of the same height as background of where it display..... – Shellfish

@PavanKumar it depends on what size you do need. :) – Hawking

Worked fine for me. Besides, I found a link that might help clarify things: hrupin.com/2012/08/… – Dejecta

Answer 2

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

Maltz

"only a stretchable pixel at both top and bottom", does it mean there is no stretchable pixel on left/right? – Unclear

also, my icons is a solid circle with a triangle inside, it looks like impossible to make this to be a nine patch. – Unclear

when I do not use my own icon, the Android's built-in icon is not stretched, so I suppose there is a way to solve the problem. – Unclear

to see an example, search for expander_ic_maximized.9 in the Android resources folder. That is the icon that Android uses by default for expandable list and it has the pixels that I mentioned. – Maltz

thanks, it looks like expander_ic_maximized.9 is a nine patch image, but in my case, it is impossible to make it nine patch, also, even it is nine patch, it appears smaller than my stretched icon. – Unclear

As "it always stretches", so I just accept your answer, thanks! – Unclear

Answer 3

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

Quevedo