Tombol Warna di Android dengan Desain Material dan AppCompat


256

Sebelum AppCompatpembaruan keluar hari ini saya bisa mengubah warna tombol di Android L tetapi tidak pada versi yang lebih lama. Setelah memasukkan pembaruan AppCompat baru saya tidak dapat mengubah warna untuk kedua versi, ketika saya mencoba tombol hanya menghilang. Adakah yang tahu cara mengubah warna tombol?

Gambar-gambar berikut menunjukkan apa yang ingin saya capai:

gambar yang menunjukkan hasil yang diinginkan

Tombol putih adalah default, yang merah adalah yang saya inginkan.

Inilah yang saya lakukan sebelumnya untuk mengubah warna tombol di styles.xml:

<item name="android:colorButtonNormal">insert color here</item>

dan melakukannya secara dinamis:

button.getBackground().setColorFilter(getResources().getColor(insert color here), PorterDuff.Mode.MULTIPLY);

Saya juga mengubah tema induk dari @android:style/Theme.Material.Light.DarkActionBarmenjadiTheme.AppCompat.Light.DarkActionBar


Saya mencoba yang sama tetapi tidak ada yang mengubah warna Button. Saya juga menghapus android: dari atribut karena itu dari lib dukungan dan bukan bagian dari namespace android
Informatic0re

Jika Anda menggunakan Android: colorButtonNormal dengan Android 5.0 berfungsi - tetapi tampaknya tidak kompatibel
Informatic0re

Ya itulah yang saya alami
mail929

Saya juga menemukan bahwa warna aksen tidak mengubah warna kotak centang, tetapi tidak dalam versi yang lebih lama
Informatic0re

ditambah satu untuk metode dinamis itu. :)
theapache64

Jawaban:


222

Secara resmi diperbaiki di Perpustakaan Dukungan rev.22 (Jumat 13 Maret 2015). Lihat masalah kode google yang relevan:

https://issuetracker.google.com/issues/37008632

Contoh penggunaan

theme.xml:

<item name="colorButtonNormal">@color/button_color</item>

v21 / theme.xml

<item name="android:colorButtonNormal">@color/button_color</item>

17
Apakah ada contoh cara menggunakannya? Bagaimana saya bisa mengatur warna hanya pada satu Tombol?
Intrications

3
@ WindRider Saya punya masalah, saya ingin menggunakannya untuk membuat tombol dengan warna yang berbeda. Saya membuat gaya Button.Red, Button.Green, semua dengan induk sama dengan gaya dasar Button. Saya mengatur item colorButtonNormal ke warna yang diminta, mengatur ini sebagai tema tombol. Sayangnya itu hanya tombol warna untuk 21. Di bawahnya tidak menimpa colorButtonNormal didefinisikan dalam tema.
dominik4142

71
Dengan AppCompat 22.1.1 ia bekerja untuk saya di 2.3.7, 4.4.4 dan 5.1 juga hanya untuk satu tombol: tombol pengaturan android:theme="@style/ColoredButton", dan di styles.xml <style name="ColoredButton" parent="Widget.AppCompat.Button"> <item name="colorButtonNormal">@color/button_yellow</item> </style>
hunyadym

2
@hunyadym, menambahkan tema ke tombol jeda onClick untuk beberapa alasan. Saya akan mengklasifikasikan ini sebagai solusi sampai perpustakaan Desain menyediakan cara yang lebih baik.
diarsir

3
@gladed: Tampaknya dalam kasus Anda masalahnya adalah bug ini: code.google.com/p/android/issues/detail?id=62795#c1
hunyadym

148

Edit (22.06.2016):

Pustaka Appcompat mulai mendukung tombol materi setelah saya memposting respons asli. Dalam posting ini Anda dapat melihat implementasi termudah dari tombol datar dan datar.

Jawaban asli:

Karena AppCompat itu tidak mendukung tombol, Anda dapat menggunakan xml sebagai latar belakang. Untuk melakukan itu saya telah melihat kode sumber Android dan menemukan file terkait untuk tombol bahan styling.

