Android mengubah warna Tombol Aksi Mengambang


532

Saya telah mencoba untuk mengubah warna Floating Action Button dari Material, tetapi tidak berhasil.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp" />

Saya sudah mencoba menambahkan:

android:background="@color/mycolor"

atau melalui kode:

FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.profile_edit_fab);
fab.setBackgroundColor(Color.parseColor("#mycolor"));

atau

fab.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#mycolor")));

Tapi tidak satu pun di atas yang berfungsi. Saya juga telah mencoba solusi dalam pertanyaan duplikat yang diusulkan, tetapi tidak satupun yang berfungsi; tombol tetap hijau dan juga menjadi kotak.

PS Akan menyenangkan juga untuk tahu cara menambahkan efek riak, tidak bisa mengerti itu juga.



Efek riak tidak tersedia pada perangkat pra-lollipop karena menggunakan RenderThread baru .
tachyonflux

@ karaokyo ok tapi bagaimana saya melakukannya?
Jjang

27
Google melakukan pekerjaan yang sangat buruk menurut saya untuk membuat hal-hal ini dapat diakses
Joop

Untuk melakukan ini kompatibel secara program dan mundur, lihat stackoverflow.com/questions/30966222/…
Ralph Pina

Jawaban:


1050

Seperti dijelaskan dalam dokumentasi , secara default dibutuhkan warna set di styles.xml atribut colorAccent .

Warna latar belakang tampilan ini default ke colorAccent tema Anda. Jika Anda ingin mengubah ini pada saat runtime maka Anda dapat melakukannya melalui setBackgroundTintList (ColorStateList).

Jika Anda ingin mengubah warna

  • dalam XML dengan aplikasi atribut : backgroundTint
<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" >
  • dalam kode dengan .setBackgroundTintList (jawaban di bawah ini oleh ywwynm )

Seperti @Dantalian disebutkan dalam komentar, jika Anda ingin mengubah warna ikon untuk Design Support Library hingga v22 (inklusif) , Anda dapat menggunakan

android:tint="@color/white"     

Untuk Pustaka Dukungan Desain sejak v23 untuk Anda dapat menggunakan:

app:tint="@color/white"   

Juga dengan androidXperpustakaan Anda perlu menetapkan batas 0dp di tata letak xml Anda:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" />

24
Ini tidak berfungsi di Perpustakaan Dukungan Desain v23 untuk <API 12 perangkat. Itu bekerja di v22, jadi mereka memecahkan sesuatu, rupanya.
hungryghost

4
Perhatikan bahwa jika Anda ingin juga mengubah warna gambar menjadi putih misalnya Anda dapat menggunakan: android: tint = "@ android: color / white"
Dantalian

1
android: tint = "@ color / white" tidak berfungsi untuk saya karena tidak dapat menyelesaikannya karena alasan tertentu. android: tint = "# ffffff" Bekerja untuk saya
realappie

2
Itu karena @ color / white tidak ada di colors.xml Anda. gunakan @android: warna / putih atau buat warna bernama putih atau apa pun yang Anda butuhkan
Dantalian

227
gunakan "app: backgroundTint" not "android: backgroundTint"
Vasil Valchev

244

Jawaban Vijet Badigannavar benar tetapi menggunakan ColorStateListbiasanya rumit dan dia tidak memberi tahu kami bagaimana melakukannya. Karena kita sering fokus pada perubahan Viewwarna dalam keadaan normal dan ditekan, saya akan menambahkan lebih banyak detail:

  1. Jika Anda ingin mengubah FABwarna dalam keadaan normal, Anda cukup menulis

    mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));
  2. Jika Anda ingin mengubah FABwarna dalam keadaan tertekan, terima kasih untuk Perpustakaan Dukungan Desain 22.2.1 , Anda cukup menulis

    mFab.setRippleColor(your color in int);

    Dengan mengatur atribut ini, ketika Anda menekan tombolnya FAB, sebuah riak dengan warna Anda akan muncul pada titik sentuh Anda dan terbuka ke seluruh permukaan FAB. Harap perhatikan bahwa itu tidak akan berubah FABwarna dalam kondisi normal. Di bawah API 21 (Lollipop), tidak ada efek riak tetapi FABwarna masih akan berubah saat Anda menekannya.

Akhirnya, jika Anda ingin menerapkan efek yang lebih kompleks untuk status, maka Anda harus menggali lebih dalam ColorStateList, berikut adalah pertanyaan SO yang membahasnya: Bagaimana cara membuat ColorStateList secara terprogram? .

UPDATE: Terima kasih atas komentar @ Kaitlyn. Untuk menghapus goresan FAB menggunakan backgroundTint sebagai warnanya, Anda dapat mengatur app:borderWidth="0dp"dalam xml Anda.


