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

问题

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.

回答1:

It is a little bit complicated for that what you need but I don't think there is another way,...
You need to put your ImageView's into a ListView so that every ImageView is a ListItem and then you can set the ripple but you also need to set drawSelectorOnTop="true" otherwise it won't work correctly

回答2:

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.

回答3:

Another option is to make the ripple's background color transparent. This way only the ripple can be seen. The ripple's xml file (in your drawable-v21/ folder) is thus:

<-- Ripple in some ghastly color, like bright red so you can see it -->
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/red"
    >
<!-- background color uses a transparent mask set to full #ffffff (white) -->
<item
    android:id="@android:id/mask"
    android:drawable="@android:color/white"
    />

Note that if you are supporting pre-lollipop devices, you need to have a dummy file with the same name in your drawable/ folder. An empty selector is sufficient for that file. And remember that those older devices will not ripple.

回答4:

I too faced this problem, finally found a simple solution

In linear Layout just add android:clickable="true"; and set background with ur ripple effect as

android:background="@drawable/ripple_effect"

code:

    <LinearLayout
        android:clickable="true"
        android:background="@drawable/ripple_effect"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

<!-- Add your child views here -->

</LinearLayout>

add ripple_effect.xml in drawable

ripple_effect.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f87d05c2"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f87d05c2" />
        </shape>
    </item>
</ripple>

回答5:

 <RelativeLayout
        android:id="@+id/rll_privacy_policy"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="?android:attr/selectableItemBackground"
        android:orientation="vertical">

            <TextView
                android:id="@+id/txt_privacy_policy"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/layout_margin_16"
                android:text="@string/privacy_policy"
                android:layout_centerVertical="true"
                android:textColor="@color/link_acc"
                android:textSize="@dimen/txt_title_20" />

    </RelativeLayout>

回答6:

answer above dont work for me, here is my solution:

ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

list_item.xml

<?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="wrap_content">

    <LinearLayout
      >
       ...put het your design
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/ripple" />
</FrameLayout>

来源：https://stackoverflow.com/questions/28309256/how-to-make-a-ripple-effect-over-a-linear-layout-without-overriding-the-backgro