1 - Lihatlah implementasi asli tombol material dari sumber.

Lihatlah btn_default_material.xml pada kode sumber android .

Anda dapat menyalin file ke folder drawable-v21 proyek Anda. Tapi jangan sentuh attr warna di sini. File yang perlu Anda ubah adalah file kedua.

drawable-v21 / custom_btn.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

2 - Dapatkan bentuk tombol bahan asli

Ketika Anda menyadari ada bentuk yang digunakan di dalam drawable ini yang dapat Anda temukan di file kode sumber ini .

<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/button_inset_horizontal_material"
   android:insetTop="@dimen/button_inset_vertical_material"
   android:insetRight="@dimen/button_inset_horizontal_material"
   android:insetBottom="@dimen/button_inset_vertical_material">
<shape android:shape="rectangle">
    <corners android:radius="@dimen/control_corner_material" />
    <solid android:color="?attr/colorButtonNormal" />
    <padding android:left="@dimen/button_padding_horizontal_material"
             android:top="@dimen/button_padding_vertical_material"
             android:right="@dimen/button_padding_horizontal_material"
             android:bottom="@dimen/button_padding_vertical_material" />
</shape>

3 - Mendapatkan dimensi tombol material

Dan dalam file ini Anda ada beberapa dimensi yang digunakan dari file yang dapat Anda temukan di sini . Anda dapat menyalin seluruh file dan memasukkan nilai Anda folder . Ini penting untuk menerapkan ukuran yang sama (yang digunakan pada tombol material) untuk semua tombol

4 - Buat file lain yang dapat ditarik untuk versi lama

Untuk versi yang lebih lama Anda harus memiliki drawable lain dengan nama yang sama. Saya langsung meletakkan item dalam inline alih-alih referensi. Anda mungkin ingin referensi mereka. Tapi sekali lagi, yang paling penting adalah dimensi asli dari tombol material.

drawable / custom_btn.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- pressed state -->
    <item android:state_pressed="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/PRESSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- focused state -->
    <item android:state_focused="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/FOCUSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- normal state -->
    <item>
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/NORMAL_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
</selector>

Hasil

Tombol Anda akan memiliki efek riak pada perangkat Lollipop. Versi lama akan memiliki tombol yang persis sama kecuali efek riak. Tetapi karena Anda menyediakan drawable untuk status yang berbeda, mereka juga akan merespons acara sentuh (seperti cara lama).


4
Ya persis. Jika Anda menggunakan latar belakang yang sama untuk semua tombol dan jika Anda tidak ingin menambahkan ini lagi dan lagi, tentukan gaya tombol di styles.xml <style name = "ButtonStyle" parent = "android: Widget.Button"> < item name = "android: background"> ​​@ drawable / custom_btn </item> </style> dan tambahkan gaya tombol di tema Anda <item name = "android: buttonStyle"> @ style / ButtonStyle </item>
eluleci

1
bagaimana cara menambahkan ketinggian ke tombol ini pada pra-21? seperti yang saya mengerti saya harus menambahkan bentuk baru dengan tombol bayangan di bawah ini, tetapi di mana tepatnya saya harus meletakkannya?
xakz

7
Sangat menjengkelkan karena ini tidak didukung di luar kotak
Sam

39
Saya sangat setuju dengan anda. Tombol adalah widget yang paling banyak digunakan tetapi tidak termasuk dalam pustaka dukungan untuk materi. Saya ingin tahu apa yang mereka pikirkan.
eluleci

1
Juga, mengikuti panduan Anda, tampaknya latar belakangnya tidak muncul sama sekali ...
JMRboosties

111

Ini telah ditingkatkan di pustaka AppCompat v23.0.0 dengan penambahan lebih banyak tema termasuk

Widget.AppCompat.Tombol. Diwarna

Pertama-tama sertakan ketergantungan appCompat jika Anda belum melakukannya

compile('com.android.support:appcompat-v7:23.0.0') {
    exclude group: 'com.google.android', module: 'support-v4'
}

