Question

I have a layout where I have an expandable list in a fragment on the left and a details fragment on the right. This all works fine.

Now I would like to indicate what item on the left is having it’s details shown on the right and here I’m having a problem.

In a normal list view I have achieved this by setting the choice mode for the list view to single and then using a state drawable based on the “activated” state. When I click the item, the background is set to my selected color and stays that way until I select another item on the list.

I tried to apply this to my expandable listview and it was/is a dismal failure. There were no errors, but the selected item did not maintain it’s color state. I’m not sure if I’m not setting the choice mode properly for it (I’ve tried it in the layout file as well as programatically, it doesn’t seem to make a difference), or pointing it to the wrong thing (not sure how that could be, but…)

Any help/pointers appreciated (even if it’s in a completely different direction).

Most current failure:

expandable listview code

private void fillData(String group, String child) {
    ExpandableListView lv;
    mGroupsCursor = mDbHelper.fetchGroup(group);
    getActivity().startManagingCursor(mGroupsCursor);
    mGroupsCursor.moveToFirst();
    lv = (ExpandableListView) getActivity().findViewById(R.id.explist);
    lv.setChoiceMode(ExpandableListView.CHOICE_MODE_SINGLE);        

    mAdapter = new MyExpandableListAdapter(mGroupsCursor, getActivity(),
            R.layout.explistlayout,
            R.layout.explistlayout,
            new String[] { "_id" },
            new int[] { android.R.id.text1 },
            new String[] { child },
            new int[] { android.R.id.text1 });
    lv.setAdapter(mAdapter);
    registerForContextMenu(lv);

    lv.setOnChildClickListener(new ExpandableListView.OnChildClickListener() { 
        @Override 
        public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id)  
        { 
            mRowId  = id;
            EventDisplayFragment eventdisplay = new EventDisplayFragment();
            getFragmentManager().beginTransaction().replace(R.id.rightpane, eventdisplay).commit();
            return true; 
        } 
        }); 
}

public class MyExpandableListAdapter extends SimpleCursorTreeAdapter {

    public MyExpandableListAdapter(Cursor cursor, Context context,
            int groupLayout, int childLayout, String[] groupFrom,
            int[] groupTo, String[] childrenFrom, int[] childrenTo) {
        super(context, cursor, groupLayout, groupFrom, groupTo,
                childLayout, childrenFrom, childrenTo);
    }
    @Override
    protected Cursor getChildrenCursor(Cursor groupCursor) {
        Cursor childCursor = mDbHelper.fetchChildren(mGroup, groupCursor
                .getString(groupCursor
                        .getColumnIndex(AttendanceDB.EVENT_ROWID)));
        getActivity().startManagingCursor(childCursor);
        childCursor.moveToFirst();
        return childCursor;
    }
}

item_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
     android:state_pressed="true" 
     android:drawable="@color/green" />
    <item 
     android:state_selected="true" 
     android:drawable="@color/blue" />
    <item 
     android:state_focused="true" 
     android:drawable="@color/violet" />
    <item 
     android:state_activated="true" 
     android:drawable="@color/blue" />
</selector>

Answer 1

Do the following on ExpandableListView:

Step 1. Set choice mode to single (Can be done in xml as android:choiceMode = “singleChoice”)

Step 2. Use a selector xml as background (android:listSelector = “@drawable/selector_list_item”)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
   android:exitFadeDuration="@android:integer/config_mediumAnimTime">

   <item android:drawable="@android:color/holo_blue_bright" android:state_pressed="true"/>
   <item android:drawable="@android:color/holo_blue_light" android:state_selected="true"/>
   <item android:drawable="@android:color/holo_blue_dark" android:state_activated="true"/>

</selector>

Step 3. Call expandableListView.setItemChecked(index,true) in onChildClick() callback.

index is a 0 based index of the child item calculated as follows

Group 1 [index = 0]

• Child item 1
• Child item 2
• Child item 3 [index = 3]

Group 2 [index = 4]

• Child item 1
• Child item 2
• Child item 3 [index = 7]

Group 3 [index = 8]

• Child item 1
• Child item 2
• Child item 3 [index = 11]

If we have list headers as well, they would also account for index values.

Here is a working example:

@Override
public boolean onChildClick(ExpandableListView parent, View v,
        int groupPosition, int childPosition, long id) {
    ...

    int index = parent.getFlatListPosition(ExpandableListView.getPackedPositionForChild(groupPosition, childPosition));
    parent.setItemChecked(index, true);


    return true;
}