Cara Menambahkan Ripple Effects di Android Material Design

Assalamualaikum Warahmatullahi Wabarakatuh.

Melanjutkan tutorial dari seri Material Design, kali ini saya akan sharing mengenai penggunaan Ripple Effects pada Komponen Activity. Ripple Effects adalah efek seperti gelombang air, yang akan tampil saat user menekan salah satu widget didalam Activity, seperti Button, TextView, CardView, dll.

Ripple Effects mulai diperkenalkan pada Android Lollipop, jadi jika versi android kalian dibawah Lollipop, maka efek tersebut tidak akan tampil. Pada tutorial ini kita akan memcoba menambahkan Ripple Effects pada komponen widget seperti Button, TextView dan CardView.

Materi lainnya yang direkomendasikan:

• Cara Membuat SwitchCompat di Android Material Design
• Tutorial Membuat Navigation Drawer di Android Studio
• Cara Membuat Swipe Refresh Material Design
• Membuat Animasi dan Sub Menu pada Floating Action Button
• Cara Membuat Toggle Button pada Android Studio
• Belajar Membuat Style Material Design di Android Studio

Cara Membuat Ripple Effects di Android Material Design

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Pertama masukan beberapa library berikut ini didalam dependensies pada file build.gradle (app level), untuk kebutuhan komponen material design kita.

implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:support-v4:27.1.1'
implementation 'com.android.support:design:27.1.1'
implementation 'com.android.support:cardview-v7:27.1.1'

3) Buka activity_main.xml kalian, disini kita akan menambahkan 3 buah komponen widget, yaitu CardView, TextView dan Button. Pada masing-masing komponen tersebut kita tambahkan beberapa atribut untuk membuat Ripple Effects.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:gravity="center"
    tools:context="android.cianjur.developer.net.materialdesignexample.MainActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/cardRipple"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        android:layout_margin="4dp"
        app:cardElevation="6dp"
        android:focusable="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/rippleText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="WIldan M Athoillah"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:textStyle="bold"
                android:focusable="true" />

            <Button
                android:id="@+id/buttonRipple"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                style="@style/Widget.AppCompat.Button"
                android:text="Button Ripple" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>

View:

Coba kalian perhatikan kode di atas, untuk menambahkan Ripple Effects, kita perlu menambahkan beberapa atribut seperti berikut ini.

CardView:

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

TextView:

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

Button:

• style="@style/Widget.AppCompat.Button"
• atau style="@style/Widget.AppCompat.Button.Colored

Jika kalian menggunakan Style Button Colored, warna background pada Button tersebut akan diambil dari ColorAccent.

Terakhir coba jalankan project tersebut, disarankan untuk menggunakan versi android Lollipop atau diatasnya. Maka saat kita mengklik salah satu komponen tersebut akan muncul efek seperti gelombang air.

Sekian dari saya, mohon maaf bila ada kesalahan, jika ada yang ingin ditanyaka, silakan isi kolom komentar dibawah ini.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berbagi :