Draw selector on top - for a basic linear layout?

Question

I want a selector click state for a simple layout to draw on top of its children. I think this is similar to the "drawSelectorOnTop" attribute in ListView. Example layout:

<LinearLayout
  android:background="@drawable/my_click_selector">
    <LinearLayout
      android:background="#F00" />
</LinearLayout>

---------------
|             |
| ----------- |
| ----------- |
|             |
---------------

So here we have a parent linear layout, and an inner child which has a solid background color (red). When I click the parent, the background color of the asset changes as defined in my selector, but since the child is closer to the user in the z-order, it remains unchanged.

Is there any way to have the selector selected-state drawn on top of all children instead of under?

Thanks

Answer 1

I face this problem and i looked to your question before , here what i did and worked perfectly :

You can use the FrameLayout android:foreground attribute to do the job for you

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:descendantFocusability="afterDescendants"
    android:duplicateParentState="true"
    android:focusable="true">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:descendantFocusability="beforeDescendants"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:foreground="@drawable/draw_on_top_selector">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#282828"
            android:paddingBottom="5dp">

            <ImageView
                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: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" />

        </RelativeLayout>
    </FrameLayout>
</LinearLayout>

draw_on_top_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/show_cell_background_selected" android:state_pressed="true"/>
    <item android:drawable="@drawable/show_cell_background"/>
</selector>

show_cell_background_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <stroke
                android:width="4dp"
                android:color="#FFD900" >
            </stroke>

            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

</layer-list>

show_cell_background.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <stroke
                android:width="2dp"
                android:color="#20000000" >
            </stroke>

            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

</layer-list>

Answer 2

I recently made a post about drawing a foreground selector on any view. It will let you avoid nested layouts.

Hope this will help.