Tambahkan efek riak ke tombol saya dengan warna latar tombol?


126

Saya membuat tombol dan saya ingin menambahkan efek riak ke tombol itu!

Saya membuat file XML tombol bg: (bg_btn.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>

Dan ini file efek riak saya: (ripple_bg.xml)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

Dan Ini Tombol saya yang ingin saya tambahkan efek riak:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />

Tetapi setelah menambahkan latar belakang tombol efek riak transparan, dan tombol hanya ditampilkan ketika diklik, seperti ini:

Sebelum Klik

Saat Diklik

Tetapi saya membutuhkan warna latar belakang tombol dan efek riak, saya menemukan beberapa kode ini di blog Stack Overflow yang berbeda, tetapi tetap saja tidak berfungsi!


tolong buat tangkapan layar jauh lebih kecil lain kali .. (ubah ukuran sebelum mengunggah)
pengguna25

@ user25, Anda juga dapat menambahkan latau mke link gambar. (lihat suntingan saya)
Suragch

Jawaban:


155

Berikut ini adalah xml drawable lainnya bagi mereka yang ingin menambahkan semua latar belakang gradien, radius sudut, dan efek riak:

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

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryLight"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>
</ripple>

Tambahkan ini ke latar belakang tombol Anda.

<Button
    ...
    android:background="@drawable/button_background" />

PS: jawaban ini berfungsi untuk android api 21 ke atas.


4
@pei Bagaimana kalian mendapatkan info ini? Maksud saya, bagaimana Anda tahu bahwa ada elemen XML yang disebut ripple untuk melakukan pekerjaan ini?

1
Itu salah satu konsep yang digunakan dalam desain material. Silakan mulai mengetikkan tag root baru dalam drawable xml di Android Studio, maka Anda akan dapat melihat semua tag yang tersedia termasuk ripple.
Pei

1
apa gunanya item topeng?
Prashant

10
ini membutuhkan api level 21
M.kazem Akhgary

2
itu berhasil tetapi cara kerjanya tidak dijelaskan. itu harus terkait dengan id item. Harus direferensikan.
oiyio

155

Tambahkan "?attr/selectableItemBackground"ke android:foregroundatribut tampilan Anda jika sudah memiliki latar belakang bersama android:clickable="true".


tidak selalu berfungsi, tetapi Anda dapat menambahkan latar belakang ke efek riak seperti yang dicatat dalam komentar jawaban yang diterima
Tyler

Saya harus menggunakan solusi ini karena saya telah menggunakan latar belakang khusus untuk tombol saya. Ini bekerja dengan baik.
bnayagrawal

@ROAR, itu benar, tapi setidaknya: "Ini bukan kesalahan; aplikasi akan mengabaikan atribut begitu saja. Namun, jika atribut penting untuk penampilan atau fungsionalitas aplikasi Anda, Anda harus mempertimbangkan untuk mencari cara alternatif untuk mencapai hasil yang sama dengan hanya atribut yang tersedia, lalu Anda secara opsional dapat membuat salinan tata letak di folder layout-vNN yang akan digunakan di API NN atau lebih tinggi tempat Anda dapat memanfaatkan atribut yang lebih baru. " Jadi ini bekerja dengan baik pada perangkat di atas API 23 dan diabaikan saat di bawah (kita bisa saja tools:ignore="UnusedAttribute).
JorgeAmVF

tanpa pustaka dukungan Android, itu akan menjadi ?android:attr/selectableItemBackground( android:attrbukan attr)
Akhir pekan

1
android:foregroundatribut tidak berpengaruh pada tingkat API yang lebih rendah dari 23
Vadim Kotov

67

Tambahkan Efek Ripple / Animasi ke Tombol Android

Cukup ganti atribut latar belakang tombol Anda dengan android: background = "? Attr / selectableItemBackground" dan kode Anda terlihat seperti ini.

      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground"
        android:text="New Button" />

Cara Lain untuk Menambahkan Efek Ripple / Animasi ke Tombol Android

Dengan menggunakan metode ini, Anda dapat menyesuaikan warna efek riak. Pertama, Anda harus membuat file xml di direktori resource drawable. Buat file ripple_effect.xml dan tambahkan kode berikut. 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="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

Dan setel latar belakang tombol ke file sumber daya dapat digambar di atas

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_effect"
    android:padding="16dp"
    android:text="New Button" />

1
Bagi saya, efek riak tidak muncul. itu hanya tombol warna untuk tombol: / Versi android saya adalah 5.1.1 jadi seharusnya berfungsi. Bisakah Anda membantu? Aku mengikuti
langkahmu

android: warna harus berbeda dari tiang android: warna, atau Anda ingin melihat efek riak
SpyZip

2
jika Anda ingin latar belakang, cukup tambahkan item lain ke riak, seperti: <item android: drawable = "? attr / colorPrimary" />
Tyler

36

Selain solusi Jigar Patel , tambahkan ini ke ripple.xml untuk menghindari latar belakang tombol yang transparan.

<item
    android:id="@android:id/background"
    android:drawable="@color/your-color" />

Xml lengkap :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/your-color"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/your-color" />
        </shape>
    </item>
    <item
        android:id="@android:id/background"
        android:drawable="@color/your-color" />
</ripple>

Gunakan ripple.xml ini sebagai latar belakang di tombol Anda:

android:background="@drawable/ripple"

2
Kami tidak perlu menggunakan <item android:id="@android:id/mask"> [...]. Kecuali jika Anda menginginkan topeng oval. Terima kasih atas jawaban anda!
Filipe Brito

Apa yang dilakukan <item android: id = "@ android: id / mask"> ini, saya membuat 2 elemen serupa dengan dan tanpa atribut itu, dan keduanya terlihat persis sama
Sartheris Stormhammer

@SartherisStormhammer dari dokumen resmi: Jika lapisan topeng disetel, efek riak akan disamarkan terhadap lapisan itu sebelum digambar di atas komposit lapisan anak yang tersisa. Jika tidak ada lapisan topeng yang disetel, efek riak ditutup terhadap komposit lapisan anak. Ini adalah tautannya, developer.android.com/reference/android/graphics/drawable/…
Sudheesh R

@SudheeshR yang hanya membuatnya lebih membingungkan
Sartheris Stormhammer

@SartherisStormhammer Dari dokumentasi resmi itu Saya rasa cukup jelas. Efek riak akan menarik lapisan anak / bertopeng. Silakan baca dokumennya lagi, Anda akan mengerti maksudnya.
Sudheesh R

33

Ketika tombol memiliki latar belakang dari drawable, kita dapat menambahkan efek riak ke parameter latar depan .. Periksa kode di bawah ini berfungsi untuk tombol saya dengan latar belakang berbeda

    <Button
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:gravity="center"
    android:layout_centerHorizontal="true"                                                             
    android:background="@drawable/shape_login_button"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:text="@string/action_button_login"
     />

Tambahkan parameter di bawah untuk efek riak

   android:foreground="?attr/selectableItemBackgroundBorderless"
   android:clickable="true"

Untuk referensi, lihat tautan di bawah ini https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/


2
Atribut android: latar depan tidak berpengaruh pada level API yang lebih rendah dari 23
Ali Khaki

1
Salah satu kelemahan dari pendekatan ini adalah, meskipun latar belakang tombol saya oval, riak menyebar hingga tepi persegi panjang.
iCantC

14

AppCompat v7 +

Jika Anda tidak mengawali dengan ?android:aplikasi Anda akan macet.

Anda harus menggunakan "?android:attr/selectableItemBackground"atau "?android:attr/selectableItemBackgroundBorderless", berdasarkan preferensi Anda. Saya lebih suka Borderless.

Anda dapat memasukkannya ke dalam android:backgroundatau android:foregroundmempertahankan properti yang ada.

Elemen harus memiliki android:clickable="true"dan android:focusable="true"agar ini berfungsi, tetapi banyak elemen, seperti tombol, memilikinya secara truedefault.

<Button
    ...
    android:background="@color/white"
    android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>
<TextView
    ...
    android:background="?android:attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:focusable="true"
/>

Secara terprogram (Java)

TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myView.setBackgroundResource(value.resourceId);
myView.setFocusable(true); // If needed for view type

Secara terprogram (Kotlin)

val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
myView.setBackgroundResource(value.resourceId)
myView.setFocusable(true) // If needed for view type

Fungsi Ekstensi Kotlin yang Dapat Digunakan Kembali

myView.ripple()

fun View.ripple(): View {
    val value = TypedValue()
    context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
    setBackgroundResource(value.resourceId)
    isFocusable = true // Required for some view types
    return this
}

7

Menambahkan atribut latar depan dan yang dapat diklik berhasil untuk saya.

<Button
    ... 
    android:background="@color/your_color"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true" />

6

Selain Sudheesh R

Tambahkan Efek Ripple / Animasi ke Tombol Android dengan tombol berbentuk persegi panjang dengan sudut

Buat file xml res / drawable / nama_file_anda.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/colorWhite"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="50dp" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorAccent"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="50dp" />
        </shape>
    </item>
</ripple>

4

Saat Anda menggunakan android: background, Anda mengganti banyak gaya, tampilan, dan nuansa tombol dengan warna kosong.

Pembaruan: Sejak AppCompat versi 23.0.0, ada Widget.AppCompat.Button.A gaya berwarna baru yang menggunakan colorButtonNormal tema Anda untuk color yang dinonaktifkan dan colorAccent untuk warna yang diaktifkan.

Ini memungkinkan Anda menerapkannya ke tombol Anda secara langsung melalui

<Button
 ...
style="@style/Widget.AppCompat.Button.Colored" />

Anda dapat menggunakan drawable di direktori v21 Anda untuk latar belakang seperti:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>

Ini akan memastikan warna latar belakang Anda adalah? Attr / colorPrimary dan memiliki animasi riak default menggunakan? Attr / colorControlHighlight default (yang juga dapat Anda setel di tema jika Anda mau).

Catatan: Anda harus membuat pemilih khusus kurang dari v21:

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

im menggunakan minSDK lvl 21
rakcode

tidak ada folder drawable v21, hanya satu folder yang folder itu sendiri folder
v21

ya, saya juga menggunakan API ini, jika saya menggunakan API ini setelah mengklik aplikasi saya
macet

sebenarnya, saya menguji aplikasi saya di ponsel saya dengan mode debug, dan OS saya adalah CyanogenMod13 (Android 6, Marshmellow)
rakcode

4

coba ini

<Button
            android:id="@+id/btn_location"
            android:layout_width="121dp"
            android:layout_height="38dp"
            android:layout_gravity="center"
            android:layout_marginBottom="24dp"
            android:layout_marginTop="24dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
            android:background="@drawable/btn_corner"
            android:gravity="center_vertical|center_horizontal"
            android:paddingLeft="13dp"
            android:paddingRight="13dp"
            android:text="Save"
            android:textColor="@color/color_white" />

4

Pendekatan sederhana adalah menetapkan tema tampilan seperti yang diuraikan di sini .

some_view.xml

<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="?attr/selectableItemBackgroundBorderless"
   android:focusable="true"
   android:src="@drawable/up_arrow"
   android:theme="@style/SomeButtonTheme"/>

some_style.xml

<style name="SomeButtonTheme" >
   <item name="colorControlHighlight">@color/someColor</item>
</style>

3

Gunakan saja:

android:backgroundTint="#f816a463"

Dari pada:

android:background="#f816a463"

Jangan lupa untuk mengubah Anda Buttonmenjadiandroid.support.v7.widget.AppCompatButton


1
Yang buruk adalah jika Anda membutuhkan tombol untuk mengisi 100% layar horizontal Anda tidak akan melakukannya.
Filipe Brito

1

Solusi alternatif untuk menggunakan <ripple>tag (yang secara pribadi saya lebih memilih untuk tidak melakukannya, karena warnanya bukan "default"), adalah sebagai berikut:

Buat drawable untuk latar belakang tombol, dan sertakan <item android:drawable="?attr/selectableItemBackground">di<layer-list>

Kemudian (dan saya pikir ini adalah bagian penting) secara terprogram diatur backgroundResource(R.drawable.custom_button)pada contoh tombol Anda.

Aktivitas / Fragmen

Button btn_temp = view.findViewById(R.id.btn_temp);
btn_temp.setBackgroundResource(R.drawable.custom_button);

Tata Letak

<Button
    android:id="@+id/btn_temp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button"
    android:text="Test" />

custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item android:drawable="?attr/selectableItemBackground" />
</layer-list>

Mengapa harus menyetel backgroundResource secara terprogram lagi, sedangkan layout xml menentukan latar belakang Tombol?
SunnyShiny9
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.