3
Terima kasih untuk ini, saya tidak tahu cara menggunakan ColorStateList. Namun, kode Anda meninggalkan FAB saya dengan stroke (garis besar) warna aksen tema. Apakah Anda tahu bagaimana saya bisa menghilangkan goresan itu (atau mengubah warnanya), dan memiliki FAB dalam warna khusus yang terlihat seperti warna khusus itu adalah warna aksen?
Kaitlyn Hanrahan

@KaitlynHanrahan Silakan lihat pembaruan saya. Terima kasih atas komentar Anda.
ywwynm

Itu berfungsi sempurna - Lollypop dan Kitkat terlihat sama, bahkan keduanya memiliki sedikit shading sehingga FAB muncul dengan warna yang sama di latar belakang (saya memilikinya sebagian di atas Toolbar). Terima kasih banyak! Ini sederhana tetapi saya tidak tahu apakah saya pernah akan menemukannya sendiri.
Kaitlyn Hanrahan

Apakah ada cara mengatur secara app:borderWidthterprogram? Terima kasih
Štarke

@ Štarke Nah, setelah melihat kode sumber FloatingActionButton, saya khawatir Anda tidak dapat mengaturnya secara terprogram sekarang karena tidak ada setter untuk mBorderWidth.
ywwynm

124

Seperti yang dicatat Vasil Valchev dalam komentar, ini lebih sederhana daripada yang terlihat, tetapi ada perbedaan halus yang tidak saya perhatikan dalam XML saya.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp"
    app:backgroundTint="@android:color/white"/>

Perhatikan itu:

app:backgroundTint="@android:color/white"

dan tidak

android:backgroundTint="@android:color/white"

7
Ini penting karena ini adalah dua hal yang sangat berbeda: android:backgroundTint=""berasal dari Api level 21 dan bagian dari Desain Bahan Lollipop dan akan diabaikan di bawah Lollipop. Juga tidak mengubah FABwarna sepenuhnya karena itu bukan warna solid. Anda harus menggunakan yang app:satu untuk membuatnya bekerja.
creativecreatorormaybenot

1
Terima kasih, menggunakan android:colormenyebabkan aplikasi saya mogok, dan itu membuat saya gila! Terima kasih telah menyimpan aplikasi saya dan apa yang tersisa dari kewarasananku ;-)
Kapenaar

@ Kapenaar tidak masalah, sedang menggaruk-garuk kepala saya untuk sementara waktu sebelum memperhatikan;)
HenriqueMS

Bagaimana ini akan bekerja secara programatik karena di sisi java tidak ada perbedaan seperti aplikasi: dan android: dalam XML.
marienke

@marienke Anda dapat mengaturnya dengan ColorStatesList, memposting pertanyaan baru dan memposting tautan di sini sehingga saya dapat menjawabnya;)
HenriqueMS

58

jika Anda mencoba mengubah warna FAB dengan menggunakan aplikasi, ada beberapa masalah. bingkai tombol memiliki warna yang berbeda, jadi apa yang harus Anda lakukan:

app:backgroundTint="@android:color/transparent"

dan dalam kode mengatur warna:

actionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.white)));

2
Ini berfungsi untuk warna normal. Jika saya telah memberikan warna alfa seperti # 44000000 masalah warna bingkai dapat direproduksi.
Dinesh

5
getResources.getColor () sudah usang, pertimbangkan untuk menggunakan ContextCompat.getColor (konteks, warna Anda); sebagai gantinya. Semoga ini bisa membantu
Tinashe Chinyanga

51

gunakan saja,

app:backgroundTint="@color/colorPrimary"

jangan gunakan,

android:backgroundTint="@color/colorPrimary"

hmmmm ini penyebab android studio autocomplete memberikan hasil menggunakan android: backgroundTint, jawaban ini sangat bagus
Yudi karma

31

FAB diwarnai berdasarkan pada Anda colorAccent.

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>

Nah, warna standarnya bukan hijau. Di mana Anda mengatur warna hijau?
tachyonflux

1
Aku tidak. Seperti yang Anda lihat, xml ini adalah satu-satunya tempat saya mengatur tata letak tombol ...
Jjang

Mungkin Anda harus membuat proyek baru hanya dengan FAB dan memposting kode untuk semuanya.
tachyonflux

3
Wow ... Saya pada dasarnya hanya meminta Anda untuk melakukan hal yang sama dan Anda tidak mau melakukannya. Sangat munafik bagi Anda untuk percaya bahwa kode Anda memadai, tetapi penambahan saya ke kode Anda tidak memadai. Itu jatuh ke penanya untuk membuat MCVE . Terima kasih.
tachyonflux

