selected item on custom listview with contextual action bar

domi picture domi · Feb 13, 2012 · Viewed 31.7k times · Source

I recently started using android actionbars and contextual action bars (CAB).

I have just one activity which is a ListActivity. Basically I use the following code snipped to "activate" the CAB:

ListView listView = getListView();
listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
listView.setMultiChoiceModeListener(new MultiChoiceModeListener() {

    @Override
    public void onItemCheckedStateChanged(ActionMode mode, int position,
                                      long id, boolean checked) {
        // Here you can do something when items are selected/de-selected,
        // such as update the title in the CAB
    }

    @Override
    public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
        // Respond to clicks on the actions in the CAB
        switch (item.getItemId()) {
            case R.id.menu_delete:
                deleteSelectedItems();
                mode.finish(); // Action picked, so close the CAB
                return true;
            default:
                return false;
        }
    }

    @Override
    public boolean onCreateActionMode(ActionMode mode, Menu menu) {
        // Inflate the menu for the CAB
        MenuInflater inflater = mode.getMenuInflater();
        inflater.inflate(R.menu.context, menu);
        return true;
    }

    @Override
    public void onDestroyActionMode(ActionMode mode) {
        // Here you can make any necessary updates to the activity when
        // the CAB is removed. By default, selected items are deselected/unchecked.
    }

    @Override
    public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
        // Here you can perform updates to the CAB due to
        // an invalidate() request
        return false;
    }
});

The layout of the list:

<ImageView
    android:id="@+id/message_on_clipboard_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:minWidth="30dp"
    android:padding="7sp"
    android:src="@android:drawable/presence_online" >
</ImageView>

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/listitem_background"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="5sp"
        android:fadingEdge="horizontal"
        android:singleLine="true"
        android:text="TextView"
        android:textAppearance="?android:attr/textAppearanceLarge" >
    </TextView>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/listitem_background"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/message_length"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5sp"
            android:text="@string/message_length"
            android:textAppearance="?android:attr/textAppearanceSmall" >
        </TextView>

        <TextView
            android:id="@+id/message_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5sp"
            android:text="TextView"
            android:textAppearance="?android:attr/textAppearanceSmall" >
        </TextView>

        <TextView
            android:id="@+id/date_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5sp"
            android:text="@string/date_label" >
        </TextView>

        <TextView
            android:id="@+id/date_message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" >
        </TextView>
    </LinearLayout>
</LinearLayout>

And within main.xml:

<ListView
    android:id="@+android:id/list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
>
</ListView>

Now if I do a long click on a list item the CAB shows up as expected:

cab

I use a MultiChoiceModeListener but unfortunately the selected list items do not change the background like in the example here (light blue background after an item is selected):

enter image description here

Do I have to use a custom selector? Or is there a standard procedure how android does handle this and I just need to make my LinearLayouts transparent? I also tried the following but with no success:

ListView item background via custom selector

It would be great If somebody could point me in the right direction. Please let me know if you need more application code or xml files.

Answer

Alexander Lucas picture Alexander Lucas · Feb 13, 2012

I've only ever tested this in CHOICE_MODE_SINGLE, but in that situation it works by doing the following.

  • When you select a list item, in code, call "setItemChecked(position, checked)" method (on the ListView instance) for that item in the list.

  • Add this to the XML for individual ListView items:
    android:background="?android:attr/activatedBackgroundIndicator"