Cara Mudah Menambahkan Ripple Effect Dari Material Design Di Aplikasi Android

Hai para ui designer, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial cara mudah menambahkan atau menggunakan ripple effect dari material design di aplikasi android.

Ripple Effect diperkenalkan di android 5.0 atau API level 21 dengan material design. Feedback sentuhan dalam desain material memberikan konfirmasi visual instan pada titik kontak ketika pengguna berinteraksi dengan elemen UI. Misalnya, tombol sekarang menampilkan ripple effect ketika disentuh. Ini adalah feedback ripple effect defaul di Android 5.0.

Animasi Ripple diimplementasikan oleh kelas RippleDrawable yang baru. Ripple effect dapat dikonfigurasi untuk berakhir pada batas tampilan atau melampaui batas tampilan. Efek ini bisa kalian lihat pada widget Button. Efek tersebut, bisa kita gunakan pada widget lainnya seperti TextView.

- Advertisement -

Pada tutorial ini, kalian akan belajar cara menambahkan ripple effect dari material design di aplikasi android studio

Tutorial Cara Menambahkan Ripple Effect Material Design Di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

Application Name:Ripple App
Package Name:com.androidrion.rippleapp
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam project ini:

  1. activity_main.xml

Daftar file xml drawable yang digunakan dalam project ini:

  1. ripple_effect.xml

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Ripple App.

XML Layout File

Buka file activity_main.xml dalam folder layout pada project android studio kalian. Tambahkan widget LinearLayout dan TextView di dalamnya. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
  <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:text="@string/app_name"
        android:textColor="@android:color/black" />
</LinearLayout>

Untuk menambahkan ripple effect di aplikasi android terdapat dua metode.

Metode 1: ?attr/selectableItemBackground

Untuk mengimplentasikan efek per klik, kalian cukup tambahkan atribut android:background=”?attr/selectableItemBackground” pada widget yang telah kalian tambahkan. Pada contoh ini, saya menggunakan widget TextView. Tambahkan juga atribut clickable dan focusable. Berikut ini adalah kode lengkap untuk atribut TextView pada file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
  <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center_vertical"
        android:text="@string/app_name"
        android:textColor="@android:color/black" />
</LinearLayout>

Maka hasilnya akan terlihat seperti pada gambar di bawah ini.

Metode 2: XML Drawable

Buatlah file xml drawable dengan cara klik kanan pada folder drawable, lalu pilih New>Drawable resource file. Simpan file xml drawable tersebut dengan nama ripple_effect. Berikut ini adalah kode lengkap untuk file ripple_effect.xml

app/res/drawable/ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorPrimary"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
        </shape>
    </item>
</ripple>

Lalu gunakan file xml drawable tersebut pada atribut background dalam widget TextView. Berikut ini adalah kode lengkap untuk atribut TextView pada file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@drawable/ripple_effect"
            android:clickable="true"
            android:focusable="true"
            android:gravity="center_vertical"
            android:text="@string/app_name"
            android:textColor="@android:color/black" />
</LinearLayout>

Maka hasilnya akan terlihat seperti pada gambar di bawah ini.

Kalian bisa melihat perbedaan antara kedua metode ini yaitu adanya custom warna yang bisa kita ubah-ubah.

AKHIR KATA

Itulah tadi tutorial singkat cara menambahkan ripple effect material design di aplikasi android. Efek ini tidak hanya kita bisa tambahkan pada widget TextView saja, tetapi kita bisa menambahkannya pada CardView, LinearLayout, FrameLayout dan lainnya selama kita menambahkan atribut clickable di dalamnya.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

BONUS TUTORIAL !!!

Code XML Layout

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Metode 1"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:padding="10dp"
            android:src="@drawable/ic_mail" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:text="Inbox"
            android:textColor="@android:color/black" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:padding="10dp"
            android:src="@drawable/ic_person" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:text="Personal"
            android:textColor="@android:color/black" />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Metode 2"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_effect"
        android:clickable="true"
        android:focusable="true"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:padding="10dp"
            android:src="@drawable/ic_settings" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:text="Setting"
            android:textColor="@android:color/black" />
    </LinearLayout>

</LinearLayout>

Hasil

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.