How to make a ripple effect over a linear layout, without overriding the background color on its children?

Question

I have a LinearLayout that looks like this.

I want each row to be clickable. The LinearLayout code for a row looks like this:

    <LinearLayout
        style="@style/home_menu_item_container"
        android:id="@+id/home_menu_acronyms_button"
        >
        <ImageView
            style="@style/home_menu_item_left"
            android:background="@color/greyLight"

            />
        <TextView
            style="@style/home_menu_item_right"
            android:text="@string/home_menu_option_2"
            android:background="@color/grey"
            />
    </LinearLayout>

How can I add a ripple effect that expands over the entire row (parent) - not just one child view in the row? The tricky part here is to let the ripple go over the two colored row.

Answer 1

So far, I found out the easiest way to do so is define a <ripple> in your drawable and then set the background of the LinearLayout to this drawable resource.

Define your drawable-v21/item_selector.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/your_background_color">
    <item android:id="@android:id/mask"
        <!--color here doesn't matter-->
        android:drawable="@android:color/white" /> 
</ripple>

Set the background of your LinearLayout to drawable/item_selector.

<LinearLayout
    style="@style/home_menu_item_container"
    android:background="@drawable/item_selector"
    android:id="@+id/home_menu_acronyms_button" >
     ...
</LinearLayout>

Besides, if you don't have your own background color, then there is no need to define a item_selector at all. You can simply define background as android:background="?android:attr/selectableItemBackground" for your LinearLayout.