Menambahkan Efek Riak (Ripple) pada Button atau View

Bagikan jika Anda sukai postingan ini!

Gradient dan Ripple
Gradient dan Ripple

Saat Anda mengklik sebuah tombol pada suatu aplikasi Android, mungkin Anda pernah melihat suatu efek seperti lingkaran yang semakin meluas, itulah yang disebut efek riak (ripple). Dalam pengembangan aplikasi Android, efek riak ini baru tersedia pada SDK Android versi 21 atau versi Lollipop 5x. Berikut ini contoh aplikasi untuk menambahkan efek riak pada Button atau pada view lainnya, misalnya CardView.

Kita mulai dengan membuat sebuah proyek baru. Pilih pola activity Navigation Drawer Activity saat menentukan main activity. Atur proyek seperti di bawah ini.

  • Name: Design
  • Package Name: com.inochi.design
  • Language: Java

Setelah lingkungan pengembangan proyek siap, unduh berkas resource berikut ini: https://gist.github.com/kalehv/bae765c756e94455ed88, beri nama dengan md_color.xml, kemudian tempatkan di cabang \res\values pada panel Project.

Selain menambahkan efek riak (ripple), contoh aplikasi ini juga akan menambahkan efek warna gradasi (gradient) untuk Button. Kita akan membuat banyak sekali berkas resource dengan tipe drawable untuk keperluan tersebut.

Seperti sudah saya sebutkan di atas, efek riak (ripple) baru tersedia untuk Android versi Lollipop. Oleh karenanya kita perlu mengupayakan penanganan untuk perangkat yang belum menggunakan versi Lollipop. Kita mulai dengan pembuatan untuk versi Lollipop lebih dulu.

Pada panel Project, klik kanan pada cabang res\drawable kemudian klik menu Show in Explorer. Maka akan ditampilkan jendela Windows Explorer dan kita akan dibawa ke alamat lokasi penyimpanan berkas-berkas sumber daya (resource) dari aplikasi. Anda dapat melihat beberapa folder yang sudah tersedia seperti: drawable, mipmap, layout, menu, values, dan sebagainya.

Untuk membuat berkas resource untuk versi tertentu, kita harus mengelompokkan berkas tersebut pada sebuah folder. Nama folder tersebut harus diberi akhiran sesuai dengan nomor versi dari SDK Androidnya. Sebagai contoh, Android versi Lollipop mempunyai kode versi SDK yaitu 21. Maka folder tempat berkas resource untuk versi Lollipop harus mempunyai akhiran -v21.

Karena berkas resource yang akan kita buat adalah berjenis drawable, maka silakan menambahkan sebuah folder baru dengan nama drawable-v21. Kemudian buat berkas-berkas resource di bawah ini pada folder drawable-v21 tersebut.

button_gradient_amber.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/amber_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/amber_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/amber_300"
                android:startColor="@color/amber_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/blue_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/blue_300"
                android:startColor="@color/blue_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_blue_grey.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/blue_grey_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue_grey_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/blue_grey_300"
                android:startColor="@color/blue_grey_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_brown.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/brown_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/brown_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/brown_300"
                android:startColor="@color/brown_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_cyan.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/cyan_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/cyan_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/cyan_300"
                android:startColor="@color/cyan_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_deep_orange.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/deep_orange_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/deep_orange_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/deep_orange_300"
                android:startColor="@color/deep_orange_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_deep_purple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/deep_purple_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/deep_purple_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/deep_purple_300"
                android:startColor="@color/deep_purple_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_green.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/green_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/green_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/green_300"
                android:startColor="@color/green_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_grey.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/grey_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/grey_300"
                android:startColor="@color/grey_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_indigo.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/indigo_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/indigo_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/indigo_300"
                android:startColor="@color/indigo_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_light_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/light_blue_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_blue_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/light_blue_300"
                android:startColor="@color/light_blue_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_light_green.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/light_green_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_green_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/light_green_300"
                android:startColor="@color/light_green_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_lime.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/lime_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/lime_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/lime_300"
                android:startColor="@color/lime_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_orange.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/orange_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/orange_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/orange_300"
                android:startColor="@color/orange_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_pink.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/pink_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/pink_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/pink_300"
                android:startColor="@color/pink_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_purple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/purple_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/purple_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/purple_300"
                android:startColor="@color/purple_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_red.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/red_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/red_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/red_300"
                android:startColor="@color/red_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_teal.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/teal_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/teal_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/teal_300"
                android:startColor="@color/teal_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_gradient_yellow.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/yellow_900">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/yellow_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/yellow_300"
                android:startColor="@color/yellow_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

button_white.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_600">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/grey_600" />
            <stroke android:width="1px" android:color="@color/grey_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <stroke android:width="1px" android:color="@color/grey_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</ripple>

Berkas-berkas resource di atas ditujukan untuk Android versi Lollipop, lalu bagaimana untuk perangkat yang menggunakan versi di atas Lollipop, seperti Marsmallow, Oreo, dan seterusnya? Untuk versi di atas versi yang ditentukan, Anda tidak perlu membuatkan berkas-berkas resource-nya. Anda hanya perlu membuat untuk Android dengan versi di bawah versi yang ditentukan, seperti versi Kitkat, Jellybean, dan seterusnya.

