Apply android Selector for a specific child of listview and disable the selector on the other childs in the same list item

Question

I have a list view with items that hold 2 views each(this ListView looks like a GridView with 2 columns). I needed the header and the footer and they are not available in the GridView, so I turned to using list view.

I want a selector for individual child view of each list item, the list selector did not work, it applies the selector to both child views.

What I have tried so far ????

I make the root view of each single element a FrameLayout and I use the android:foreground="@drawable/some_selector" attribute so I can simulate the drawSelectorOnTop attribute.

My Problem :

How can I apply the selector only to the pressed child in the listview item.

list view layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ListView
        android:id="@+id/episode_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@android:color/black"
        android:dividerHeight="5dp"
        android:listSelector="@null"
        android:descendantFocusability="afterDescendants" />

</RelativeLayout>

episode item

<?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="match_parent"
    android:clickable="true"
    android:foreground="@drawable/all_show_cell_background_selector" >

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/llEpisode"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#282828"
        android:paddingBottom="5dp" >

        <ImageView
            android:id="@+id/episodeImage"
            android:layout_width="160dp"
            android:layout_height="90dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_gravity="center_vertical|center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="@string/app_name"
            android:scaleType="centerCrop"
            android:src="@drawable/video_blank" />

        <TextView
            android:id="@+id/episodeDuration"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/episodeImage"
            android:layout_alignLeft="@id/episodeImage"
            android:background="@android:color/black"
            android:gravity="right"
            android:padding="2dp"
            android:textColor="#FFFFFF"
            android:textSize="11sp" />
        <!-- android:textColor="#b5b4b4" -->

        <TextView
            android:layout_marginTop="2dp"
            android:id="@+id/episodeTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/episodeImage"
            android:gravity="right"
            android:paddingRight="5dp"
            android:singleLine="true"
            android:text="hdgsagafasfsdafsdfsdfasddfsad"
            android:textColor="#ffffff"
            android:textSize="14sp" >

        </TextView>

        <TextView
            android:id="@+id/showName"
            android:layout_marginTop="2dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/episodeTitle"
            android:clickable="true"
            android:gravity="right"
            android:paddingRight="5dp"
            android:text="hdgsagafasfsdafsdfsdfasddfsad"
            android:textColor="#A8A8A8"
            android:textSize="13sp" >

        </TextView>

        <TextView
            android:layout_marginTop="2dp"
            android:id="@+id/noOfViewsText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/showName"
            android:layout_alignParentBottom="true"
            android:gravity="right"
            android:paddingRight="5dp"
            android:text="@string/number_of_views_text"
            android:textColor="#A8A8A8"
            android:textSize="11sp" />

        <TextView
            android:id="@+id/episodeNumberOfViews"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/noOfViewsText"
            android:layout_toLeftOf="@+id/noOfViewsText"
            android:layout_toRightOf="@+id/fav_img"
            android:ellipsize="none"
            android:gravity="right"
            android:paddingRight="5dp"
            android:singleLine="true"
            android:text="fsdafasdfsad"
            android:textColor="#A8A8A8"
            android:textSize="11sp" />

        <ImageView
            android:id="@+id/fav_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/episodeNumberOfViews"
            android:layout_alignParentLeft="true"
           android:layout_marginLeft="4dp"
            android:contentDescription="@string/favourite_title_show"
            android:src="@drawable/fav_episode" />
    </RelativeLayout>

</FrameLayout>

the single list item contains 2 episode items

this is the container that holds the 2 episode items

 <?xml version="1.0" encoding="utf-8"?>
    <!-- This container to help emulate a GridView in each ListView item -->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:descendantFocusability="afterDescendants"
        android:orientation="horizontal" >

    </LinearLayout>

Answer 1

Im not really sure about foreground but what i actually do is use a listview. then in the adapter i set two relative layouts for every row in the list, here is my list attributes:

<ListView
android:id="@+id/seccion_list"
android:layout_height="wrap_content"
android:layout_width="fill_parent" 
android:divider="@null"
android:dividerHeight="0dp"/>

in my adapter i set the layout to load for every row, here is the first relative layout for the first frame in the row:

 <RelativeLayout
        android:id="@+id/primerContenedor"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/seccion_3_imagen_height"
        android:layout_marginLeft="3dip"
        android:layout_marginRight="3dip"
        android:layout_marginTop="5dip"
        android:layout_weight="1"
        android:clickable="true"
        android:focusable="true" 
        android:background="@drawable/layout_selector">

so bassically what i do is to set the relative layout clickable and focusable attributes true and define a selector:

    <?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android">   
    <item android:state_focused="true" android:drawable="@color/blue"/> 
    <item android:state_pressed="true"  android:drawable="@color/blue"/>
    <item android:drawable="@color/grey" /> 
</selector>

Answer 2

I face this problem before , and have a nice solution look here for sample code