In Android how do you use a selector on a ListView to change the background color that will allow the text to appear as well?

Question

I'm currently using an android:listSelector in order to change the color of the background of a selected item in my list. This works well, but when the color changes, you can no longer read the text that was displaying for that list item. What am I doing wrong? How can I get the selected item in my list to change color while not covering the text for that item?

What I want is for the background color to change from gray to orange (when it is selected) like it is currently doing, but I would also like for my text to display during the color change to orange.

This is my activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gray_lines" >

    <ImageView
        android:id="@+id/header"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:scaleType="fitXY"
        android:src="@drawable/logo_header" />

    <!-- Footer aligned to bottom -->
    <ImageView
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:scaleType="fitXY"
        android:src="@drawable/orange" />

    <TextView
        android:id="@+id/footerText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="14dp"
        android:onClick="contactPressed"
        android:text="@string/footerText" />

    <ListView
        android:id="@+id/mainMenuList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/header"
        android:layout_above="@id/footer"
        android:listSelector="@drawable/item"
        android:drawSelectorOnTop="true"
        android:divider="#000000"
        android:dividerHeight="0.1dp" />

</RelativeLayout>

This is my list_item.xml which is used to populate the contents of each item in the listView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gray" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="20dp"
        android:layout_alignParentRight="true" />

    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginTop="17dp"
        android:layout_marginLeft="15dp"
        android:textSize="23sp" />

</RelativeLayout>

and this finally is my selector xml (labeled item.xml)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_enabled="false" android:state_focused="true"
        android:drawable="@drawable/orange" />
  <item android:state_pressed="true"
        android:drawable="@drawable/orange" />
  <item android:state_focused="true"
        android:drawable="@drawable/orange" />
</selector>

Thanks!

Answer 1

Create a sub folder in res called color. Use that folder to create new color selectors.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="pressed_color"/>
    <item android:color="default_color"/>

</selector>

From there, use the TextView:textColor attribute and apply the selector.

android:textColor="@color/your_selector"

Edit

First, remove the line android:drawSelectorOnTop="true" from your ListView. This is the reason the item in your ListView is being covered up. Next, create a custom selector for your row background that uses a transparent color when the item is touched. This way, your list selector will be shown in place of the background of the item.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/transparent" android:state_pressed="true"/>
    <item android:drawable="your_default_color"/>

</selector>

Apply this selector to using the android:background attribute.