Efek material pada tombol dengan warna latar belakang

Saya menggunakan perpustakaan dukungan Android v21.

Saya telah membuat tombol dengan warna latar belakang khusus. Efek desain Material seperti riak, mengungkapkan hilang (kecuali ketinggian saat klik) ketika saya menggunakan warna tanah belakang.

 <Button
 style="?android:attr/buttonStyleSmall"
 android:background="?attr/colorPrimary"
 android:textColor="@color/white"
 android:textAllCaps="true"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 />

Berikut ini adalah tombol normal dan efeknya berfungsi dengan baik.

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textAllCaps="true"
 android:text="Button1"
/>

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

Update: Sampai dengan rilis versi 23.0.0 dari appcompat , ada yang baru Widget.AppCompat.Button.Coloredgaya yang menggunakan tema Anda colorButtonNormaluntuk warna cacat dan colorAccentuntuk warna diaktifkan.

Ini memungkinkan Anda menerapkannya ke tombol Anda langsung melalui

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

Jika Anda memerlukan kustom colorButtonNormalatau colorAccent, Anda dapat menggunakan ThemeOverlayseperti yang dijelaskan dalam pro-tip ini dan android:themepada tombol.

Jawaban Sebelumnya

Anda dapat menggunakan drawable di direktori v21 Anda untuk latar belakang Anda 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 ?attr/colorPrimarydan memiliki animasi riak default menggunakan default ?attr/colorControlHighlight(yang Anda juga dapat mengatur dalam tema Anda 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>

Dengan asumsi Anda memiliki beberapa warna yang Anda inginkan untuk keadaan default, ditekan, dan fokus. Secara pribadi, saya mengambil screenshot dari riak di tengah dipilih dan menarik negara / fokus utama dari itu.

Ada solusi sederhana lain untuk memberikan latar belakang kustom untuk tombol "Flat" sambil tetap mempertahankan efek "Material".

1. Tempatkan tombol Anda di ViewGroup dengan latar belakang yang diinginkan diatur di sana
2. setel selectableItemBackground dari tema saat ini sebagai latar belakang untuk tombol Anda (API> = 11)

yaitu:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/blue">
    <Button
        style="?android:attr/buttonStyleSmall"
        android:background="?android:attr/selectableItemBackground"
        android:textColor="@android:color/white"
        android:textAllCaps="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
</FrameLayout>

Dapat digunakan untuk tombol Flat , itu berfungsi pada API> = 11, dan Anda akan mendapatkan efek riak pada> = 21 perangkat, menjaga tombol biasa pada pra-21 hingga AppCompat diperbarui untuk mendukung riak di sana juga.

Anda juga dapat menggunakan selectableItemBackgroundBorderless untuk> = 21 tombol saja.

Berikut ini adalah cara yang kompatibel sederhana dan terbelakang untuk memberikan efek riak ke tombol terangkat dengan latar belakang khusus.

Tata letak Anda akan terlihat seperti ini

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/my_custom_background"
    android:foreground="?android:attr/selectableItemBackground"/>

Saya mengalami masalah ini hari ini sebenarnya bermain dengan perpustakaan v22.

Dengan asumsi bahwa Anda menggunakan gaya Anda dapat mengatur colorButtonNormalproperti dan tombol akan menggunakan warna itu secara default.

<style name="AppTheme" parent="BaseTheme">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="colorAccent">@color/accentColor</item>
    <item name="colorButtonNormal">@color/primaryColor</item>
</style>

Di luar itu Anda masih bisa membuat gaya untuk tombol kemudian gunakan itu per tombol jika Anda membutuhkan berbagai macam warna (belum diuji, hanya berspekulasi).

Ingatlah untuk menambahkan android:sebelum nama item dalam gaya v21 Anda .

Dengan AppCompat (22.1.1+) Anda dapat menambahkan gaya seperti ini:

<style name="MyGreenButton">
    <item name="colorButtonNormal">#009900</item>
</style>

Dan gunakan dengan hanya menerapkan gaya:

<android.support.v7.widget.AppCompatButton
    style="@style/MyGreenButton"
    android:layout_width="match_width"
    android:layout_height="wrap_content"
    android:text="A Green Button"
    />

Secara terprogram mengubah warna, saya menemukan bahwa satu-satunya cara untuk memperbarui warna (pada API 15 atau 16) adalah dengan menggunakan 'daftar warna latar belakang'. Dan itu tidak menghapus animasi radial yang bagus di perangkat API 21:

ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF009900}); // 0xAARRGGBB
button.setSupportBackgroundTintList(colorStateList);

Karena button.setBackground(...)dan button.getBackground().mutate().setColorFilter(...)tidak mengubah warna tombol pada API 15 dan 16 seperti yang mereka lakukan pada API 21.

Jawaban @ ianhanniballake benar-benar benar dan sederhana. Tapi saya butuh beberapa hari untuk mengerti. Untuk seseorang yang tidak mengerti jawabannya, berikut ini adalah implementasi yang lebih detail

<Button
        android:id="@+id/btn"
        style="@style/MaterialButton"
        ... />


<style name="MaterialButton" parent="Widget.AppCompat.Button.Colored">
    <item name="android:theme">@style/Theme.MaterialButton</item>
   ...
