ExpandableListView - group indication is stretch to fit the text size

Question

I have group indication with small icon, and i use groupIndicator to call the selector to draw it but I see android by default stretch that icon to fits the text size

how can i prevent that behavior, and display the icon with it's original size ?

Shepperd

Answer 1

You can add group indicator by setGroupIndicator method. But By default, Android stretch height of indicator to fit group item's height. (width can be adjusted by setIndicatorBounds method.) Therefore, you should make group indicator's height exactly same as group item's height. (see ExpandableListView)

Otherwise, you can make fully customized group indicator with onGroupCollapsed and onGroupExpanded methods. Just make a view with some states and When these methods are called, change your view's state. (see ExpandableListAdapter)

Mangan

Answer 2

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.

Pasha

Answer 3

<ExpandableListView 
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:id="@+id/elv_store_info_Expandlist"
    android:cacheColorHint="#FFFFFF"
    android:overScrollMode="never"
    android:fastScrollEnabled="false"
    android:fastScrollAlwaysVisible="false"
    android:indicatorRight="20dp"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:groupIndicator="@drawable/store_info_expandabellist_indicator"
    />

@store_info_expandabellist_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item  android:state_empty="true" android:drawable="@drawable/bitmap_btn_arraw_right_dark_small">
</item>
<item android:state_expanded="true" android:drawable="@drawable/bitmap_btn_arraw_bottom_white_small">
</item>
<item android:drawable="@drawable/bitmap_btn_arraw_right_dark_small">
</item>
</selector>

@bitmap_btn_arraw_right_dark_small

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <item 
    android:left="11dp"
    android:right="11dp"
    android:top="12dp"
    android:bottom="12dp"
    android:drawable="@drawable/btn_arrowright_dark">
 </item>
 </layer-list>

Buggy

Answer 4

I think that the easiest thing to do in this case is include the indicator inside your row group view (as an imageView) and change its selected state based on whether the group is expanded. You'll want to make sure that your ImageView uses a selector with selected state drawables.

Something like this:

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

        if (convertView != null)
        {
            row = convertView;
        }
        else
        {
            row = LayoutInflater.from(getContext()).inflate(R.layout.group_row, null));
        }


        final ImageView indicator = (ImageView)row.findViewById(R.id.indicator);
        indicator.setSelected(isExpanded);
        return row;
    }

Anesthetic

This is the best Answer – Shipment

if (isExpanded) { ivIndicator.setImageResource(R.drawable.ic_expended); } else { ivIndicator.setImageResource(R.drawable.collapsed); } – Shipment

Answer 5

chitacan thanks for the comment. Very helpful!

But if you are trying to change views (e.g. indicator) in the groupview in methods onGroupExpanded and onGroupCollapsed like me, you will eventually figure out that they turn back to their original state. Reason: exp.listview calls getGroupView after expansion and collapse. If you are generating views there and not holding them somewhere, everything will be generated from scratch. So you can simply change the view (indicator) in getGroupView method with the isExpanded parameter. Hope this helps and you won't lose so much time like me. In this case you won't need onGroupCollapsed and onGroupExpanded methods.

Killy

I would perhaps define indicator icons in xml for both expanded and collapsed state and set this drawable xml as group indicator. <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="schemas.android.com/apk/res/android"> <item android:state_empty="true" android:drawable="@drawable/nav_arrow_down"/> <item android:state_expanded="true" android:drawable="@drawable/nav_arrow_up" /> </selector> – Pasha

This gets far too complicated while the answer from Inherently Curious is the proper way to do this – Perinephrium

Answer 6

First of all thank you coderat. Your answer helped me a lot. I recently figured how not only the stretching-problem could be solved but also the problem that the drawable is aligned to bottom/top when the groupItem is bigger in height then the drawable. I just changed the 9patch a bit. This image will also work for all screen-densities (you don't have to create a scaled 9patch for each drawable-folder (hdpi, mdpi,...) ). Hope that helps ;)

Therewith

Answer 7

It is the implementation for indicator icon on right side in Expandable List View. It is working for me.

<ExpandableListView
    android:id="@+id/expandlv"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:dividerHeight="2dp"
            android:groupIndicator="@drawable/group_indicator"
            android:divider="@andorid:color/white"/>

group_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<item android:state_empty="true" android:drawable="@drawable/expanded_icon" />-->
    <!--<item android:state_expanded="true" android:drawable="@drawable/collapsed_icon" />-->
    <!--<item android:drawable="@drawable/expanded_icon"/>-->


    <item android:state_empty="true">
        <layer-list>
            <item
                android:left="0dp"
                android:right="3dp"
                android:top="20dp"
                android:bottom="20dp"
                android:drawable="@drawable/expanded_icon">
            </item>
        </layer-list>
    </item>

    <item android:state_expanded="true">
        <layer-list>
            <item
                android:left="0dp"
                android:right="3dp"
                android:top="20dp"
                android:bottom="20dp"
                android:drawable="@drawable/collapsed_icon">
            </item>
        </layer-list>
    </item>

</selector>

In java source code,

DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
int width = metrics.widthPixels;

expListView.setIndicatorBounds(width - GetDipsFromPixel(30), width - GetDipsFromPixel(6));
expListView.setAdapter(listAdapter);

Appendicitis