Tutorial Material Design Menambahkan Ripple Effects di Android

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 :
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?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 :
    1
    2
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
  • TextView
    Pada TextView, tambahkan atribut berikut :
    1
    2
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
  • Button
    Pada Button/Tombol, cukup tambahkan kode berikut :
    Untuk style normal
    1
    style="@style/Widget.AppCompat.Button"
    Untuk style colored
    1
    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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
    }
}

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.

Komentar

Posting Komentar

Postingan Populer