BottomNavigationで選択時にSVGの色が反映されない(Jetpack Compose)
まずは解決法
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
を記述することでselectedContentColor
にColor.Unspecified
が設定され(未設定にされ)、実際のSVGの色を反映することができます。
最後に
今回はこのような対応で解決しましたが、もっと良い解決方法や解説の間違いがあれば教えていただけると嬉しいです!
Discussion