android - 如何给Imageview 设置水波纹效果？

Question

btn_ripple_mask.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:color="@android:color/darker_gray"><!--点击之后的颜色 必须要-->
  <item
    android:id="@android:id/mask"
    android:drawable="@android:color/white"/>
</ripple>

设置 android:foreground="@drawable/btn_ripple_mask"和android:background="@drawable/btn_ripple_mask"，都不行

Answer 1

@erehmi If the picture is in jpg format, setting the background seems useless. Setting the foreground will work

<ImageView
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:layout_marginTop="10dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    app:srcCompat="@mipmap/ic_launcher"/>

Answer 2

The following is the default Ripper Drawable for List Item and Button under the official Material style:

<style name="Theme.Material">
    ...
    <item name="selectableItemBackground">@drawable/item_background_material</item>
    <item name="selectableItemBackgroundBorderless">@drawable/item_background_borderless_material</item>
    <item name="borderlessButtonStyle">@style/Widget.Material.Button.Borderless</item>

The following is item_background_material.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:id="@id/mask">
        <color android:color="@color/white" />
    </item>
</ripple>

The following is item_background_borderless_material.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight" />

The following are the settings and xml corresponding to Widget.Material.Button.Borderless:

<!-- Borderless ink button -->
<style name="Widget.Material.Button.Borderless">
    <item name="background">@drawable/btn_borderless_material</item>
    <item name="stateListAnimator">@null</item>
</style>

<!-- btn_borderless_material.xml -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:id="@id/mask"
          android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

Quote as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:background="?android:attr/selectableItemBackground">

ImageView settings are as follows:

<ImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:background="?android:attr/selectableItemBackground"
    app:srcCompat="@mipmap/ic_launcher" />

Note: Be sure to set android:clickable="true" 或者 通过代码设置 setOnClickListener(...) .

You have to pay for using these cool things, that is, your device must be Android 5.0 (API level 21), machines with lower versions are not supported.

Answer 3

You can write a custom View that inherits from ImageView. Then you can start an Animator in onTouchEvent and draw a circle with a gradually increasing radius. Do it yourself and have enough food and clothing. Another advantage of writing this way is that there is no version restriction, and it can be used if it is lower than 5.0.