sekarang karena Anda perlu menggunakan v23 dari aplikasi compat, Anda harus menargetkan SDK-v23 juga!

    compileSdkVersion = 23
    targetSdkVersion = 23

Di Anda values/theme

<item name="android:buttonStyle">@style/BrandButtonStyle</item>

Di Anda values/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

Di Anda values-v21/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

Karena tema tombol Anda didasarkan pada Widget.AppCompat.Button.Colored Warna teks pada tombol secara default putih!

tetapi tampaknya ada masalah ketika Anda menonaktifkan tombol, tombol akan berubah warna menjadi abu-abu terang, tetapi warna teks akan tetap putih!

solusi untuk ini adalah secara khusus mengatur warna teks pada tombol menjadi putih! seperti yang saya lakukan dalam gaya yang ditunjukkan di atas.

sekarang Anda dapat dengan mudah menentukan tombol Anda dan biarkan AppCompat melakukan sisanya :)

<Button
        android:layout_width="200dp"
        android:layout_height="48dp" />

Status Penyandang Cacat Status dinonaktifkan

Status Diaktifkan Status Diaktifkan

Edit:

Menambahkan <Button android:theme="@style/BrandButtonStyle"/>


19
Itu cara terbaik untuk melakukannya, sekarang! Anda juga dapat menggunakan gaya pada tombol individual dengan <Button android:theme="@style/BrandButtonStyle"/>. Ini harus menjadi themeatribut dan tidak yang styleatribut.
mohlendo

7
@Muhammad Alfaifi Apakah Anda memiliki proyek sampel atau inti untuk ini? Saya telah membuat proyek bersih dan tidak berfungsi: github.com/Bresiu/ThemeTest . Dalam warna tombol Lolipop dengan warna aksen dan pada API v16, tombol tetap abu-abu: i.imgur.com/EVwkpk2.png
Bresiu

4
Ini hanya bekerja untuk saya ketika menentukan atribut android: theme. Saya tidak bisa mendapatkan gaya atribut untuk saya dengan tag tombol.
Ray Hunter

8
Menggunakan v23.1 lib, ini tidak berfungsi dengan benar, selalu menunjukkan warna aksen sebagai bg, bukan yang didefinisikan, ketika mencoba mengaturnya ke seluruh tema
Patrick Favre

3
Masalah yang sama di sini, pada v23.1 tombol dinonaktifkan sama warna dengan tombol yang diaktifkan. sangat membuat frustrasi. ada yang tahu ini?
AhmedW

63

Di Android Support Library 22.1.0, Google membuat Buttonwarna menjadi sadar. Jadi, cara lain untuk menyesuaikan warna latar belakang tombol adalah dengan menggunakanbackgroundTint atribut.

Sebagai contoh,

<Button
       android:id="@+id/add_remove_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:backgroundTint="@color/bg_remove_btn_default"
       android:textColor="@android:color/white"
       tools:text="Remove" />

1
Akhirnya! Posting blog tentang rilis 22.1: android-developers.blogspot.no/2015/04/...
GuillermoMP

5
Dokumentasi mengatakan: "Ini akan secara otomatis digunakan ketika Anda menggunakan Tombol di tata letak Anda. Anda hanya perlu menggunakan kelas ini secara manual saat menulis tampilan khusus." developer.android.com/reference/android/support/v7/widget/... apakah ini berarti kita tidak perlu mengubah semua tata letak dan kode java secara manual?
Stephane

@Sthane tidak, kita harus mengubah tata letak. chris.banes.me/2015/04/22/support-libraries-v22-1-0
Anton Holovin

LUAR BIASA! Sekarang, apakah ada AppCompatToggleButton yang memungkinkan Anda mengubah latar belakang ToggleButtons? Mungkin saya bisa menjiplak kode ...
swooby

19
Sayangnya ini hanya berfungsi pada API 21+. Atribut android: backgroundTint tidak berfungsi pada pra-Lollipop bahkan dengan pustaka AppCompat. Hanya colorButtonNormal dari tema yang berfungsi di pra-Lollipop.
Timur_C

42

Untuk mendukung tombol berwarna, gunakan pustaka AppCompat terbaru (> 23.2.1 ) dengan:

