8

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!

Heuristic
  • 5,087
  • 9
  • 54
  • 94

3 Answers3

18

group_indicator.9.png

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.

Himanshu Likhyani
  • 4,490
  • 1
  • 33
  • 33
  • 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..... – Jayesh Jan 28 '13 at 12:11
  • @PavanKumar it depends on what size you do need. :) – andrea.rinaldi Mar 14 '14 at 07:54
  • Worked fine for me. Besides, I found a link that might help clarify things: https://www.hrupin.com/2012/08/how-to-create-custom-groupindicator-for-expandablelistview-group – Tobias Reich Oct 19 '16 at 07:34
7

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;
    }
});
Aditya Vyas-Lakhan
  • 13,409
  • 16
  • 61
  • 96
Codie
  • 161
  • 2
  • 3
7

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

omega
  • 630
  • 1
  • 6
  • 16
  • "only a stretchable pixel at both top and bottom", does it mean there is no stretchable pixel on left/right? – Heuristic May 30 '11 at 08:48
  • also, my icons is a solid circle with a triangle inside, it looks like impossible to make this to be a nine patch. – Heuristic May 30 '11 at 08:54
  • 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. – Heuristic May 30 '11 at 09:04
  • 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. – omega May 30 '11 at 10:16
  • 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. – Heuristic May 30 '11 at 23:06
  • As "it always stretches", so I just accept your answer, thanks! – Heuristic May 31 '11 at 03:18