Tutorial Material Design Menambahkan Ripple Effects di Android

Last Updated on 8 years by Mas Herdi

Malam semua, melanjutkan tutorial saya tentang Android Material Design. Kali ini kita akan belajar cara menambahkan Ripple Effects ke dalam komponen-komponen layout di Android. Ripple Effects mulai diperkenalkan di Android Lollipop dan sejak saat itu pula menjadi salah satu ciri khas dari Material Design di Android. Bagi yang belum tahu, Ripple Effects adalah efek yang muncul ketika kita menyentuh suatu komponen layout di Android, bisa tombol, TextView, atau lainnya. Efek nya berbentuk seperti gelombang-gelombang yang muncul di permukaan air ketika kita menjatuhkan batu di atasnya, karena itulah dinamakan ripple effects. 🙂

Menambahkan Ripple Effects pada CardView, TextView, dan Button di Android

Pada tutorial ini, kita akan menambahkan Ripple Effects ke tiga komponen layout Android, yaitu CardView, TextView, dan Button. Tutorial ini dibuat menggunakan Android Studio.

Sebelum lanjut, kalian diharuskan membaca terlebih dahulu tutorial-tutorial di bawah ini :

Pre-Requisites :

• Membuat Project Hello World di Android Studio
• Membuat Color Resources untuk Material Design Theme
• Membuat Material Design CardView di Android

Jika kalian sudah mengikuti semua tutorial di atas, maka langsung saja ke file activity_main.xml, karena di file itulah kita akan banyak bermain 🙂

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:id="@+id/cardview_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="4dp"
        app:cardElevation="2dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/tv_satu"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:padding="10dp"
                android:text="Haloo"
                android:textAppearance="@style/TextAppearance.AppCompat.Large" />

            <TextView
                android:id="@+id/tv_dua"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:padding="10dp"
                android:text="Ripple Effect"
                android:textAppearance="@style/TextAppearance.AppCompat.Small" />

            <Button
                style="@style/Widget.AppCompat.Button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button Ripple" />

            <Button
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button Ripple Colored" />
        </LinearLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

Dari kode di atas, bisa dilihat cara untuk menambahkan Ripple Effects pada komponen layout :

• CardView
  Untuk memunculkan Ripple Effects pada CardView cukup tambahkan atribut berikut :

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

• TextView
  Pada TextView, tambahkan atribut berikut :

          android:background="?attr/selectableItemBackground"
          android:clickable="true"
  

• Button
  Pada Button/Tombol, cukup tambahkan kode berikut :
  Untuk style normal

          style="@style/Widget.AppCompat.Button"
  

  Untuk style colored

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

  Untuk yang menggunakan Button.Colored maka warna Button akan diambil dari accent color yang didefine pada style Theme Material Design aplikasi kalian.

Kemudian pada file Activity-nya kita tidak perlu menambahkan apa-apa, code pada Activity hanya untuk menampilkan layout tersebut, itu saja

MainActivity.java

package id.web.twoh.coolandroiddesign;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

/**
 * Created by Hafizh Herdi on 1/5/2017.
 */

public class RippleEffectActivity extends AppCompatActivity{

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ripple_effect);
    }
}

Demo

Demo aplikasinya ada di video berikut, supaya lebih jelas, tonton dan bufferlah karena durasinya hanya 30 detik 🙂

Bisa kalian lihat pada demo, arah gelombang ripple akan bersumber dari tempat dimana kalian mengklik elemen tersebut, jika kalian klik dari tengah, maka gelombang ripple nya akan muncul dari tengah dan begitu pula dari sisi atau lokasi lainnya 🙂

That’s all ! Semoga membantu. 🙂 Jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. 😀 Silahkan bertanya di bagian komentar jika ada yang kurang jelas.