web-dev-qa-db-ja.com

Android MaterialComponentsテーマのFABアイコンは常に黒

Androidアプリを作成しています。AndroidXライブラリとマテリアルデザインテーマを使用しています。styles.xmlのアプリテーマは次のとおりです。

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

カスタムライブラリから次のFABがあります。

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

また、デフォルトの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" />

アイコンの色（ベクトル描画可能）に関係なく、FAB内のアイコン（ライブラリーおよびデフォルトから）は常に黒です。新しいTheme.AppCompat.Light.DarkActionBarの代わりに古いTheme.MaterialComponents.Light.DarkActionBarを使用すると、FAB内のアイコンが元のベクトル描画可能の色を取得するため、問題をマテリアルデザインテーマに絞り込みました。

なぜこれが起こっているのか、どのように解決するのか知っていますか？

androidmaterial-designandroid-themefloating-action-buttonandroidx
25
Erik

私はこれを使用して解決しました：

app:tint="@color/COLOR_OF_ICON"

ではなく：

Android:tint="@color/COLOR_OF_ICON"

リファレンス： https://github.com/material-components/material-components-Android/blob/master/docs/components/FloatingActionButton.md

42
Gab Ledesma

この回答 で述べたように、アイコンに複数の色がある場合、またはアイコンの元の色を保持する場合は、@null色合いとして：

app:tint="@null"
12
Mahozad

MaterialComponentsテーマでは、次の色を定義できます。

<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は、FloatingActionButtonの原因となる色です。 colorOnSecondaryは、FloatingActionButtonのアイコンの色の原因となる色です。

AppThemeで、colorSecondaryを無視していません。そのため、親Theme.MaterialComponents.Light.DarkActionBar。

参照： Android dev summit、2018-The Components of Material Design

9
Ifta

Material ComponentsライブラリのFloatingActionButtonのGitHubドキュメントページ によると、アイコンに影響する属性は

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

この場合、色は定数（#FFF）として定義されているため、意味があると思われるのはapp:tintだけです。あなたのテーマの何かがこれを黒に設定したのでしょうか？

FABでapp:tint="#FFF"を設定することで、これをオーバーライドできるはずです。

7
Ben P.

あなたのアイコンは多色ですか

追加のみ

app:tint="@null"

ただし、色のみを変更する場合

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