Android DrawerLayout background selection on ListView

Question

I've developped an app with a DrawerLayout.

My problem is with the ListView , when I click on an item his textColor becomes white, but background still transparent and the ListView background is white. So selected text is unreadable.

I searched solutions, and tried many of them but no one is working. I just want to change background color in #FFCCCCCC for example when an item is selected.

Do you have any idea ?

Drawer layout

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFDDDDDD"/>

    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#FFF"/>

</android.support.v4.widget.DrawerLayout>

Navigation list

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_margin="15dp" />

    <TextView 
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_gravity="center_vertical"/>

</LinearLayout>

If you have any solution... Thanks :)

Edit :

Answer 1

When defining your selector for the background of a list item, have a section for android:state_activated="true" as well. Re: https://stackoverflow.com/a/15917947/954643 Pretty annoying that a ListView#setItemChecked() call doesn't actually set the selected state...but I guess that's why they have a separate #setSelection . Wish the docs were clearer about the state it puts items in.

Answer 2

You have to set a selector for both android:background and android:textColor . See Color State List for further details!

Navigation list

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background_selector"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_margin="15dp" />

    <TextView 
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="@drawable/color_selector"
        android:layout_gravity="center_vertical"/>

</LinearLayout>

background_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/holo_blue_light" android:state_pressed="true" />
    <item android:drawable="@color/holo_blue_light" android:state_selected="true" />
    <item android:drawable="@color/blue" />
</selector>

color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_pressed="false" android:color="#ffffff" />
    <item android:state_focused="true" android:state_pressed="true" android:color="#000000" />
    <item android:state_focused="false" android:state_pressed="true" android:color="#000000" />
    <item android:color="#ffffff" />
</selector>

Answer 3

The menu item background should point to a selector rather than a simple drawable or color, something along these lines:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/holo_blue_light" android:state_pressed="true" />
    <item android:drawable="@color/holo_blue_light" android:state_selected="true" />
    <item android:drawable="@color/menu_background" />
</selector>

Answer 4

on your adapter:

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    ...

    rowView.setBackgroundResource(R.drawable.YOUR_SELECTOR);
    rowView.setLayoutParams(new ListView.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));

    return rowView;
}