CODEWITHSUNDEEP
androidexpandablelistview
Tomer Mor
Tomer Mor

Reputation: 8028

ExpandableListView - group indication is stretch to fit the text size

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 ?

Upvotes: 15

Views: 20721

Answers (7)

Thu Thu
Thu Thu

Reputation: 99

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

Upvotes: 1

D.S.R.
D.S.R.

Reputation: 61

<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>

Upvotes: 6

bwacher
bwacher

Reputation: 207

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

Upvotes: 5

user2224350
user2224350

Reputation: 2334

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

enter image description here

Upvotes: 1

Himanshu Likhyani
Himanshu Likhyani

Reputation: 4580

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.

Upvotes: 25

Genom
Genom

Reputation: 158

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.

Upvotes: 1

chitacan
chitacan

Reputation: 341

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)

Upvotes: 5

Related Questions