mengembang - XML

Widget AppCompat:

android.support.v7.widget.AppCompatButton

Gaya AppCompat:

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

NB! Untuk mengatur warna khusus dalam xml: gunakan attr: appsebagai gantiandroid

(gunakan alt+enteratau nyatakan xmlns:app="http://schemas.android.com/apk/res-auto"untuk digunakan app)

app : backgroundTint = "@ color / your_custom_color"

Contoh:

<android.support.v7.widget.AppCompatButton
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/your_custom_color"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"     
     android:text="Colored Button"/>

atau atur secara terprogram - JAVA

 ViewCompat.setBackgroundTintList(your_colored_button,
 ContextCompat.getColorStateList(getContext(),R.color.your_custom_color));

Kode Java Anda berfungsi untuk saya. Dan jawaban Muhammad Alfaifi membantu mengatur warna teks tombol.
Micro

apakah ada cara mudah untuk mengatur warna secara terprogram (bukan latar belakang)?
brankas

Hebat! Bekerja pada 4.4.4 juga! Dan negara pemilih juga dipertahankan dengan baik!
sud007

Per dokumen : Ini secara otomatis digunakan ketika mengatur tombol di layout Anda. Anda hanya perlu menentukan AppCompatButton saat membuat tampilan khusus.
gMale

Menariknya, perubahan XML bekerja dengan sempurna dalam sebuah fragmen tetapi tidak dalam tata letak Kegiatan. Tombol Aktivitas hanya menggunakan colorAccent. Versi programnya bekerja.
Leon

25

Dengan Pustaka Dukungan terbaru, Anda hanya dapat mewarisi aktivitas Anda AppCompatActivity, sehingga itu akan mengembang Buttonsebagai Anda AppCompatButtondan memberi Anda kesempatan untuk menata warna setiap tombol pada tata letak dengan penggunaan android:theme="@style/SomeButtonStyle", di mana SomeButtonStyleadalah:

<style name="SomeButtonStyle" parent="@android:style/Widget.Button">
    <item name="colorButtonNormal">@color/example_color</item>
</style>

Bekerja untuk saya di 2.3.7, 4.4.1, 5.0.2


Terima kasih!!! Saya baru saja mengubah nilai induk untuk "Widget.AppCompat.EditText" karena saya perlu memperbarui gaya EditText.
Juan Saravia

3
Terima kasih, bekerja untuk saya juga. Pastikan untuk menggunakan android:themedan tidak style. Anda juga dapat menambahkan colorControlHighlightdan colorControlActivated.
Rachel

tidak berfungsi, API 22, AppCompatActivity, tema Material.Light
Andrey Uglev

1
@AndreyUglev coba gunakan Theme.AppCompat.Lightsebagai gantinya.
Artem

Hai, itu mengubah warna yang diinginkan TETAPI menghilangkan bayangan.
Amio.io

16

jika Anda ingin gaya di bawah ini

masukkan deskripsi gambar di sini

tambahkan gaya ini tombol Anda

style="@style/Widget.AppCompat.Button.Borderless.Colored"

jika Anda menginginkan gaya ini

masukkan deskripsi gambar di sini

tambahkan kode di bawah ini

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

1
compile 'com.android.support:appcompat-v7:23.1.0'Anda harus menambahkan.
Pratik Butani

1
tetapi pertanyaannya adalah bagaimana memiliki tombol material dengan warna yang berbeda, sehingga tidak semua memiliki warna utama dari tema tersebut.
Apostrfix

15

Jawabannya adalah TEMA bukan gaya

Masalahnya adalah bahwa warna Tombol menempel pada colorButtonNormal tema. Saya telah mencoba mengubah Style dengan berbagai cara tanpa hasil. Jadi saya mengubah tema tombol .

Buat tema dengan colorButtonNormal dan colorPrimary:

<style name="ThemeAwesomeButtonColor" parent="AppTheme">
    <item name="colorPrimary">@color/awesomePrimaryColor</item>
    <item name="colorButtonNormal">@color/awesomeButtonColor</item>