Apakah kita perlu membuat folder baru untuk versi di bawah Lollipop? Tidak perlu, Anda cukup membuatnya di folder drawable yang sudah ada. Nama berkas-berkas resource yang akan kita tambahkan pada folder drawable harus sama dengan nama berkas-berkas resource yang sudah kita buat pada folder drawable-v21.

button_gradient_amber.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/amber_300"
                android:startColor="@color/amber_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/amber_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/blue_300"
                android:startColor="@color/blue_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_blue_grey.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/blue_grey_300"
                android:startColor="@color/blue_grey_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue_grey_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_brown.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/brown_300"
                android:startColor="@color/brown_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/brown_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_cyan.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/cyan_300"
                android:startColor="@color/cyan_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/cyan_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_deep_orange.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/deep_orange_300"
                android:startColor="@color/deep_orange_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/deep_orange_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_deep_purple.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/deep_purple_300"
                android:startColor="@color/deep_purple_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/deep_purple_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_green.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/green_300"
                android:startColor="@color/green_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/green_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_grey.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/grey_300"
                android:startColor="@color/grey_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/grey_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_indigo.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/indigo_300"
                android:startColor="@color/indigo_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/indigo_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_light_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/light_blue_300"
                android:startColor="@color/light_blue_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_blue_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_light_green.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/light_green_300"
                android:startColor="@color/light_green_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/light_green_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_lime.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/lime_300"
                android:startColor="@color/lime_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/lime_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_orange.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/orange_300"
                android:startColor="@color/orange_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/orange_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_pink.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/pink_300"
                android:startColor="@color/pink_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/pink_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_purple.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/purple_300"
                android:startColor="@color/purple_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/purple_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_red.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/red_300"
                android:startColor="@color/red_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/red_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_teal.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/teal_300"
                android:startColor="@color/teal_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/teal_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_gradient_yellow.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/yellow_300"
                android:startColor="@color/yellow_400"
                android:type="linear" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/yellow_900" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

button_white.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <stroke android:width="1px" android:color="@color/grey_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/grey_600" />
            <stroke android:width="1px" android:color="@color/grey_600" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

Baik, berkas resource sudah siap, selanjutnya kita akan mengubah berkas layout dari main activity, untuk menambahkan beberapa Button untuk pengujian. Buka berkas content_main.xml pada cabang \res\layout di panel Project, kemudian ubah skripnya menjadi seperti di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main">

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

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.CardView
                android:layout_width="150dp"
                android:layout_height="50dp"
                android:layout_margin="10dp"
                app:cardCornerRadius="8dp"
                app:cardElevation="4dp"
                android:foreground="?android:attr/selectableItemBackground"
                android:clickable="true"
                android:focusable="true">

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="150dp"
                android:layout_height="100dp"
                android:layout_margin="10dp"
                app:cardCornerRadius="8dp"
                app:cardElevation="4dp"
                android:foreground="?android:attr/selectableItemBackground"
                android:clickable="true"
                android:focusable="true">

            </android.support.v7.widget.CardView>
        </TableRow>

        <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <Button
                    android:id="@+id/button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_gradient_red"
                    android:textColor="@color/white"
                    android:layout_margin="1dp"
                    android:text="Button 1" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_gradient_green"
                    android:textColor="@color/white"
                    android:layout_margin="1dp"
                    android:text="Button 2" />

                <Button
                    android:id="@+id/button3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_gradient_blue"
                    android:textColor="@color/white"
                    android:layout_margin="1dp"
                    android:text="Button 3" />

                <Button
                    android:id="@+id/button4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_gradient_indigo"
                    android:textColor="@color/white"
                    android:layout_margin="1dp"
                    android:text="Button 4" />

                <Button
                    android:id="@+id/button5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_gradient_deep_orange"
                    android:textColor="@color/white"
                    android:layout_margin="1dp"
                    android:text="Button 5" />

                <TextView
                    android:id="@+id/text1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_white"
                    android:textColor="@color/black"
                    android:layout_margin="1dp"
                    android:padding="10dp"
                    android:clickable="true"
                    android:focusable="true"
                    android:text="TextView 1" />

            </LinearLayout>

        </HorizontalScrollView>

    </LinearLayout>
</android.support.constraint.ConstraintLayout>

Berikut tampilan desain dari content_main.xml.

Desain layout content_main.xml
Desain layout content_main.xml

Tampak saya menambahkan 2 (dua) buah CardView, 5 (lima) buah Button, dan sebuah TextView. Pada Button dan TextView saya mengubah nilai atribut android:background untuk menerapkan berkas drawable yang sudah kita buat. Sedangkan pada CardView, saya tidak memanfaatkan berkas berkas drawable, tapi memanfaatkan sumber daya (resource) yang sudah dimiliki oleh pustaka SDK Android, yaitu ?android:attr/selectableItemBackground yang saya tetapkan pada atribut android:foreground.

Kita tidak perlu melakukan perubahan kode sumber pada kelas MainActivity, langsung saja coba jalankan aplikasinya.

Aplikasi saat dijalankan
Aplikasi saat dijalankan

Cobalah untuk mengklik CardView dan Button pada aplikasi, perhatikan efek yang ditampilkan. Gulung ke arah kiri pada penampung Button untuk menampilkan Button dan TextView yang tidak terlihat.