2
Tidak lagi, berdasarkan Theme Attribute Mapping the Floating Action Button sekarang (saya memverifikasi diri saya sendiri) diwarnai menjadi colorSecondary ( com.google.android.material: material: 1.1.0-alpha02 )
ievgen

26
mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));

Ini adalah solusi termudah, jauh lebih mudah daripada menggunakan drawable kustom.
IgorGanapolsky

16

Solusi lain mungkin berhasil. Ini adalah pendekatan gorila 10 pon yang memiliki keuntungan diterapkan secara luas dalam kasus ini dan yang serupa:

Styles.xml:

<style name="AppTheme.FloatingAccentButtonOverlay" >
    <item name="colorAccent">@color/colorFloatingActionBarAccent</item>
</style>

tata letak Anda xml:

<android.support.design.widget.FloatingActionButton
       android:theme="AppTheme.FloatingAccentButtonOverlay"
       ...
 </android.support.design.widget.FloatingActionButton>

Hmm, sepertinya ini harusnya berhasil, tapi saya mendapatkan kesalahan kompilator dalam file tata letak String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Mungkin saya kehilangan satu poin dengan styles.xml ....
Scott Biggs

@ScottBiggs digunakan android:theme="@style/AppTheme.FloatingAccentButtonOverlay"tetapi solutin ini tidak bekerja untuk saya ...
jpact

Bagaimana dengan API 16 yang tidak memiliki atribut coloarAccent?
Dushyant Suthar

12

Dokumen menyarankan agar dibutuhkan warna @ aksen / aksen. Tapi kita bisa menimpanya dengan menggunakan kode

fab.setBackgroundTintList(ColorStateList)

Ingat juga,

Versi API minimum untuk menggunakan perpustakaan ini adalah 15 sehingga Anda perlu memperbaruinya! jika Anda tidak ingin melakukannya maka Anda perlu menentukan drawable kustom dan menghiasinya!


berfungsi, tetapi kemudian saya harus menargetkan api 21+. jika saya menargetkan api 8 tidak dapat memanggil metode ini.
Jjang

Cukup sertakan pustaka desain ini yang telah dirilis oleh google "com.android.support:design:22.2.0". Ini dapat digunakan pada perangkat yang bukan versi lollipop! Bersulang!!
Vijet Badigannavar

tentu saja saya lakukan, tetapi ini adalah kesalahan pada kode ini: Panggilan membutuhkan API level 21 (min saat ini adalah 8): android.widget.ImageView # setBackgroundTintList
Jjang

Versi API minimum untuk menggunakan perpustakaan ini adalah 15 sehingga Anda perlu memperbaruinya! jika Anda tidak ingin melakukannya maka Anda perlu menentukan drawable kustom dan menghiasinya!
Vijet Badigannavar

Oh terima kasih! Saya tidak tahu, pikir itu 21 karena ini adalah kesalahan. Silakan posting ini sebagai jawaban dan saya akan menerimanya!
Jjang

10

Mengubah warna latar belakang tombol Aksi mengambang dengan menggunakan garis di bawah ini

app:backgroundTint="@color/blue"

Mengubah warna ikon tombol Aksi mengambang

android:tint="@color/white"     

8

Berkat pelengkapan otomatis. Saya beruntung setelah beberapa pukulan dan percobaan:

    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:backgroundTint="@color/whicheverColorYouLike"

- atau - (keduanya pada dasarnya adalah hal yang sama)

    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:backgroundTint="@color/whicheverColorYouLike"

Ini bekerja untuk saya di API Versi 17 dengan perpustakaan desain 23.1.0.


8

Saya mendapat masalah yang sama dan semuanya menjambak rambut saya. Terima kasih untuk ini https://stackoverflow.com/a/35697105/5228412

Apa yang bisa kita lakukan ..

 favourite_fab.setImageDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.favourite_selected));

berfungsi dengan baik untuk saya dan berharap untuk orang lain yang akan mencapai di sini.


Sementara ini secara teoritis dapat menjawab pertanyaan, akan lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini, dan menyediakan tautan untuk referensi.
Bhargav Rao

8
 <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:elevation="6dp"
    app:backgroundTint="@color/colorAccent"
    app:pressedTranslationZ="12dp"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/add"/>

Perhatikan bahwa Anda menambahkan warna dalam res / values ​​/ color.xml dan sertakan atribut dalam fab Anda

   app:backgroundTint="@color/addedColor"

8

Dengan Tema Material dan komponen material FloatingActionButton secara default dibutuhkan warna yang ditetapkan dalam styles.xmlatribut colorSecondary.

  • Anda dapat menggunakan app:backgroundTintatribut dalam xml:
<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>
  • Kamu bisa menggunakan fab.setBackgroundTintList();

  • Anda dapat menyesuaikan gaya Anda menggunakan <item name="backgroundTint">atribut

  <!--<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item> -->
  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="backgroundTint">#00f</item>
    <!-- color used by the icon -->
    <item name="tint">@color/...</item>
  </style>
  • mulai dari versi 1.1.0 komponen material Anda dapat menggunakan materialThemeOverlayatribut baru untuk mengganti warna default hanya untuk beberapa komponen:
  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="materialThemeOverlay">@style/MyFabOverlay</item>
  </style>

  <style name="MyFabOverlay">
    <item name="colorSecondary">@color/custom2</item>
    <!-- color used by the icon -->
    <item name="colorOnSecondary">@color/...</item>
  </style>

masukkan deskripsi gambar di sini


7

Pemetaan atribut tema baru untuk Tombol Aksi Terapung dalam materi 1.1.0

Dalam tema aplikasi Anda:

  • Set colorSecondary untuk mengatur warna untuk latar belakang FAB (maps to backgroundTint)
  • Atur colorOnSecondary untuk mengatur warna untuk ikon / teks dan warna riak FAB (peta ke warna dan rippleColor)

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- ...whatever else you declare in your app theme.. -->
    <!-- Set colorSecondary to change background of FAB (backgroundTint) -->
    <item name="colorSecondary">@color/colorSecondary</item>
    <!-- Customize colorSecondary to change icon/text of FAB (maps to tint and rippleColor) -->
    <item name="colorOnSecondary">@android:color/white</item>
</style>

Akhirnya seseorang yang memberikan solusi sederhana untuk warna latar belakang dan latar depan (ikon) FAB.
Manuel

5

Saat menggunakan Pengikatan Data, Anda dapat melakukan sesuatu seperti ini:

android:backgroundTint="@{item.selected ? @color/selected : @color/unselected}"

Saya telah membuat sangat sederhana contoh


3

saya melakukannya seperti android ini: background = "@ color / colorAccent" saya hanya pergi ke folder res kemudian klik pada nilai folder dan kemudian pada colors.xml dalam colors.xml Saya hanya mengubah warna colorAccent dan menyebutnya di android: background dan itu dilakukan


2

Poin yang kami lewatkan adalah sebelum Anda mengatur warna pada tombol, penting untuk bekerja pada nilai yang Anda inginkan untuk warna ini. Jadi Anda bisa pergi ke nilai> warna. Anda akan menemukan yang default, tetapi Anda juga dapat membuat warna dengan memotong dan menempelkannya, mengubah warna dan nama. Lalu ... ketika Anda pergi untuk mengubah warna tombol mengambang (di activity_main), Anda dapat memilih yang Anda buat

Contoh - kode pada nilai> warna dengan warna default + 3 warna lainnya yang telah saya buat:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="corBotaoFoto">#f52411</color>
    <color name="corPar">#8e8f93</color>
    <color name="corImpar">#494848</color>

</resources>

Sekarang Tombol Aksi Terapung saya dengan warna yang saya buat dan beri nama "corPar":

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_input_add"
        android:tint="#ffffff"
        app:backgroundTint="@color/corPar"/>

Ini berhasil untuk saya. Semoga berhasil!


1

Jika Anda memiliki Tombol Aksi Terapung tanpa gambar, Anda dapat mengubah warna secara terprogram menggunakan:

fab.getBackground().mutate().setTint(ContextCompat.getColor(yourContext, R.color.anyColor));

Itulah solusi yang saya cari. Saya punya fab sederhana dengan backgrountTint dan tidak bisa menemukan cara untuk mengubahnya secara terprogram sampai saya menemukan ini.
Redar

0

tambahkan warna dalam file color.xml

tambahkan warna dalam file color.xml dan kemudian tambahkan baris kode ini ... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));


0

Anda dapat menggunakan kode ini jika Anda ingin mengubah warna secara terprogram

floating.setBackgroundTintList(getResources().getColorStateList(R.color.vermelho));

0

menggunakan

app: backgroundTint = "@ color / orange" di


<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/id_share_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/share"
        app:backgroundTint="@color/orange"
        app:fabSize="mini"
        app:layout_anchorGravity="end|bottom|center" />



</androidx.coordinatorlayout.widget.CoordinatorLayout>

0

untuk desain Material, saya baru saja mengubah warna tombol aksi mengambang seperti ini, Tambahkan dua baris di bawah ini dalam tombol aksi Mengambang Anda xml. Dan dilakukan,

 android:backgroundTint="@color/colorPrimaryDark"
 app:borderWidth="0dp"

0

di Kotlin:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)
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.