</style>

Gunakan tombol tema ini

<Button
        android:id="@+id/btn_awesome"
        style="@style/AppTheme.Button"
        android:theme="@style/ThemeAwesomeButtonColor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_awesome"/>

"AppTheme.Button" dapat berupa apa saja yang memperluas gaya Tombol seperti di sini saya menggunakan warna primer untuk warna teks:

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
    ...
    <item name="android:textColor">?attr/colorPrimary</item>
    ...
</style>

Dan Anda mendapatkan tombol dalam warna apa pun yang Anda inginkan yang kompatibel dengan desain material.


apa atribut lain yang bisa saya tambahkan ke gaya.
Sagar Nayak

4

Saya baru saja membuat perpustakaan android, yang memungkinkan Anda dengan mudah memodifikasi warna tombol dan warna riak

https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

Anda tidak perlu membuat gaya untuk setiap tombol yang Anda inginkan dengan warna yang berbeda, memungkinkan Anda untuk menyesuaikan warna secara acak


4

ini bekerja untuk saya dengan appcompat-v7: 22.2.0 di android + 4.0

di styles.xml Anda

<style name="Button.Tinted" parent="Widget.AppCompat.Button">
    <item name="colorButtonNormal">YOUR_TINT_COLOR</item>
    <item name="colorControlHighlight">@color/colorAccent</item>
    <item name="android:textColor">@android:color/white</item>
</style>

dalam file tata letak Anda

<Button
    android:id="@+id/but_next"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/but_continue"
    android:theme="@style/Button.Tinted" />

Hai, itu mengubah warna yang diinginkan TETAPI menghilangkan bayangan.
Amio.io

Hai lagi, saya bisa melihat. Itu perilaku yang pantas sekarang.
Amio.io

Bagaimana Anda bisa melakukan ini di Jawa?
Micro

@MicroR periksa jawaban di atas.
ingyesid

4

Tata letak:

<android.support.v7.widget.AppCompatButton
  style="@style/MyButton"
  ...
  />

styles.xml:

<style name="MyButton" parent="Widget.AppCompat.Button.Colored">
  <item name="backgroundTint">@color/button_background_selector</item>
  <item name="android:textColor">@color/button_text_selector</item>
</style>

color / button_background_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#555555"/>
    <item android:color="#00ff00"/>
</selector>

color / button_text_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#888888"/>
    <item android:color="#ffffff"/>
</selector>

3

Bagi mereka yang menggunakan di ImageButtonsini adalah bagaimana Anda melakukannya:

Di style.xml:

<style name="BlueImageButton" parent="Base.Widget.AppCompat.ImageButton">
    <item name="colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

di v21 / style.xml:

<style name="BlueImageButton" parent="Widget.AppCompat.ImageButton">
    <item name="android:colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

Kemudian di file tata letak Anda:

<android.support.v7.widget.AppCompatImageButton
    android:id="@+id/my_button"
    android:theme="@style/BlueImageButton"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:layout_gravity="center_vertical"
    android:src="@drawable/ic_check_black_24dp"
    />

Ini membantu .... Saya rasa penting untuk dicatat untuk menerapkan gaya tombol sebagai tema alih-alih gaya di widget Tombol. Saya menerapkannya di bawah style = "@ style / BlueImageButton" dan tidak berfungsi
velval

3

Jika Anda menggunakan solusi gaya dengan colorButtonNormal , jangan lupa untuk mewarisi dari Widget.AppCompat.Button.Colored sehingga efek riak bekerja;)

Suka

<style name="CustomButtonStyle" parent="Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@android:color/white</item>
</style>

2

Solusi sederhana lain menggunakan AppCompatButton

<android.support.v7.widget.AppCompatButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/red"
     android:text="UNINSTALL" />

2

Menggunakan:

android:backgroundTint="@color/customColor"

Atau bahkan :

android:background="@color/customColor"

dan itu akan memberi warna khusus pada tombol.


1

Jika Anda hanya ingin tombol material "Rata", Anda dapat menyesuaikan latar belakangnya menggunakan atribut selectableItemBackground seperti dijelaskan di sini .


