0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Composeで@Previewを付けたのにプレビューが表示されない件

Posted at

何が起きたのか

Jetpack Composeを導入したのに、@Previewを付けてもプレビューが表示されません。
下記の画像を見てください。正確には、本来Android Studioの画面右側に表示されるはずの「Code / Split / Design」のタブが表示されません。
スクリーンショット 2021-08-16 20.13.11.png

環境

  • Android Studio Arctic Fox | 2020.3.1
app/build.gradle
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日時点)

app/build.gradle
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'
    }
}
./build.gradle
buildscript {
    ...
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.0"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.21"
        ...
    }
}

そしてsyncをすると...表示されました!
image.png

詳しい記載や、最新のバージョンは下記をご確認ください。
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.

このリンクをタップすると、上記解決策が書いてあります。
英語のページでもちゃんと読まねば...

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?