ListView - Highlight sub layout of item

Question

I have been searching for the straight answer to this question for quite some time now. What I want to know is how to implement a custom highlight on a ListView that will only hightlight (over top, preferably) a sub layout of the ListView item (in this case, I'm looking to highlight the RelativeLayout of the item).

Here is a screen shot of what I've got going on:Fail

Here is the code for list_item.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp"
android:clickable="false">
<RelativeLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="@drawable/card_layout">
    <LinearLayout android:id="@+id/linearLayout_thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_vertical">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/imageView_thumbnail"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:orientation="vertical"
        android:layout_toRightOf="@+id/linearLayout_thumbnail"
        android:gravity="center_vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_title"
            android:paddingLeft="5dp"
            android:textSize="18dp"
            android:text="SOME TEXT" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_subtitle"
            android:paddingLeft="5dp"
            android:textSize="12dp" />
    </LinearLayout>

    <TextView
        android:id="@+id/textView_other"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="12dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>

And the code for the ListView for that picture:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5">

<ListView android:id="@+id/listView_something"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:listSelector="@drawable/list_item_selector"
    android:drawSelectorOnTop="true"/>

</LinearLayout>

The code for list_item_selector.xml:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/list_item_selected" android:state_pressed="true"/>
    <item android:drawable="@android:color/transparent" android:state_focused="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

Here's the file for the card_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle"
        android:dither="true">
        <corners android:radius="2dp"/>
        <solid android:color="#ccc" />
    </shape>
</item>

<item android:bottom="2dp">
    <shape android:shape="rectangle"
        android:dither="true">
        <corners android:radius="2dp" />
        <solid android:color="@android:color/white" />
        <padding android:bottom="7dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp" />
    </shape>
</item>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/list_item_selected" android:state_pressed="true"/>
    <item android:drawable="@android:color/transparent" android:state_focused="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

Here's what happens when I switch the RelativeLayout's background to the selector that the ListView is using, and change the ListView so that it's selector is transparent: Sort of working

So for whatever reason, the card_layout.xml file isn't allowed to have the two items before the selector information and everything goes weird. Can anyone tell me how this is properly implemented? Like Google Play Music (This might not be the best example because it looks like a GridView or something along those lines)

Do I have to implement a GridView to display this list?

Answer 1

I found a solution, I don't know if it's the best solution, but it got what I wanted done.

Put simply, I've found that adding the selector code inside the card_layout.xml file does not work. What you should do is create a layout xml file for each state that you wish to implement on the button or list item and embed that layout in the selector itself, like in the answer for this SO post here: Android Using layer-list for button selector.

Since I didn't want to bother finding out colors and transparencies I would need to implement the background for three different states I've basically placed a RelativeLayout which lies over top of the entire list item to act as the select-able part of the item.

The code for this is here:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp">
<RelativeLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:background="@drawable/card_layout">
    <LinearLayout android:id="@+id/linearLayout_thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center_vertical">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/imageView_thumbnail"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:orientation="vertical"
        android:layout_toRightOf="@+id/linearLayout_thumbnail"
        android:gravity="center_vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_title"
            android:paddingLeft="5dp"
            android:textSize="18dp"
            android:text="SOME TEXT" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_subtitle"
            android:paddingLeft="5dp"
            android:textSize="12dp"
            android:text="SOME TEXT" />
    </LinearLayout>

    <TextView
        android:id="@+id/textView_extra"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="12dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:background="@drawable/list_item_selector"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"/>
</FrameLayout>

So, now this is working, screenshot here: