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!

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.

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

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" />

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"

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/

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
}

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

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

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>

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>

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" />

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>

Gunakan saja:

android:backgroundTint="#f816a463"

Dari pada:

android:background="#f816a463"

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

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>