Android / Kotlin / Programming

Iconのベクター画像が真っ暗になる理由と回避方法 – Android Jetpack Compose

やりたいこと

Icon(
    painter = painterResource(id = path_to_vector),
    contentDescription = "",
)

Icon関数にベクター画像を渡して表示したい

問題

このようにベクター画像が真っ暗に塗られて表示される

解決方法

Icon(
    painter = painterResource(id = PdfEditorIconId.Folder),
    contentDescription = "",
    tint = Color.Unspecified
)

tint = Color.Unspecified を指定すれば解決します

原因

Icon関数のtintにはデフォルトでLocalContentColor.currentが指定されています

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
) {
    ...
}

LocalContentColor.currentにはColor.Blackが指定されているため、tintにColor.Blackが適用され真っ暗になります

val LocalContentColor = compositionLocalOf { Color.Black }

compositionLocalOfはcomposeで使えるグローバルな値を定義しています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です