何が起きたのか
Jetpack Composeを導入したのに、@Previewを付けてもプレビューが表示されません。
下記の画像を見てください。正確には、本来Android Studioの画面右側に表示されるはずの「Code / Split / Design」のタブが表示されません。
環境
- Android Studio Arctic Fox | 2020.3.1
dependencies {
implementation("androidx.compose.ui:ui:1.0.1")
implementation("androidx.compose.ui:ui-tooling:1.0.1")
implementation("androidx.compose.foundation:foundation:1.0.1")
implementation("androidx.compose.material:material:1.0.1")
implementation("androidx.compose.material:material-icons-core:1.0.1")
implementation("androidx.compose.material:material-icons-extended:1.0.1")
implementation("androidx.compose.runtime:runtime-livedata:1.0.1")
implementation("androidx.compose.runtime:runtime-rxjava2:1.0.1")
androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.1")
}
解決策
下記を追加しましょう。(バージョンは2021年8月16日時点)
plugins {
id 'kotlin-android'
}
android {
defaultConfig {
minSdkVersion 21
}
buildFeatures {
compose true
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = "1.8"
}
composeOptions {
kotlinCompilerExtensionVersion '1.0.1'
}
}
buildscript {
...
dependencies {
classpath "com.android.tools.build:gradle:7.0.0"
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.21"
...
}
}
詳しい記載や、最新のバージョンは下記をご確認ください。
https://developer.android.com/jetpack/compose/interop/adding
こんなのどこに書いてあったんだ...
Android Developersの「 Use Android Studio with Jetpack Compose 」のページを見て下さい。
一番下にこんな記載がありました。
Add Jetpack Compose to an existing project
If you want to use Jetpack Compose in an existing project, you’ll need to configure your project with required settings and dependencies. For more information, see Adding Jetpack Compose to your app.
このリンクをタップすると、上記解決策が書いてあります。
英語のページでもちゃんと読まねば...