📚

意外と辿り着けなかったJetpack ComposeでPreviewできない問題の原因

2023/05/22に公開

概要

「Androidの初心者だからこそ話せるネタもあるよね」
「ありますね。Composeでプレビューが描画されなくて格闘したとか」

という話をしていて、ふと自分のアプリを開いたら、全然プレビューできない状態(笑)

ここからプレビューを実行しても

Error while executing: am start -n "com.vitantonio.nagauzzi.unusedappfinder/androidx.compose.ui.tooling.PreviewActivity" -a android.intent.action.MAIN -c android.intent.category.LAUNCHER --es composable com.vitantonio.nagauzzi.unusedappfinder.view.composable.HowToPermitAppUsageKt.PreviewHowToPermitAppUsage
Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.vitantonio.nagauzzi.unusedappfinder/androidx.compose.ui.tooling.PreviewActivity (has extras) }
Error type 3
Error: Activity class {com.vitantonio.nagauzzi.unusedappfinder/androidx.compose.ui.tooling.PreviewActivity} does not exist.
The following classes could not be found:
- androidx.compose.ui.tooling.ComposeViewAdapter

などと出力され、

Designタブで見ても

Some issues were found when trying to render this preview

このようなエラーでプレビューしてくれませんでした。
Android Studio Flamingo | 2022.2.1 Patch 1です。

エラー文言で検索しても、ピンとくる回答を得られず、あれれ〜?と色々調べてたら、原因がわかりました。

原因

GradleでdebugImplementationを定義してないからでした。

修正

build.gradle.kts (app)
debugImplementation("androidx.compose.ui:ui-tooling:1.4.2") // これ!
implementation("androidx.compose.ui:ui-tooling-preview:1.4.2")

Version Catalog使用の場合

libs.version.toml
[versions]
androidxCompose = "1.4.2"

[libraries]
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "androidxCompose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "androidxCompose" }
build.gradle.kts (app)
debugImplementation(libs.androidx.compose.ui.tooling)
implementation(libs.androidx.compose.ui.tooling.preview)

debugImplementationは、アプリそのものではなく開発環境やデバッグにおいてツールへの依存関係が発生するときに使います。
今回は@Previewの表示役であるandroidx.compose.ui.tooling.PreviewActivityを使うためにui-toolingへの依存関係が必要だったわけです。

補足

既存のアプリにComposeを設定するに書かれている通り進めて

// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")

をしっかりやってればぶち当たらない問題ですが、よく読まず勢いでやると
Androidアプリの機能そのままにAndroid View→Jetpack Composeの書き換えをした話みたいに
debugImpementationを忘れてしまうという教訓ですね😂

Discussion