วิธาสร้าง Ripple Animation ใน Android App

บทนำ

Ripple Animation (แอนิเมชันคลื่น) เป็นเอฟเฟกต์ภาพที่เกิดเมื่อผู้ใช้กด/สัมผัส View (Button, TextView, CardView ฯลฯ) คลื่นจะขยายจากจุดที่สัมผัสออกไป เป็น Material Design มาตรฐานตั้งแต่ Android 5.0 (Lollipop, API 21)

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio เลือก File → New Project กรอกข้อมูลที่จำเป็น

ขั้นตอนที่ 2: ออกแบบ Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Result Data"
        android:background="@drawable/ripple"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

สำคัญ: android:background="@drawable/ripple" ชี้ไปที่ Drawable resource ที่จะสร้างต่อไป

ขั้นตอนที่ 3: สร้าง Ripple Drawable (res/drawable/ripple.xml)

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:color="#F816A463"
    tools:targetApi="lollipop">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#F816A463" />
        </shape>
    </item>

</ripple>

คำอธิบาย Ripple XML

• android:color: สีของคลื่น Ripple (รองรับ Alpha channel - 8 หลัก #AARRGGBB)
• <item android:id="@android:id/mask">: กำหนดพื้นที่ที่ Ripple จะปรากฏ (Mask) - ที่นี่ใช้ Rectangle สีเดียวกับ Ripple
• tools:targetApi="lollipop": บอก Tools ว่าใช้ API 21+ ไม่ต้องเตือน

Ripple แบบมีพื้นหลัง (Background + Ripple)

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

    <!-- พื้นหลังปกติ -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="4dp" />
        </shape>
    </item>

    <!-- Mask สำหรับ Ripple -->
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="4dp" />
        </shape>
    </item>

</ripple>

การทดสอบแอปพลิเคชัน

รันแอปบนอุปกรณ์จริง (ต้องเป็น API 21+)

กดปุ่ม จะเห็นคลื่น Ripple ขยายจากจุดกด

การใช้ Ripple แบบง่ายที่สุด (ไม่ต้องสร้างไฟล์)

ใน Layout ใช้ ?attr/selectableItemBackground หรือ ?attr/selectableItemBackgroundBorderless:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me"
    android:background="?attr/selectableItemBackground" />

สรุป

สร้าง ripple.xml ใน res/drawable/ กำหนด android:color และ mask แล้วตั้งเป็น background ของ View จะได้ Ripple Effect แบบ Material Design อัตโนมัติ