Bagaimana cara membuat riak melingkar pada tombol saat diklik?

Latar Belakang

Pada aplikasi dialer Android, saat Anda mulai mencari sesuatu, dan Anda mengklik tombol panah di sebelah kiri EditText, Anda mendapatkan efek riak melingkar:

Masalah

Saya sudah mencoba memilikinya juga, tapi saya punya yang persegi panjang:

    <ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/search_ic_back_arrow"/>

Pertanyaan

Bagaimana cara membuat tombol memiliki efek riak melingkar saat diklik? Apakah saya harus membuat drawable baru, atau adakah cara bawaan untuk itu?

Jika Anda sudah memiliki gambar latar belakang, berikut adalah contoh riak yang terlihat dekat dengan selectableItemBackgroundBorderless:

            <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/state_pressed_ripple"/>
    <item
        android:state_enabled="true"
        android:drawable="@drawable/ic_filter" />
</selector>

state_pressed_ripple.xml: (opacity diatur ke 10% pada latar belakang putih) 1AFFFFFF

 <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="oval">
                <solid android:color="#1AFFFFFF"/>
            </shape>
            <color android:color="#FFF"/>
        </item>
    </ripple>

Jika Anda menggunakan tema AppCompat, Anda dapat menyetel latar belakang tampilan sebagai:

android:background="?selectableItemBackgroundBorderless"

Ini akan menambah riak melingkar pada 21 ke atas dan latar belakang persegi di bawah 21.

Atribut lain dengan efek riak bulat, khususnya untuk bilah tindakan:

android:background="?actionBarItemBackground"

UPD : Warna riak dapat diubah dengan atribut ini:

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

Namun perlu diingat, atribut ini berlaku untuk semua efek riak default.

Membuat dan menyetel drawable riak sebagai latar belakang. Sesuatu seperti ini.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

Tambahkan saja latar belakang ini ke tampilan Anda

android:background=?android:attr/actionBarItemBackground

Anda dapat membuat drawable riak lingkaran menggunakan android:radiusatribut dalam xml.

Contoh:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />

Perhatikan, bahwa Anda your_radiusharus kurang dari lebar dan tinggi tampilan Anda. Misalnya: jika Anda memiliki view dengan ukuran 60dp x 60dp your_radiusharus dekat 30dp(lebar / 2 atau tinggi / 2).

Bekerja di Android 5.0 dan lebih tinggi.

Jika Anda ingin lebih banyak file XML umum, saya punya dua file:

1) btn_ripple_background dengan kode:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_pressed="true"
    android:state_enabled="true"
    android:drawable="@drawable/ripple_circular_shape"/>
</selector>

2) ripple_circuler_shape dengan kode:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/btn_state_pressed_text_color"
    android:shape="oval">
    <solid android:color="@color/btn_state_pressed_text_color" />
</shape>

akhirnya penggunaan:android:foreground="@drawable/ripple_btn_background"

Jika Anda menginginkan efek riak yang tidak akan melewati batas lingkaran, Anda dapat memeriksa kode ini. Ini bekerja untuk saya dengan sempurna. Ingat saja, Anda harus memberikan id = @ android: id / mask di ripple_blue.xml

<ImageButton
    android:id="@+id/send_password_to_mail_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_blue"
    android:src="@drawable/ic_filter" />

ripple_blue.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

    <item android:id="@android:id/background">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

</ripple>

color.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="colorWindowBackground">#F2F5FC</color>
    <color name="colorRipple">#0288d1</color>
</resources>

Mencoba:

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"

tambahkan saja item ini di

           <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="?android:attr/actionBarItemBackground"
                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />

Di Kotlin / Java, Anda dapat melakukan hal berikut

fun View.applyCircularRippleEffect() {
    val backgroundResId = context.getResource(android.R.attr.actionBarItemBackground)

    if (backgroundResId != 0) {
        setBackgroundResource(backgroundResId)
        isClickable = true
        isFocusable = true
    }
}

// getResource extension
fun Context.getResource(resourceId: Int): Int {
    val out = TypedValue()
    theme.resolveAttribute(resourceId, out, true)

    return out.resourceId
}