Android RippleDrawable

RippleDrawable 水波紋動畫

Android 5.0 提供在點擊時, 顯示水波紋動畫, 來加強點擊效果.

Step 1: 增加水波紋xml

先在drawable中增加水波紋xml : bt_ripple_background.xml

bt_ripple_background.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#FFFF0000">
</ripple>

Step 2: 設定水波紋

在Button的背景設計上, 設定水波紋

layout.xml

<Button
        android:id="@+id/ripple_bt"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@drawable/bt_ripple_background"
        android:layout_gravity="center_horizontal"
        android:text="Normal"
        android:elevation="4dp"
        />

點擊效果

水波紋動畫擴展至圓形填滿

可設定填滿效果

設置Mask, 讓水波紋填滿至四邊形大小

在drawable水波紋xml : bt_ripple_background.xml

bt_ripple_background.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#FFFF0000">
    <item android:id="@android:id/mask"
          android:drawable="@android:color/white" />
</ripple>

點擊效果

可設定預設顏色

設置Child Item

Button 還未點擊前會先顯示預設背景, 當點擊後才顯示水波紋動畫.
且Child Item的水波紋動畫, 亦具有Mask的效果.

在drawable水波紋xml : bt_ripple_background.xml

bt_ripple_background.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#FFFF0000">
    <item android:drawable="@android:color/holo_blue_light" />
</ripple>

點擊效果

點擊時, 水波紋的顏色會與底層顏色做渲染.