wake-up-neo.com

Android FAB-Symbol immer schwarz mit MaterialComponents-Design

Ich erstelle eine Android App und verwende die AndroidX-Bibliotheken und das Materialdesign-Thema. Mein App-Thema auf styles.xml ist:

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

Ich habe das folgende FAB aus einer benutzerdefinierten Bibliothek:

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

Und versuchte auch die Standard-FAB:

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

Unabhängig von der Farbe des Symbols (eines Vektors, der gezeichnet werden kann) ist das Symbol im FAB (aus der Bibliothek und aus der Standardeinstellung) immer schwarz. Ich habe das Problem auf das Thema Materialdesign eingegrenzt, da ich das alte Theme.AppCompat.Light.DarkActionBar anstelle des neuen Theme.MaterialComponents.Light.DarkActionBar Das Symbol im FAB erhält die Farbe des ursprünglichen Vektors, der gezeichnet werden kann.

Weiß jemand, warum das passiert und wie man es löst?

androidmaterial-designandroid-themefloating-action-buttonandroidx
25
Erik

Ich habe das gelöst mit:

app:tint="@color/COLOR_OF_ICON"

und nicht:

Android:tint="@color/COLOR_OF_ICON"

Referenz: https://github.com/material-components/material-components-Android/blob/master/docs/components/FloatingActionButton.md

42
Gab Ledesma

Wie in diese Antwort gesagt, weisen Sie @null Als Farbton zu, wenn Ihr Symbol mehrere Farben hat oder wenn Sie die ursprüngliche Farbe des Symbols beibehalten möchten:

app:tint="@null"
12
Mahozad

Für MaterialComponents Theme können Sie die folgenden Farben definieren.

<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 ist die verantwortliche Farbe für FloatingActionButton. und colorOnSecondary ist die verantwortliche Farbe für die Symbolfarbe von FloatingActionButton.

In Ihrem AppTheme haben Sie sich dem colorSecondary nicht widersetzt. Also nahm es die Standardfarbe Schwarz von übergeordnetem Theme.MaterialComponents.Light.DarkActionBar.

Referenz: Android dev summit, 2018 - Die Komponenten des Materialdesigns

9
Ifta

Laut der GitHub-Dokumentationsseite für den FloatingActionButton der Material Components Library sind die einzigen Attribute, die sich auf das Symbol auswirken

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

In diesem Fall, da Ihre Farbe als Konstante definiert ist (#FFF), der einzige, der Sinn zu ergeben scheint, ist app:tint. Vielleicht hat etwas in Ihrem Thema dies auf Schwarz gesetzt?

Sie sollten es überschreiben können, indem Sie app:tint="#FFF" auf Ihrem FAB.

7
Ben P.

Ist Ihr Icon ist mehrfarbig

Nur hinzufügen

app:tint="@null"

aber wenn du nur die farbe ändern willst

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

Stil:

 <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