Android changeant la couleur du bouton d'action flottante

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.

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

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.

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"

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

utilisez simplement,

app:backgroundTint="@color/colorPrimary"

ne pas utiliser,

android:backgroundTint="@color/colorPrimary"

Le FAB est coloré en fonction de votre colorAccent.

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

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

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>

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!

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"     

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.

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.

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

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>

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>

Lorsque vous utilisez la liaison de données, vous pouvez faire quelque chose comme ceci:

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

J'ai fait un exemple très simple

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

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!

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

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

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

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

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>

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"

à Kotlin:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)