web-dev-qa-db-fra.com

Android FAB toujours noire avec le thème MaterialComponents

Je crée une application Android et j'utilise les bibliothèques AndroidX et le thème de conception Matériau. Mon thème d'application sur styles.xml est:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

J'ai le FAB suivant d'une bibliothèque personnalisée:

<com.leinardi.Android.speeddial.SpeedDialView
        Android:id="@+id/work_log_fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|end"
        app:layout_behavior="@string/speeddial_scrolling_view_snackbar_behavior"
        app:sdMainFabClosedSrc="@drawable/ic_add_white_24dp"
        app:sdOverlayLayout="@id/overlay" />

Et aussi essayé le FAB par défaut:

<com.google.Android.material.floatingactionbutton.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="end|bottom"
        Android:src="@drawable/ic_add_white_24dp"
        Android:layout_margin="16dp" />

Peu importe la couleur de l'icône (un vecteur pouvant être dessiné), l'icône à l'intérieur du FAB (de la bibliothèque et de la valeur par défaut) est toujours noire. J'ai limité le problème au thème de la conception matérielle, depuis l'utilisation de l'ancien Theme.AppCompat.Light.DarkActionBar au lieu du nouveau Theme.MaterialComponents.Light.DarkActionBar l’icône à l’intérieur du FAB obtient la couleur du vecteur d’origine pouvant être dessiné.

Est-ce que quelqu'un sait pourquoi cela se passe et comment le résoudre?

androidmaterial-designandroid-themefloating-action-buttonandroidx
25
Erik

J'ai résolu ceci en utilisant:

app:tint="@color/COLOR_OF_ICON"

et pas:

Android:tint="@color/COLOR_OF_ICON"

Référence: https://github.com/material-components/material-components-Android/blob/master/docs/components/FloatingActionButton.md

42
Gab Ledesma

Comme indiqué dans cette réponse , si votre icône a plusieurs couleurs ou si vous souhaitez conserver la couleur d'origine de votre icône, attribuez @null comme teinte:

app:tint="@null"
12
Mahozad

Pour MaterialComponents Theme, vous pouvez définir les couleurs suivantes.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDark</item>
        <item name="colorPrimaryVariant">@color/primaryVariant</item>
        <item name="colorOnPrimary">@color/onPrimary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSecondaryVariant">@color/secondaryVariant</item>
        <item name="colorOnSecondary">@color/onSecondary</item>
        <item name="colorAccent">@color/accent</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorOnSurface">@color/onSurface</item>
        <item name="colorError">@color/error</item>
        <item name="colorOnError">@color/onError</item>
        <item name="colorButtonNormal">@color/buttonNormal</item>
        <item name="colorControlNormal">@color/controlNormal</item>
        <item name="colorControlActivated">@color/controlActivated</item>
        <item name="colorControlHighlight">@color/controlHighlight</item>
        <item name="colorBackgroundFloating">@color/backgroundFloating</item>
    </style>

colorSecondary est la couleur responsable de FloatingActionButton. et colorOnSecondary est la couleur responsable de la couleur de l'icône FloatingActionButton.

Dans votre AppTheme vous n'avez pas défié le colorSecondary. Donc, il a pris la couleur noire par défaut du parent Theme.MaterialComponents.Light.DarkActionBar.

Référence: sommet de développement Android, 2018 - Les composants de la conception matérielle

9
Ifta

Selon page de documentation GitHub relative à FloatingActionButton de la bibliothèque Material Components , les seuls attributs qui affectent l'icône sont:

  • app:srcCompat
  • app:tint
  • app:maxImageSize

Dans ce cas, puisque votre couleur est définie comme une constante (#FFF), le seul qui semble avoir du sens est app:tint. Peut-être que quelque chose dans votre thème a mis cela au noir?

Vous devriez pouvoir le remplacer en définissant app:tint="#FFF" sur votre FAB.

7
Ben P.

Est-ce que votre icône est multicolore

Ajouter seulement

app:tint="@null"

mais si vous voulez seulement changer de couleur

@ dimen/fab_margin -> 16dp

<com.google.Android.material.floatingactionbutton.FloatingActionButton
    Android:id="@+id/fab"
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/fab_margin"
    app:backgroundTint="@color/colorAccent"
    app:srcCompat="@drawable/ic_add"
    app:tint="@color/colorWhite" />

Style:

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
0
Irvin Joao