Bagaimana cara membuat riak melingkar pada tombol saat diklik?


121

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:

masukkan deskripsi gambar di sini

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?



jawaban yang mungkin ada di sini stackoverflow.com/questions/33477025/…
Amrish Kakadiya

1
Pertimbangkan untuk mengubah jawaban yang Anda pilih menjadi jawaban dengan suara positif paling banyak, karena itu benar-benar menyelesaikan masalah
Jeff Barger

@JeffBarger Mengapa? Keduanya bekerja dengan baik. Tidak ada yang lebih baik di antara mereka.
Pengembang android

Jawaban:


18

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>

288

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.


Bagus. Bisakah saya juga mengatur warnanya?
Pengembang android

4
di API 23, latar belakang 'atas' tampaknya setengah ukurannya dibandingkan dengan selectbleItemBackgroundBorderless
snodnipper

3
Jawaban yang bagus dan terbaik. ty
Skywalker

1
@androiddeveloper, warna dapat disetel dengan menyetel colorControlHighlight seperti di bawah ini dalam styles.xml Anda <item name = "colorControlHighlight"> # F00 </item>
bond

4
Jika Anda menggunakannya di dalam tata letak lain, Anda mungkin juga perlu android:clipChildren="false"dalam tata letak untuk memungkinkan animasi menyebar.
Tanasis

83

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.


Adakah cara untuk menyesuaikannya? Misalnya warnanya? Mungkin sesuatu dalam gaya? Atau lebih spesifik lagi pada tampilan tag XML itu sendiri?
pengembang android

Saya tidak tahu, hari ini saya menyelesaikan masalah ini dan jawaban di atas tidak berfungsi sesuai kebutuhan. Saya berasumsi bahwa warnanya dapat disesuaikan dengan gaya, tetapi yang pasti tidak dalam tampilan.
Anrimian

1
Inilah efek tepat yang saya cari. Omong-omong, dapatkah Anda menyebutkan di mana menemukan atribut ini, tampaknya tidak didokumentasikan.
Jack Wang

2
Menjawab pertanyaan OP. Harus ditandai sebagai jawaban terbaik. +1
Corbella

2
@MeysamHadigheh ?adalah jalan pintas untuk?attr/
musooff

47

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>

Itu ada di kode saya. Anda dapat menggunakan warna Anda :)
Thomas R.

Bagaimana saya akan menggunakan pemilih default jika ada di pra-Lollipop? Juga, apakah itu menggunakan warna yang sama dengan yang ada di dialer?
Pengembang android

2
Anda bisa meletakkan ripple drawable di folder drawables-v21. Dan untuk pra L gunakan drawable keadaan sederhana. Gunakan nama file yang sama dan masukkan ke folder drawable (default).
Thomas R.

2
Anda juga bisa membuat gaya. Dalam folder values-v21, buat gaya baru dan setel ripple drawable sebagai latar belakang. Dan untuk pra L, yaitu di folder nilai Anda styles.xml letakkan sebagai latar belakang atribut "selectableItemBackground" untuk gaya yang sama.
Thomas R.

1
Jika Anda ingin warna riak yang sama dengan efek riak default lainnya yang digunakan dalam aplikasi, gunakan "? Attr / colorControlHighlight" sebagai warnanya.
alexbchr

27

Tambahkan saja latar belakang ini ke tampilan Anda

android:background=?android:attr/actionBarItemBackground


19

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.


3

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"


2

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>

1

Mencoba:

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

1
Harap jangan hanya memposting kode sebagai jawaban, tetapi sertakan penjelasan tentang fungsi kode Anda dan bagaimana kode tersebut menyelesaikan masalah pertanyaan. Jawaban dengan penjelasan umumnya berkualitas lebih tinggi, dan lebih cenderung menarik suara positif.
Mark Rotteveel

Lebih mulus daripada menyetel actionBarItemBackground sebagai latar belakang. Namun tetap saja tidak sama persis dengan animasi bilah aksi itu sendiri.
coolcool1994


0

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
}

context.getResource tidak ditemukan
Rahul Mandaliya

@RahulMandaliya terima kasih atas komentarnya. Saya buruk, itu adalah metode ekstensi khusus saya. Ditambahkan ke jawaban
mihails.kuzmins
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.