Android changeant la couleur du bouton d'action flottante


532

J'ai essayé de changer la couleur du bouton d'action flottante du matériau, mais sans succès.

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

J'ai essayé d'ajouter:

android:background="@color/mycolor"

ou via code:

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

ou

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

Mais rien de ce qui précède n'a fonctionné. J'ai également essayé les solutions de la question en double proposée, mais aucune ne fonctionne; le bouton est resté vert et est également devenu un carré.

PS Ce serait également bien de savoir comment ajouter un effet d'entraînement, je ne pouvais pas comprendre cela non plus.



L'effet d'entraînement n'est pas disponible sur les appareils pré-sucette car il utilise un nouveau RenderThread .
tachyonflux

@karaokyo ok mais comment je fais?
Jjang

27
Google fait un très mauvais travail à mon avis pour rendre ces choses accessibles
Joop

Pour le faire par programmation et rétrocompatible, voir stackoverflow.com/questions/30966222/…
Ralph Pina

Réponses:


1050

Comme cela est décrit dans la documentation , par défaut , il prend le jeu de couleurs dans styles.xml attribut colorAccent .

La couleur d'arrière-plan de cette vue est par défaut la couleur de votre thème. Si vous souhaitez modifier cela au moment de l'exécution, vous pouvez le faire via setBackgroundTintList (ColorStateList).

Si vous souhaitez changer de couleur

  • en XML avec attribut app: 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" >
  • en code avec .setBackgroundTintList (réponse ci-dessous par ywwynm )

Comme @Dantalian l'a mentionné dans les commentaires, si vous souhaitez modifier la couleur de l'icône de la bibliothèque de support de conception jusqu'à la v22 (incluse) , vous pouvez utiliser

android:tint="@color/white"     

Pour la bibliothèque de support de conception depuis la version 23, vous pouvez utiliser:

app:tint="@color/white"   

De plus, avec les androidXbibliothèques, vous devez définir une bordure 0dp dans votre disposition xml:

<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
Cela ne fonctionne pas dans Design Support Library v23 pour les périphériques <API 12. Il fonctionnait en v22, donc ils ont cassé quelque chose, apparemment.
hungryghost

4
Notez que si vous souhaitez également changer la couleur de l'image en blanc par exemple, vous pouvez utiliser: android: tint = "@ android: color / white"
Dantalian

1
android: tint = "@ color / white" n'a pas fonctionné pour moi car il n'a pas pu le résoudre pour une raison quelconque. android: tint = "# ffffff" fonctionne pour moi cependant
realappie

2
C'est parce que @ color / white n'existe pas dans votre colors.xml. utilisez @android: couleur / blanc ou créez une couleur nommée blanc ou tout ce dont vous avez besoin
Dantalian

227
utiliser "app: backgroundTint" et non "android: backgroundTint"
Vasil Valchev

244

La réponse de Vijet Badigannavar est correcte mais l'utilisation ColorStateListest généralement compliquée et il ne nous a pas dit comment procéder. Puisque nous nous concentrons souvent sur le changement Viewde couleur de l'état normal et pressé, je vais ajouter plus de détails:

  1. Si vous voulez changer FABla couleur de l'état normal, vous pouvez simplement écrire

    mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));
  2. Si vous voulez changer FABla couleur de l'état pressé, merci pour Design Support Library 22.2.1 , vous pouvez simplement écrire

    mFab.setRippleColor(your color in int);

    En définissant cet attribut, lorsque vous appuyez longuement sur le FAB, une ondulation avec votre couleur apparaîtra à votre point de contact et se révélera sur toute la surface de FAB. Veuillez noter qu'il ne changera pas FABla couleur de l 'état normal. En dessous de l'API 21 (Lollipop), il n'y a pas d'effet d'entraînement mais FABla couleur de change toujours quand vous appuyez dessus.

Enfin, si vous voulez implémenter un effet plus complexe pour les états, alors vous devriez creuser profondément ColorStateList, voici une question SO en discutant: Comment puis-je créer ColorStateList par programme? .

MISE À JOUR: Merci pour le commentaire de @ Kaitlyn. Pour supprimer le trait de FAB en utilisant backgroundTint comme couleur, vous pouvez définir app:borderWidth="0dp"votre XML.


3
Merci pour cela, je ne savais pas comment utiliser ColorStateList. Cependant, votre code quitte mon FAB avec un trait (contour) de la couleur d'accent du thème. Avez-vous une idée de la façon dont je peux supprimer ce trait (ou changer sa couleur, plutôt) et avoir un FAB dans une couleur spéciale qui ressemble à cette couleur spéciale qui est la couleur d'accent?
Kaitlyn Hanrahan

@KaitlynHanrahan Veuillez voir ma mise à jour. Merci pour votre commentaire.
ywwynm

Cela fonctionne parfaitement - Lollypop et Kitkat se ressemblent, même les deux ont ce petit ombrage, de sorte que le FAB apparaît contre la même couleur en arrière-plan (je l'ai partiellement sur la barre d'outils). Merci beaucoup! C'est simple mais je ne sais pas si j'aurais jamais trouvé ça tout seul.
Kaitlyn Hanrahan