Jika Anda tidak ingin mengubah salah satu dari warna "tint" atau warna yang dipilih, ini jelas merupakan solusi mudah untuk tetap mendapatkan umpan balik dengan tombol berwarna. Terima kasih!
theblang

1

Untuk mengubah warna satu tombol

ViewCompat.setBackgroundTintList(button, getResources().getColorStateList(R.color.colorId));

1

Bagi saya, masalahnya adalah bahwa di Android 5.0 android:colorButtonNormaltidak ada efek, dan sebenarnya, tidak ada item dari tema (seperti android:colorAccent), tetapi di Android 4.4.3, misalnya, lakukan. Proyek ini dikonfigurasi dengan compileSdkVersiondan targetSdkVersionke 22, jadi saya telah membuat semua perubahan ketika @Muhammad Alfaifi menyarankan, tetapi pada akhirnya, saya perhatikan bahwa masalahnya adalah buildToolsVersion , yang tidak diperbarui. Begitu saya berubah ke 23.0.1 , semuanya mulai bekerja hampir seperti biasa. Sekarang, android:colorButtonNormalmasih tidak memiliki efek, tetapi setidaknya tombol bereaksiandroid:colorAccent , yang bagi saya dapat diterima.

Saya harap petunjuk ini dapat membantu seseorang. Catatan: Saya telah menerapkan gaya langsung ke tombol, karena tombolnya android:theme=[...]juga tidak memiliki efek.


Anda hampir menemukan cara yang benar 100% bagaimana menggunakan @ style / Widget.AppCompat.Button.Colored;) baru - lihat jawaban ini stackoverflow.com/a/35811157/19733911
sosite

1

Salah satu cara untuk melakukan ini memungkinkan Anda untuk hanya menunjuk ke gaya dan BUKAN tema SEMUA tombol di aplikasi Anda sama.
Di themes.xml tambahkan tema

    <style name="Theme.MyApp.Button.Primary.Blue" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">@color/someColor</item>
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

Sekarang di styles.xml tambahkan

    <style name="MyApp.Button.Primary.Blue" parent="">
        <item name="android:theme">@style/Theme.MyApp.Button.Primary.Blue</item>
    </style>

Sekarang di tata letak Anda cukup arahkan ke GAYA di Tombol Anda

    <Button
        ...
        style="@style/MyApp.Button.Primary.Blue"
        ...  />

1

MEMPERBARUI

Gunakan pustaka dukungan desain (23.2.0) dan appcompatwidgets seperti di bawah ini

Di Perpustakaan Dukungan Android 22.1 :

Ini dilakukan secara otomatis ketika menggembungkan tata letak - mengganti Tombol dengan AppCompatButton, TextView dengan AppCompatTextView, dll. Untuk memastikan bahwa masing-masing dapat mendukung pewarnaan. Dalam rilis ini, widget-widget yang diwarnai warna sekarang tersedia untuk umum, memungkinkan Anda untuk tetap memberi dukungan warna bahkan jika Anda perlu mensubklasifikasikan salah satu widget yang didukung.

Daftar lengkap widget sadar warna:

AppCompatAutoCompleteTextView
AppCompatButton
AppCompatCheckBox
AppCompatCheckedTextView
AppCompatEditText
AppCompatMultiAutoCompleteTextView
AppCompatRadioButton
AppCompatRatingBar
AppCompatSpinner
AppCompatTextView

Desain Material untuk Perangkat Pra-Lollipop :

AppCompat (alias ActionBarCompat) dimulai sebagai backport dari Android 4.0 ActionBar API untuk perangkat yang berjalan di Gingerbread, menyediakan lapisan API umum di atas implementasi backported dan implementasi kerangka kerja. AppCompat v21 menghadirkan API dan set-fitur yang terbaru dengan Android 5.0



1

Jika Anda ingin menggunakan gaya AppCompat seperti Widget.AppCompat.Button , Base.Widget.AppCompat.Button.Colored , dll., Anda perlu menggunakan gaya ini dengan tampilan yang kompatibel dari perpustakaan dukungan.

