⛔

Jetpack Composeでマイナスの画像を表示したい

に公開
Android
Kotlin
GUI
Jetpack Compose
tech

前提


こんな感じのプラス、マイナスが表示されるUIを作りたいとします。

+の表示

IconのimageVectorで、Icons.Filled.Addを指定すれば+は表示できます。

Icon(
    modifier = Modifier.fillMaxSize(),
    imageVector = Icons.Filled.Add,
    contentDescription = "test"
)

-の表示

-は標準ではIcons.Filledの中にありません。

なんで…

対処法

とりあえず表示したい場合

build.gradle(:app)に以下を記述してmaterial-icons-extendedライブラリを追加します。

implementation("androidx.compose.material:material-icons-extended:1.7.8")

マイナス画像を使うファイルでは以下をimportします。

import androidx.compose.material.icons.filled.Remove


使えるようになりました！

ただ、この方法は推奨されていません。推奨される方法を次で説明します。

推奨される方法

そもそもデフォルトで指定できるのはMaterial IconsというGoogleの作成した膨大なアイコン集のごく一部です。
すべてのアイコンはここから見ることができます
https://fonts.google.com/icons

material-icons-extendedは全てのアイコンを含む版なのですが、量が膨大なのでそのままインポートすることは推奨されていません(重すぎてアイコンのサジェストが出てこなくなったりします)。
その代わり、

  1. 直接依存関係として含める場合は、R8/Proguard を使用して未使用のアイコンを削除する
  2. 保持したいアイコンをコピーアンドペーストでローカルコピーを作成する
  3. Android Studio の「ベクターアセットのインポート」機能を使用する

のどれかで使用することがオススメ[1]されています。

今回は手軽そうな3番の方法を使ってみます。

  1. res->New->Vector Assetをクリック

  2. Asset Studioが開くので、Clip artをクリック

  3. Select Iconウィンドウが出るので、検索ボックスにRemoveと入れる(上記のGoogle Fontsサイトから使いたいアイコンの名前を探してください)


  1. 必要があれば名前やサイズを変更
    デフォルトで良いと思います。

  2. drawableリソースとして追加するフォルダを選択
    大抵の場合はデフォルトでOK

  3. drawableフォルダにアイコンが追加されたことを確認する

  4. IconのpainterにpainterResourceとして指定
    material-iconsライブラリと異なり、drawableリソース扱いになるので、同じIconのComposableでもpainterを指定する方を使います。

Icon(
    modifier = Modifier.fillMaxSize(),
    painter = painterResource(R.drawable.outline_remove_24),
    contentDescription = "test"
)
  1. 完成！
脚注

  1. https://developer.android.com/reference/kotlin/androidx/compose/material/icons/package-summary.html ↩︎

Discussion