Ripple effect 漣漪效果

Ripple effect 是在Material design，點擊button的預設效果。

也可以自訂Button的漣漪效果

步驟1：新增一個Ripple效果
res/drawable/ripple_effect.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#af0c0e"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#af0c0e" />
        </shape>
    </item>
</ripple>

步驟2：新增ShapeDrawable，並指定drawable為剛剛新增的ripple_effect
res/drawable/button.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ripple_effect" />
    <shape android:shape="rectangle">
        <solid android:color="#af0c0e" />
        <corners android:radius="30dp" />
    </shape>
</selector>

步驟3：將button的background設定為drawable/button

<Button
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@drawable/button"
    android:text="Button" />

在其他的View上加上漣漪效果。

例如有一個Textview是可以被點擊的，我們希望在Textview被點擊時，也產生漣漪效果來讓使用者知道被點擊了

在TextView 設定背景為剛剛新增的漣漪背景 @drawable/ripple_effect

<TextView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@drawable/ripple_effect"
    android:clickable="true"
    android:focusable="true"
    android:padding="10dp"
    android:gravity="center"
    android:text="Ripple animation"
    />

使用Shape形狀作為Mask的Ripple，客制漣漪形狀

步驟1：新增 一個圓角的shape drawable/mask_shape.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#af0c0e" />
    <corners android:radius="30dp" />
</shape>

步驟2：將ripple_effect 加上shape為mask的圖片

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#af0c0e"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask"
        android:drawable="@drawable/mask_shape" />
</ripple>

使用圖片為Ripple

在ripple的item加上drawable

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#0f9c1f"
    tools:targetApi="lollipop">
    <item
        android:id="@android:id/mask"
        android:width="100dp"
        android:drawable="@drawable/ic_launcher_foreground"
        android:gravity="center" />
</ripple>

用RippleDrawable來實作點擊的效果非常實用，尤其在非Button的UI想要有點擊效果時。試想如果你用了一個可點擊的View，卻沒有做被點擊的效果。使用者其實不容易知道點擊成功。

完整程式：
https://github.com/evanchen76/RippleAnimation

Android 線上課程

Android UI 進階實戰 => 單堂早鳥優惠立即拿
Android 動畫入門到進階 => 單堂早鳥優惠立即拿
最優惠心動組合=> 使用者體驗全面升級組合包