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内のアイコンが元のベクトル描画可能の色を取得するため、問題をマテリアルデザインテーマに絞り込みました。
なぜこれが起こっているのか、どのように解決するのか知っていますか?
私はこれを使用して解決しました:
app:tint="@color/COLOR_OF_ICON"
ではなく:
Android:tint="@color/COLOR_OF_ICON"
この回答 で述べたように、アイコンに複数の色がある場合、またはアイコンの元の色を保持する場合は、@null
色合いとして:
app:tint="@null"
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
Material ComponentsライブラリのFloatingActionButtonのGitHubドキュメントページ によると、アイコンに影響する属性は
app:srcCompat
app:tint
app:maxImageSize
この場合、色は定数(#FFF
)として定義されているため、意味があると思われるのはapp:tint
だけです。あなたのテーマの何かがこれを黒に設定したのでしょうか?
FABでapp:tint="#FFF"
を設定することで、これをオーバーライドできるはずです。
あなたのアイコンは多色ですか
追加のみ
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>