How to create ripple effect in simple layout

问题:

How can I have a ripple effect in a simple linear/relative layout when touching the layout?

I've tried setting the background of a layout to something like:

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

    <item android:drawable="@android:color/white"/>

</ripple>

However I'm only seeing a plain white background and no ripple effect when touching the layout. What am I doing wrong?

Edit:

For reference, here is my layout xml file:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="@drawable/test"
        android:clickable="true">
    </RelativeLayout>

回答1:

Set these properties on your layout (if your layout has the default white/light background):

          android:clickable="true"
          android:focusable="true"
          android:background="?attr/selectableItemBackground"

You don't need a custom drawable in this case.

However, if your layout has a black/dark background, you'd have to create your own ripple drawable like this one:

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

And then set this ripple drawable as your android:background property.

You can see many examples of these types of ripples in AOSP: http://androidxref.com/8.0.0_r4/search?q=ripple&defs=&refs=&path=&hist=&project=art&project=bionic&project=bootable&project=build&project=cts&project=dalvik&project=developers&project=development&project=device&project=docs&project=external&project=frameworks&project=hardware&project=kernel&project=libcore&project=libnativehelper&project=packages&project=pdk&project=platform_testing&project=prebuilts&project=sdk&project=system&project=test&project=toolchain&project=tools

回答2:

I'm adding this in addition to Igor Ganapolsky's answer in case anyone wants to have a layout with different color and also have a ripple effect. You simply create a ripple effect in drawables like this:

ripple.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="@color/rippleColor"
    tools:targetApi="lollipop"> <!-- ripple effect color -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/backgroundColor" /> <!-- background color -->
        </shape>
    </item>
</ripple>

then give it as your layout's background or any button as Igor Ganapolsky mentioned in his answer.

android:clickable="true"
android:background="@drawable/ripple"

回答3:

You have to alter following code snippet in any widget(TextView/Button) and you can implement Ripple Effect:

android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"

And you are good to go.

回答4:

It turns out this is working as intended. The standard Material theme colorControlHighlight value is #40ffffff. So on a white background, this will not show up. Changing the highlight color to something else works, and/or changing the background color of the object.

Thanks all (especially Alanv for pointing me in the right direction).

回答5:

Set android:clickable="true" on your layout.

回答6:

<?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="#cfd8dc"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#d1c4e9" />
        </shape>
    </item>
</ripple>

Use this ripple.xml in Drawable folder, then assign it as View's

android:background="@drawable/ripple"

android:clickable="true"

回答7:

Simply add default ripple effect with android:background="?selectableItemBackground"

Like:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="?selectableItemBackground"
            android:clickable="true"
            >

           ...

</LinearLayout>

回答8:

Put this into your layout:

android:clickable="true"
android:background="?attr/selectableItemBackground"

Note: There is a bug in API documentation. It will work only on API >= 23

For all API levels use this Solution

回答9:

I tries all those answers and nothing worked to me, so, I solved creating the following style:

<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_marginLeft">-6dp</item>
    <item name="android:layout_marginRight">-6dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
</style>

And then, I applied to my linear layout:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>