Kode di bawah ini tidak berfungsi untuk perangkat pra-lolipop:

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

Anda perlu menggunakan AppCompatButton untuk mengaktifkan gaya AppCompat:

<android.support.v7.widget.AppCompatButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:theme="@style/Widget.AppCompat.Button" />

2
Bukankah widget compat aplikasi digunakan secara otomatis saat menggembungkan tata letak XML? Saya percaya ImageViewakan diganti dengan AppCompatImageViewdan itu harus sama dengan semua widget, yang memiliki AppCompatversi yang sesuai .
d.aemon

Tidak, Jika Anda tidak menargetkan versi target terakhir, Anda perlu mendefinisikan android.support.v7.widget.AppCompatImageViewsecara eksplisit.
farukcankaya

Apa yang Anda maksud dengan last target version, @power?
d.aemon

1

Saya menggunakan ini. Efek riak dan bayangan klik tombol berfungsi.

style.xml

<style name="Button.Red" parent="Widget.AppCompat.Button.Colored">
    <item name="android:textColor">@color/material_white</item>
    <item name="android:backgroundTint">@color/red</item>
</style>

Tombol pada tata letak:

<Button
        style="@style/Button.Red"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/close"/>

0

Saya sebenarnya tidak ingin perubahan pada gaya tombol kustom saya tetapi sayangnya mereka tidak berfungsi lagi.

Aplikasi saya memiliki minSdkVersion dari 9 dan semuanya berfungsi sebelumnya.

Saya tidak tahu mengapa, tetapi karena saya menghapus android: sebelum buttonStyle sepertinya berfungsi lagi

sekarang = berfungsi:

<item name="buttonStyle">@style/ButtonmyTime</item>

before = hanya tombol material abu-abu:

<item name="android:buttonStyle">@style/ButtonmyTime</item>

Saya tidak memiliki folder spezial untuk versi android yang lebih baru karena tombol saya cukup datar dan harus terlihat sama di semua versi android.

Mungkin seseorang dapat memberi tahu saya mengapa saya harus menghapus "android:" ImageButton masih bekerja dengan "android:"

<item name="android:imageButtonStyle">@style/ImageButtonmyTimeGreen</item>

0

Setelah 2 hari mencari jawaban, tema tombol tidak berfungsi untuk saya di API <21.

Satu-satunya solusi saya adalah mengesampingkan pewarnaan AppCompatButton tidak hanya dengan tema aplikasi dasar "colorButtonNormal" tetapi juga tampilan backgroundTint seperti ini:

public class AppCompatColorButton extends AppCompatButton {

    public AppCompatColorButton(Context context) {
        this(context, null);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs) {
        this(context, attrs, android.support.v7.appcompat.R.attr.buttonStyle);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        if (TintManager.SHOULD_BE_USED) {
            setSupportBackgroundTintList(createButtonColorStateList(getContext(), attrs, defStyleAttr));
        }
    }

    static final int[] DISABLED_STATE_SET = new int[]{-android.R.attr.state_enabled};
    static final int[] FOCUSED_STATE_SET = new int[]{android.R.attr.state_focused};
    static final int[] PRESSED_STATE_SET = new int[]{android.R.attr.state_pressed};
    static final int[] EMPTY_STATE_SET = new int[0];

    private ColorStateList createButtonColorStateList(Context context, AttributeSet attrs, int defStyleAttr) {
        final int[][] states = new int[4][];
        final int[] colors = new int[4];
        int i = 0;

        final int themeColorButtonNormal = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        /*TypedArray a = context.obtainStyledAttributes(attrs, new int[] { android.R.attr.backgroundTint }, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(0, themeColorButtonNormal);*/
        TypedArray a = context.obtainStyledAttributes(attrs, android.support.v7.appcompat.R.styleable.View, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(android.support.v7.appcompat.R.styleable.View_backgroundTint, themeColorButtonNormal);
        a.recycle();
        final int colorControlHighlight = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorControlHighlight);

        // Disabled state
        states[i] = DISABLED_STATE_SET;
        colors[i] = ThemeUtils.getDisabledThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        i++;

        states[i] = PRESSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        states[i] = FOCUSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        // Default enabled state
        states[i] = EMPTY_STATE_SET;
        colors[i] = colorButtonNormal;
        i++;

        return new ColorStateList(states, colors);
    }
}

