web-dev-qa-db-fra.com

Android changeant la couleur du bouton d'action flottante

Cela fait des heures que nous essayons de changer la couleur du bouton d’action flottant de Material, 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 par 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 dans la "question dupliquée" , mais aucune d'entre elles ne fonctionne, le bouton est resté vert et est également devenu un carré.

Je voudrais une réponse détaillée, merci.

P.S. Il serait également agréable de savoir comment ajouter un effet d'entraînement, je ne pouvais pas comprendre cela non plus.

javaandroidandroid-5.0-lollipopfloating-action-button
423
Jjang

Comme décrit dans la documentation , il utilise par défaut la couleur définie dans styles.xml attribut colorAccent.

La couleur d'arrière-plan de cette vue correspond par défaut à colorAccent 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 l'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" >
  • dans le code avec .setBackgroundTintList (réponse ci-dessous par ywwynm )

Comme @Dantalian mentionné dans les commentaires, si vous souhaitez modifier la couleur de l'icône, vous pouvez utiliser

Android:tint="@color/white"
878
Marko

La réponse de Vijet Badigannavar est correcte, mais l'utilisation de ColorStateList est généralement compliquée et il ne nous a pas expliqué comment procéder. Comme nous nous attachons souvent à changer la couleur de View à l'état normal et pressé, je vais ajouter plus de détails:

  1. Si vous voulez changer la couleur de FAB en état normal, vous pouvez simplement écrire

    mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

  2. Si vous souhaitez modifier la couleur de FAB à l'état pressé, merci à Design Support Library 22.2.1, vous pouvez simplement écrire

    mFab.setRippleColor(your color in int);

    En définissant cet attribut, lorsque vous avez appuyé longuement sur la FAB, une ondulation de votre couleur apparaît au point de contact et révèle toute la surface de FAB. Veuillez noter que cela ne changera pas la couleur de FAB en état normal. Sous API 21 (Lollipop), il n’ya pas d’effet d’entraînement mais la couleur de FAB change quand vous appuyez dessus.

Enfin, si vous souhaitez implémenter des effets plus complexes pour les états, vous devez alors creuser profondément dans ColorStateList, voici une question SO qui en traite: Comment créer ColorStateList par programme? .

UPDATE: Merci pour le commentaire de @ Kaitlyn. Pour supprimer le contour de FAB en utilisant backgroundTint comme couleur, vous pouvez définir app:borderWidth="0dp" dans votre code xml.

211
ywwynm

Comme Vasil Valchev a noté dans un commentaire que 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"/>

Remarquez qu'il est:

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

et pas 

Android:backgroundTint="@Android:color/white"
101
HenriqueMS

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

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

et dans le code définir la couleur:

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

juste utiliser,

app:backgroundTint="@color/colorPrimary"

ne pas utiliser,

Android:backgroundTint="@color/colorPrimary"
41
Ashana.Jackol

Le FAB est coloré en fonction de votre colorAccent.

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>
26
tachyonflux
mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));
16
Reza Isfandyari

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 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>
11
Robin Davies

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

fab.setBackgroundTintList(ColorStateList)

Rappelez-vous aussi 

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, alors vous devez définir un dessin personnalisable et le décorer!

9
Vijet Badigannavar
 <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"
5
Gavine Joyce

Merci à autocomplete. J'ai eu de la chance après quelques coups 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 la version 17 de l'API avec la bibliothèque de conception 23.1.0.

5
Gaurav Kumar Gupta

J'ai 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 je souhaite aux autres qui arriveront ici.

4
Purvik Rana

Lorsque vous utilisez Liaison de données vous pouvez faire quelque chose comme ceci:

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

J'ai fait un très simple exemple

2
Jan Málek

je l'ai fait comme ça Android: background = "@ color/colorAccent" Je viens d'aller au dossier res, puis cliquez sur les valeurs du dossier puis sur colors.xml dans colors.xml terminé 

1
sana sajjad

Ce 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. Donc, vous pouvez aller à valeurs> couleur. Vous trouverez les valeurs par défaut, mais vous pouvez également créer des couleurs en les recadrant et les collant, en modifiant les couleurs et les noms. Alors ... quand vous allez changer la couleur du bouton flottant (dans activity_main), vous pouvez choisir celui que vous avez créé 

Exemple - code sur les valeurs> couleurs avec couleurs par défaut + 3 couleurs supplémentaires 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"/>

Cela a fonctionné pour moi. Bonne chance!

1
Nidia F.

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

app:backgroundTint="@color/blue"

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

Android:tint="@color/white"
1
Kishore Reddy

 add colors in color.xml file

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

Avec le matériau thème et les composants matériels FloatingActionButton par défaut, il prend la couleur définie dans l'attribut _styles.xml_ colorSecondary.

  • Vous pouvez utiliser l'attribut app:backgroundTint au format 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 à l’aide de l’attribut <item name="backgroundTint">.

_  <!--<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item> -->
  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="backgroundTint">#00f</item>
  </style>
_
  • à partir de la version 1.1.0 des composants matériels, vous pouvez utiliser le nouvel attribut materialThemeOverlay pour remplacer les couleurs par défaut de certains composants uniquement:
_  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="materialThemeOverlay">@style/MyFabOverlay</item>
  </style>

  <style name="MyFabOverlay">
    <item name="colorSecondary">@color/custom2</item>
  </style>
_
0
Gabriele Mariotti

Nouveau mappage d'attributs de thème pour bouton d'action flottant 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 (mappe vers backgroundTint)
  • Définissez colorOnSecondary pour définir une couleur pour l'icône/le texte et la couleur d'ondulation de FAB (les cartes à teinter et à 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>
0
luca992

vous pouvez l'utiliser si vous souhaitez modifier le code.

0
DiegoS