Existe-t-il un moyen de définir la app:borderWidthprogrammation? Merci
Štarke

@ Štarke Eh bien, après avoir regardé le code source de FloatingActionButton, je crains que vous ne puissiez pas le paramétrer pour le moment car il n'y a pas de setter pour mBorderWidth.
ywwynm

124

Comme Vasil Valchev l'a noté dans un commentaire, c'est plus simple qu'il n'y paraît, mais il y a une différence subtile que je ne remarquais pas dans mon XML.

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

Notez que c'est:

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

et non

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

7
Ceci est important car ce sont deux choses complètement différentes: elles android:backgroundTint=""proviennent du niveau Api 21 et font partie de la conception matérielle de Lollipop et seront ignorées sous Lollipop. De plus, cela ne change pas FABcomplètement la couleur car ce n'est pas une couleur unie. Vous devez utiliser app:celui pour le faire fonctionner.
creativecreatorormaybenot

1
Merci, l'utilisation a android:colorfait planter mon application, et ça me rendait dingue! Merci d'avoir sauvegardé mon application et ce qui reste de ma raison ;-)
Kapenaar

@Kapenaar pas de problème, je me suis aussi gratté la tête avant de le remarquer;)
HenriqueMS

Comment cela fonctionnerait-il par programme, car du côté java, il n'y a pas de différence comme app: et android: dans le XML.
marienke

@marienke vous pouvez le définir avec un ColorStatesList, poster une nouvelle question et poster le lien ici pour que je puisse y répondre;)
HenriqueMS

58

si vous essayez de changer la couleur de FAB en utilisant l'application, il y a un problème. le cadre du bouton a une couleur différente, alors ce que vous devez faire:

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

et dans le code, définissez la couleur:

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

2
Cela fonctionne pour des couleurs normales. Si j'ai donné une couleur alpha comme # 44000000, le problème de couleur du cadre est reproductible.
Dinesh

5
getResources.getColor () est obsolète, pensez à utiliser ContextCompat.getColor (contexte, votre couleur); au lieu. J'espère que ça aide
Tinashe Chinyanga

51

utilisez simplement,

app:backgroundTint="@color/colorPrimary"

ne pas utiliser,

android:backgroundTint="@color/colorPrimary"

hmmmm cette cause la saisie semi-automatique de studio android donne le résultat utilisez android: backgroundTint, cette réponse est très bonne
Yudi karma

31

Le FAB est coloré en fonction de votre colorAccent.

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

Eh bien, la couleur par défaut n'est pas verte. Où avez-vous mis une couleur verte?
tachyonflux

1
Je n'ai pas. Comme vous le voyez, ce xml est le seul endroit où j'ai mis en place la disposition du bouton ...
Jjang

Vous devriez peut-être créer un nouveau projet avec juste le FAB et publier le code pour le tout.
tachyonflux

3
Wow ... Je vous ai simplement demandé de faire la même chose et vous n'étiez pas prêt à le faire. Il est assez hypocrite de votre part de croire que votre code était adéquat, mais que mon ajout à votre code n'est pas adéquat. Il appartient au demandeur de créer un MCVE . Merci.
tachyonflux

2
Plus maintenant , basé sur le mappage d'attribut de thème du bouton d'action flottant maintenant (je me suis vérifié) est coloré en couleur Secondaire ( com.google.android.material: matériel: 1.1.0-alpha02 )
ievgen

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

Il s'agit de la solution la plus simple, bien plus simple que d'utiliser un dessinable personnalisé.
IgorGanapolsky

16

D'autres solutions peuvent fonctionner. C'est l'approche du gorille de 10 livres qui a l'avantage d'être largement applicable dans ce cas et dans des cas similaires:

Styles.xml:

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

votre mise en page xml:

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

Hmm, cela devrait fonctionner, mais je reçois des erreurs de compilation dans le fichier de disposition String types not allowed (at 'theme' with value 'AppTheme.FloatingAccentButtonOverlay'). Peut-être que je manque un point avec le styles.xml ....
Scott Biggs

@ScottBiggs utilise android:theme="@style/AppTheme.FloatingAccentButtonOverlay"mais ce solutin ne fonctionne pas pour moi de toute façon ...
jpact

Qu'en est-il de l'API 16 qui n'a pas d'attribut coloarAccent?
Dushyant Suthar

12

Le document suggère qu'il prend la @ couleur / accent par défaut. Mais nous pouvons le remplacer par du code en utilisant

fab.setBackgroundTintList(ColorStateList)

Rappelez-vous également,

La version minimale de l'API pour utiliser cette bibliothèque est de 15, vous devez donc la mettre à jour! si vous ne voulez pas le faire, vous devez définir un dessinable personnalisé et le décorer!


fonctionne, mais je dois cibler api 21+. si je cible l'api 8 ne peut pas appeler cette méthode.
Jjang

