🦀

BottomNavigationで選択時にSVGの色が反映されない(Jetpack Compose)

2021/07/06に公開

まずは解決法

BottomNavigationItemに

selectedContentColor = Color.Unspecified

を追加する。

ここからはそもそもの問題と原因について興味がある方は読んでみてください

困ったこと

Jetpack ComposeにBottomNavigtionというAndroidではお馴染みのUIを作成するコンポーネントがあります。
ここにSVGの画像を表示し、選択している箇所の色を変えようと思ったのですが、SVGの色がうまく反映されませんでした。
本来表示したい色
本来表示したい色
表示された色
表示された色

原因

BottomNavigationItemの実装を見てみると

fun RowScope.BottomNavigationItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: @Composable (() -> Unit)? = null,
    alwaysShowLabel: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    selectedContentColor: Color = LocalContentColor.current,
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)
)

となっています。
今回問題となる部分は

selectedContentColor: Color = LocalContentColor.current

であり、selectedContentColorを指定しない場合はLocalContentColor.currentの値がデフォルトで入ります。
LocalContentColorの説明を見ると

CompositionLocal containing the preferred content color for a given position in the hierarchy. This typically represents the on color for a color in Colors. For example, if the background color is Colors.surface, this color is typically set to Colors.onSurface.
This color should be used for any typography / iconography, to ensure that the color of these adjusts when the background color changes. For example, on a dark background, text should be light, and on a light background, text should be dark.
Defaults to Color.Black if no color has been explicitly set.

となっており、背景色に応じていい感じの色に調整してくれます。
特にこだわりがない場合は非常にありがたいのですが、今回のようにSVGの色をちゃんと表示して欲しい場合には解除したいです。
そのため、解決策にある

selectedContentColor = Color.Unspecified

を記述することでselectedContentColorColor.Unspecifiedが設定され(未設定にされ)、実際のSVGの色を反映することができます。

最後に

今回はこのような対応で解決しましたが、もっと良い解決方法や解説の間違いがあれば教えていただけると嬉しいです!

株式会社ゆめみ

Discussion