</style>


<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

=== Atau ===

<Button
        android:id="@+id/btn"
        style="@style/Widget.AppCompat.Button.Colored"
        android:theme="@style/Theme.MaterialButton" />

<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

Saya menggunakan backgroundTint dan foreground:

<Button
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:backgroundTint="@color/colorAccent"
    android:foreground="?android:attr/selectableItemBackground"
    android:textColor="@android:color/white"
    android:textSize="10sp"/>

Saya datang ke pos ini mencari cara untuk memiliki warna latar belakang ListViewItem saya , namun tetap mempertahankan riaknya.

Saya cukup menambahkan warna saya sebagai latar belakang dan selectableItemBackground sebagai latar depan:

<style name="my_list_item">
    <item name="android:background">@color/white</item>
    <item name="android:foreground">?attr/selectableItemBackground</item>
    <item name="android:layout_height">@dimen/my_list_item_height</item>
</style>

dan itu bekerja seperti pesona. Saya kira teknik yang sama bisa digunakan untuk tombol juga. Semoga berhasil :)

Gunakan backgroundTintsebagai gantibackground

Jika Anda tertarik dengan ImageButton, Anda dapat mencoba hal sederhana ini:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

v22.1dari appcompat-v7memperkenalkan beberapa kemungkinan baru. Sekarang mungkin untuk menetapkan tema tertentu hanya untuk satu tampilan.

Penggunaan aplikasi yang sudah tidak digunakan: tema untuk menata Toolbar. Anda sekarang dapat menggunakan android: theme untuk toolbar pada semua perangkat API level 7 dan lebih tinggi dan android: dukungan tema untuk semua widget di API level 11 dan perangkat yang lebih tinggi.

Jadi alih-alih mengatur warna yang diinginkan dalam tema global, kami membuat yang baru dan menetapkannya hanya untuk Button

Contoh:

<style name="MyColorButton" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorButtonNormal">@color/myColor</item>
</style>

Dan gunakan gaya ini sebagai tema Anda Button

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 android:theme="@style/MyColorButton"/>

Jika Anda setuju menggunakan perpustakaan pihak ketiga, lihat traex / RippleEffect . Ini memungkinkan Anda untuk menambahkan efek Ripple ke tampilan APAPUN hanya dengan beberapa baris kode. Anda hanya perlu membungkus, dalam file tata letak xml Anda, elemen yang Anda inginkan memiliki efek riak dengan sebuah com.andexert.library.RippleViewwadah.

Sebagai bonus tambahan, ini membutuhkan Min SDK 9 sehingga Anda dapat memiliki konsistensi desain di seluruh versi OS.

Berikut ini contoh yang diambil dari repo GitHub perpustakaan:

<com.andexert.library.RippleView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:rv_centered="true">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@android:drawable/ic_menu_edit"
        android:background="@android:color/holo_blue_dark"/> 

</com.andexert.library.RippleView>

Anda dapat mengubah warna riak dengan menambahkan atribut ini elemen RippleView: app:rv_color="@color/my_fancy_ripple_color

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#fff"
    android:textColor="#000"
    android:text="test"/>

Menggunakan

xmlns:app="http://schemas.android.com/apk/res-auto"

dan warnanya akan diterima pada pra-lolipop

Ada dua pendekatan yang dijelaskan dalam tutorial yang bagus menjadi Alex Lockwood: http://www.androiddesignpatterns.com/2016/08/coloring-buttons-with-themeoverlays-background-tints.html :

Pendekatan # 1: Memodifikasi warna latar belakang tombol dengan ThemeOverlay

<!-- res/values/themes.xml -->
<style name="RedButtonLightTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">@color/googred500</item>
</style>

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RedButtonLightTheme"/>

Pendekatan # 2: Mengatur warna latar belakang AppCompatButton

<!-- res/color/btn_colored_background_tint.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Disabled state. -->
    <item android:state_enabled="false"
          android:color="?attr/colorButtonNormal"
          android:alpha="?android:attr/disabledAlpha"/>

    <!-- Enabled state. -->
    <item android:color="?attr/colorAccent"/>

</selector>

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/btn_colored_background_tint"/>

Secara terprogram menerapkan warna:

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {

    ColorStateList colorStateListRipple = new ColorStateList(
            new int[][] {{0}},
            new int[] {Color.WHITE} // ripple color
            );

    RippleDrawable rippleDrawable = (RippleDrawable) myButton.getBackground();
    rippleDrawable.setColor(colorStateListRipple);
    myButton.setBackground(rippleDrawable); // applying the ripple color
}

ColorStateList colorStateList = new ColorStateList(
        new int[][]{
                new int[]{android.R.attr.state_pressed}, // when pressed
                new int[]{android.R.attr.state_enabled}, // normal state color
                new int[]{} // normal state color
        },
        new int[]{
                Color.CYAN, // when pressed
                Color.RED, // normal state color
                Color.RED // normal state color
        }
);

ViewCompat.setBackgroundTintList(myButton, colorStateList); // applying the state colors

Saya mencoba ini:

android:backgroundTint:"@color/mycolor"

alih-alih mengubah properti latar belakang. Ini tidak menghilangkan efek material.