Il suffit d'inclure cette bibliothèque de conception qui a été publiée par google "com.android.support:design:22.2.0". Cela peut être utilisé sur des appareils qui ne sont pas des versions sans sucette! à votre santé!!
Vijet Badigannavar

bien sûr que je le fais, mais c'est l'erreur sur ce code: l'appel nécessite le niveau 21 de l'API (le min actuel est 8): android.widget.ImageView # setBackgroundTintList
Jjang

La version minimale de l'API pour utiliser cette bibliothèque est de 15, vous devez donc la mettre à jour! si vous ne voulez pas le faire, vous devez définir un dessinable personnalisé et le décorer!
Vijet Badigannavar

Oh merci! Je ne savais pas, je pensais que c'était 21 puisque c'est ce que l'erreur a dit. Veuillez poster ceci comme réponse et je l'accepterai!
Jjang

10

Modification de la couleur d'arrière-plan du bouton d'action flottante à l'aide de la ligne ci-dessous

app:backgroundTint="@color/blue"

Modification de la couleur de l'icône du bouton d'action flottante

android:tint="@color/white"     

8

Merci à la saisie semi-automatique. J'ai eu de la chance après quelques succès et essais:

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

- ou - (les deux sont fondamentalement la même chose)

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

Cela a fonctionné pour moi sur l'API version 17 avec la bibliothèque de conception 23.1.0.


8

J'ai eu le même problème et c'est tout arracher mes cheveux. Merci pour cela https://stackoverflow.com/a/35697105/5228412

Ce que nous pouvons faire..

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

cela fonctionne bien pour moi et souhaite à d'autres qui atteindront ici.


Bien que cela puisse théoriquement répondre à la question, il serait préférable d'inclure ici les parties essentielles de la réponse et de fournir le lien de référence.
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"/>

Notez que vous ajoutez des couleurs dans res / values ​​/ color.xml et incluez l'attribut dans votre fab

   app:backgroundTint="@color/addedColor"

8

Avec le matériel Thème et les composants matériels FloatingActionButton par défaut , il prend la couleur définie dans l' styles.xmlattribut colorSecondary.

  • Vous pouvez utiliser l' app:backgroundTintattribut en xml:
<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>
  • Vous pouvez utiliser fab.setBackgroundTintList();

  • Vous pouvez personnaliser votre style en utilisant l' <item name="backgroundTint">attribut

  <!--<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>
  • à partir de la version 1.1.0 des composants de matériau, vous pouvez utiliser le nouvel materialThemeOverlayattribut pour remplacer les couleurs par défaut uniquement pour certains composants:
  <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>

entrez la description de l'image ici


7

Nouveau mappage d'attribut de thème pour le bouton d'action flottante dans le matériau 1.1.0

Dans le thème de votre application:

  • Définissez colorSecondary pour définir une couleur pour l'arrière-plan de FAB (correspond à backgroundTint)
  • Définissez colorOnSecondary pour définir une couleur pour l'icône / le texte et la couleur d'ondulation de FAB (correspond à la teinte et à l'ondulationColor)

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

Enfin quelqu'un qui propose des solutions simples pour les couleurs d'arrière-plan et de premier plan (icône) FAB.
ManuelTS


3

je l'ai fait comme cet android: background = "@ color / colorAccent" je vais juste dans le dossier res puis je clique sur les valeurs du dossier puis sur colors.xml dans colors.xml je change juste la couleur de colorAccent et je l'appelle dans android: background et c'est fait


2

Le point qui nous manque, c'est qu'avant de définir la couleur sur le bouton, il est important de travailler sur la valeur souhaitée pour cette couleur. Vous pouvez donc aller à valeurs> couleur. Vous trouverez celles par défaut, mais vous pouvez également créer des couleurs en les collant et en les collant, en changeant les couleurs et les noms. Ensuite ... quand vous allez changer la couleur du bouton flottant (dans activity_main), vous pouvez choisir celui que vous avez créé

Exemple - code sur valeurs> couleurs avec couleurs par défaut + 3 autres couleurs que j'ai créées:

<?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>

Maintenant mon bouton d'action flottant avec la couleur que j'ai créée et nommée "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"/>

Ça a marché pour moi. Bonne chance!


1

Si vous avez un bouton d'action flottant sans dessin, vous pouvez modifier la teinte par programme en utilisant:

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

C'est la solution que je cherchais. J'avais une fab simple avec backgrountTint et ne pouvais pas trouver un moyen de le changer par programme jusqu'à ce que je trouve cela.
Redar

0

ajouter des couleurs dans le fichier color.xml

ajoutez des couleurs dans le fichier color.xml puis ajoutez cette ligne de code ... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));


0

Vous pouvez utiliser ce code au cas où vous voudriez changer la couleur par programme

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

0

utilisation

app: backgroundTint = "@ color / orange" dans


<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

pour la conception de matériaux, je viens de changer la couleur du bouton d'action flottante comme ceci, ajoutez les deux lignes ci-dessous dans votre bouton d'action flottant xml. Et.. Voila,

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

0

à Kotlin:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.