Anda kemudian dapat mendefinisikan warna Tombol Anda seperti ini:

<com.example.views.AppCompatColorButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#ffff0000"
            app:backgroundTint="#ffff0000"
            android:text="Button"
            android:textColor="@android:color/white" />

0

Jawaban SO ini membantu saya sampai pada jawaban https://stackoverflow.com/a/30277424/3075340

Saya menggunakan metode utilitas ini untuk mengatur warna latar tombol. Ini bekerja dengan perangkat pra-lolipop:

// Set button background tint programmatically so it is compatible with pre-lollipop devices.
public static void setButtonBackgroundTintAppCompat(Button button, ColorStateList colorStateList){
    Drawable d = button.getBackground();
    if (button instanceof AppCompatButton) {
        // appcompat button replaces tint of its drawable background
        ((AppCompatButton)button).setSupportBackgroundTintList(colorStateList);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Lollipop button replaces tint of its drawable background
        // however it is not equal to d.setTintList(c)
        button.setBackgroundTintList(colorStateList);
    } else {
        // this should only happen if
        // * manually creating a Button instead of AppCompatButton
        // * LayoutInflater did not translate a Button to AppCompatButton
        d = DrawableCompat.wrap(d);
        DrawableCompat.setTintList(d, colorStateList);
        button.setBackgroundDrawable(d);
    }

}

Cara menggunakan dalam kode:

Utility.setButtonBackgroundTintAppCompat(myButton,
ContextCompat.getColorStateList(mContext, R.color.your_custom_color));

Dengan cara ini, Anda tidak perlu menentukan ColorStateList jika Anda hanya ingin mengubah warna latar belakang dan tidak lebih dari mempertahankan efek tombol cantik dan apa yang tidak.


0

Saya mengatur android:textColorke @nulldalam tombol tema saya dan itu membantu.

styles.xml

<style name="Button.Base.Borderless" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="android:textColor">@null</item>
</style>

some_layout.xml

<Button
    style="@style/Button.Base.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hint" />

Sekarang warna teks tombol colorAccentdidefinisikan dalamAppTheme

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/colorAccent</item>
    <item name="borderlessButtonStyle">@style/Button.Base.Borderless</item>
    <item name="alertDialogTheme">@style/AlertDialog</item>
</style>

0

jika Anda menggunakan kotlin, dapatkah Anda melihat Semua atribut dari MaterialButton didukung. Jangan gunakan atribut android: background. MaterialButton mengelola latar belakangnya sendiri yang dapat digambar, dan mengatur latar belakang baru berarti warna Material tombol dinonaktifkan tidak dapat lagi menjamin bahwa atribut baru yang diperkenalkannya akan berfungsi dengan baik. Jika latar belakang standar diubah, Material Button tidak dapat menjamin perilaku yang didefinisikan dengan baik. Di MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        buttonClick.setOnClickListener {
            (it as MaterialButton).apply {
                backgroundTintList = ColorStateList.valueOf(Color.YELLOW)
                backgroundTintMode = PorterDuff.Mode.SRC_ATOP
            }
        }
    }
}

Di activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/constraintLayout"
    tools:context=".MainActivity">
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonNormal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Material Button Normal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:text="Material Button Background Red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonNormal" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTintMode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:backgroundTintMode="multiply"
        android:text="Tint Red + Mode Multiply"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTint" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Click To Change Background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTintMode" />
</androidx.constraintlayout.widget.ConstraintLayout>

sumber: contoh bahan tombol ganti warna


0

jika Anda ingin melakukan ini melalui kode dalam warna apa pun, gunakan ini:

DrawableCompat.setTintList(button.getBackground(), ColorStateList.valueOf(yourColor));
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.