Properly Add Background Image in a selected item(ListView)

Question

When I press a specific item on the listview, it should be highlighted by displaying a background image on it. The problem is the image is not properly displayed. I am using android:attr/activatedBackgroundIndicator to display the image on background.

Original Image:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:id="@+id/relLayout"
       android:background="?android:attr/activatedBackgroundIndicator"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dip" >
    <!-- ListRow Left side Thumbnail image -->
    <LinearLayout
        android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"

        android:layout_marginRight="5dip"
        android:padding="3dip" >
        <ImageView
            android:id="@+id/list_image"
            android:contentDescription="@string/app_name"
            android:layout_width="60dip"
            android:layout_height="60dip"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
    <!-- Rightend Arrow -->
    <ImageView
        android:id="@+id/imageView1"
        android:contentDescription="@string/app_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/abs__ic_go" />
    <!-- City tvCity -->
    <TextView
        android:id="@+id/pid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="75dip"
        android:layout_centerVertical="true"

        android:paddingBottom ="10dip"
        android:text="Main Groups"
        android:textColor="#f5f5f5"
        android:textSize="15dip"
        android:textStyle="bold"

        android:typeface="sans" />
    <!-- Weather Information-->
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/pid"
        android:layout_alignLeft="@+id/pid"
        android:paddingTop="5dip"
        android:layout_centerHorizontal="true"
        android:text="Main"
        android:textColor="#f5f5f5"
        android:textSize="15dip" />
</RelativeLayout>   

Below is the xml responsible for putting the background:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true" android:drawable="@drawable/listview_back" />

  <item android:state_pressed="true" 
        android:state_enabled="true"
        android:drawable="@drawable/listview_back" />

  <item android:state_focused="false" 
        android:state_pressed="false" 
        android:state_selected="false"
        android:state_checked="false" 
        android:state_enabled="true" 
        android:state_checkable="false"
        android:drawable="@android:color/transparent"/>

</selector>

The result(been experimenting the sizes but still the same output):

Answer 1

1- The android:background attribute use no scaling when displays an image, so the image will not fit the parent size. 2- In your main xml file (the one contains the listView itself) you might put the listView with a fixed width, so not the whole area of the item will be displayed might be a part of it hidden.

** My advice to use an ImageView inside the relativeLayout of the item which fits the item and in this ImageView set the image in android:src not in android:background and use the scaleType="fitXY" , by this way the ImageView will be responsible for resizing your Image to fit the ImageView which already fits your Relative Layout.