Configuring the icons of an ExpandableListView - A simple ex

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.

Configuring the icons of an ExpandableListView - A simple ex

Postby chousein » Tue Mar 16, 2010 8:47 pm

Hi,

Recently I was trying to configure the icons of an ExpandableListView. As many people would do, I was trying to replace the default icons for the minimized and maximized states. As it appears, doing this basic thing it's not that straightforward as one would expect/guess. There are not many examples in the forums either (at least I couldn't find one). I would like to share a code excerpt which shows the steps for replacing the default icons in an ExpandableListView. Please beware that the code excerpt of this discussion has been pruned a lot, to show only the steps relevant for replacing the default icons. Hope that this example will be useful for people who are new in Android and who wish to work with ExpandableListViews.

Here is the explanation:

Step-1: You need two icons under <YourCodeBase>\res\drawable. Let's say that these icons are my_icon_min.png and my_icon_max.png.

Step-2: The way to override the default icons of an ExpandableListView lies in creating a Drawable object which has states (minimized and maximized, or expanded and collapsed), and set this object as the group indicator of your ExpandableListView. We need a way for creating the needed Drawable object with states. One decent way of doing this is through an XML file. Android SDK provides an example XML file for this purpose. Under Windows for Android-1.5 the location is android-sdk-windows\platforms\android-1.5\data\res\drawable\expander_group.xml. Since you're interested in replacing the default icons, probably you'll need to copy this file under <YourCodeBase>\res\drawable, edit it and put in the names of your icons (my_icon_min and my_icon_max). See below:

expander_group.xml
-------------------------
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  5.  
  6.    <item
  7.  
  8.       android:state_expanded="true"
  9.  
  10.       android:drawable="@drawable/my_icon_max" />
  11.  
  12.    <item
  13.  
  14.       android:drawable="@drawable/my_icon_min" />
  15.  
  16. </selector>
  17.  
  18.  
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


Step-3: Next comes the coding part. Below is a super simple example:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. public class MyExpandableList extends ExpandableListActivity
  3.  
  4. {
  5.  
  6.  @Override
  7.  
  8.  public void onCreate(Bundle savedInstanceState)
  9.  
  10.  {
  11.  
  12.    super.onCreate(savedInstanceState);
  13.  
  14.        .
  15.  
  16.        .
  17.  
  18.        .
  19.  
  20.    // Create a Drawable object with states
  21.  
  22.    Drawable icon = this.getResources().getDrawable(R.drawable.expander_group);
  23.  
  24.  
  25.  
  26.    // Set the newly created Drawable object as group indicator.
  27.  
  28.    // Now you should be seeing your icons as group indicators.
  29.  
  30.    getExpandableListView().setGroupIndicator(icon);
  31.  
  32.        .
  33.  
  34.        .
  35.  
  36.        .
  37.  
  38.  }
  39.  
  40. }
  41.  
  42.  
Parsed in 0.032 seconds, using GeSHi 1.0.8.4
User avatar
chousein
Developer
Developer
 
Posts: 32
Joined: Wed Feb 24, 2010 10:09 pm

Top

Re: Configuring the icons of an ExpandableListView - A simpl

Postby jrc.src » Sat Oct 30, 2010 4:58 am

What are the size of my_icon_XXXX.png, Please mention.

Also, How to have my_icon_empty.png to be displayed when group list item do not contain any child list item? Or how to remove image when no child list item ?

Thanks
JRC
jrc.src
Freshman
Freshman
 
Posts: 5
Joined: Wed Sep 29, 2010 11:09 am

Re: Configuring the icons of an ExpandableListView - A simpl

Postby erfanonline » Fri Dec 31, 2010 10:24 am

jrc.src wrote:How to have my_icon_empty.png to be displayed when group list item do not contain any child list item?

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <item android:state_empty="true" android:drawable="@drawable/my_icon_empty"/>
  3.     <item android:state_expanded="true" android:drawable="@drawable/my_icon_max" />
  4.     <item android:drawable="@drawable/my_icon_min" />
  5. </selector
  6.  
Parsed in 0.001 seconds, using GeSHi 1.0.8.4




jrc.src wrote:how to remove image when no child list item ?

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <item android:state_empty="true" android:drawable="@android:color/transparent"/>
  3.     <item android:state_expanded="true" android:drawable="@drawable/my_icon_max" />
  4.     <item android:drawable="@drawable/my_icon_min" />
  5. </selector
  6.  
Parsed in 0.001 seconds, using GeSHi 1.0.8.4



Regards
Sarwar Erfan
erfanonline
Once Poster
Once Poster
 
Posts: 1
Joined: Fri Dec 31, 2010 10:20 am

Top

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 8 guests