Jetpack Compose Preview not showing

Question

I seem to be having trouble with Preview in compose, the layout panel doesn't appear when I annotate a compose method with @preview. I assume I'm missing a dependency, but I've copied and pasted the code from here https://developer.android.com/jetpack/compose/setup. Any suggestions? (tried the usual clear cache, reopen project etc) :)

buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.0.0-alpha10'
        kotlinCompilerVersion '1.4.21'
    }
}

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-alpha10'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-alpha10'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha10'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-alpha10'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha10'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha10'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha10'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha10'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-alpha10'

    implementation 'com.google.android.material:material:1.2.1'
}

Here is my attempt at using preview (in AS it says Function "DefaultPreview" is never used)

import androidx.compose.ui.tooling.preview.Preview
.....
@Preview
@Composable
fun DefaultPreview() {
    Text(text = "Hello!")
}

hello have u found workaround for this i tried many things but none worked — Suj, Jan 18 '22 at 17:13
For me it was updating to "androidx.compose.ui:ui-tooling-preview:1.2.0-alpha02" even though I had buildFeatures set. — Rafael, Feb 03 '22 at 15:33
Can you please try adding this below dependency. I had been facing this for long but this solved it magically, though not sure why it is needed. implementation("androidx.activity:activity-compose:1.3.1") — prateek, Mar 03 '22 at 05:16

score 37 · Answer 1 · answered Nov 12 '21 at 11:51

37

    buildFeatures {
        compose true
    }

Write the above piece of code inside the Android block in the build.gradle file. Your problem will then be solved.

answered Nov 12 '21 at 11:51

Neeraj Sharma

371
3
4

2

This is what I was missing in my project. The options on the top right of the Compose file (Code / Split / Design) were not showing until I added this. – hellaandrew Nov 14 '21 at 00:13
*build.gradle (Module: your_project_name.app) – Stevo Nov 11 '22 at 08:30
ممنون خیلی عالی بود – mohamadreza navab Mar 27 '23 at 05:09
Thanks, was the case for me too! This happened because I created a separate, non-app Gradle module for my composables. If you do too, don't forget to add the necessary dependencies and options in the module's build file! – Arthur Khazbs Sep 01 '23 at 10:10

score 13 · Answer 2 · answered May 08 '22 at 15:31

13

For me, I missed one more dependency in my module's gradle

debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"

https://developer.android.com/jetpack/compose/tooling

answered May 08 '22 at 15:31

Tink

586
7
10

score 8 · Answer 3 · answered May 04 '22 at 10:05

For me it was some kind of mixture

Be sure you have latest Android Studio version
Within project/build.gradle be sure you have

dependencies {
  classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.20' 
}

Within app/build.gradle be sure you have

android {      
  composeOptions {         
      kotlinCompilerExtensionVersion'1.1.1'  
  }
  
  buildFeatures {          
      compose true
  }
}


dependencies {
  implementation("androidx.compose.ui:ui:1.1.1")
  // Tooling support (Previews, etc.)
  debugImplementation "androidx.compose.ui:ui-tooling:1.1.1"
  implementation "androidx.compose.ui:ui-tooling-preview:1.1.1"
  // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
  implementation("androidx.compose.foundation:foundation:1.1.1")
  // Material Design
  implementation("androidx.compose.material:material:1.1.1")
  // Material design icons
  implementation("androidx.compose.material:material-icons-core:1.1.1")
  implementation("androidx.compose.material:material-icons-extended:1.1.1")
  // Integration with observables
  implementation("androidx.compose.runtime:runtime-livedata:1.1.1")
  implementation("androidx.compose.runtime:runtime-rxjava2:1.1.1")
}

File -> Invalidate Ccaches and restart
Run project once

Very important: check for correct @Preview import - should be:

import androidx.compose.ui.tooling.preview.Preview

Example:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}

@Preview
@Composable
fun ComposablePreview() {
    SimpleComposable()
}

@Preview function should be without params.

It was "invalidate caches and restart" for me – arekolek Jan 31 '23 at 10:45 — arekolek, Jan 31 '23 at 10:45
The last sentence should be **bold** and on top. – t3chb0t Aug 31 '23 at 18:50 — t3chb0t, Aug 31 '23 at 18:50

score 6 · Answer 4 · answered Jan 22 '21 at 02:18

I'm going to leave this up in case others run into the same issue as I did (it is user error, but I also think the documentation could be clearer).

There are two versions of Android Canary, beta and arctic fox (alpha). Make sure you are using arctic fox if you want to use the latest version of the compose libraries. I've found the compose library 'androidx.compose.ui:ui-tooling:1.0.0-alpha08' (and higher) doesn't work very well with the beta version of canary.

score 5 · Answer 5 · answered Jun 29 '21 at 08:50

5

I think you can find something you want in configuration

answered Jun 29 '21 at 08:50

MJ Studio

3,947
1
26
37

I actually already had these enabled, but disabling and re-enabling fixed it for me. – Matt Robertson Jun 24 '22 at 18:49
What's the theme btw? – Amit Jayant Dec 26 '22 at 05:04
1

@AmitJayant I bought material design paid version and customize it. – MJ Studio Dec 26 '22 at 07:21

score 2 · Answer 6 · answered Aug 26 '21 at 17:48

2

Updating to the latest version of AS solved the error for me.

Try the latest version from here https://developer.android.com/studio/preview

answered Aug 26 '21 at 17:48

Sonu Sourav

2,926
2
12
25

I updated the version to the latest 1.0.5 but it is not working. downgrading to 1.0.1 that works for me. Use old compose version 1.0.1 until they fix. – Vasudev Vyas Jan 05 '22 at 07:45

score 2 · Answer 7 · answered Apr 28 '23 at 07:05

From the Android Developers website about Jetpack Compose Tooling:

To enable Android Studio-specific features for Jetpack Compose, you need to add these dependencies in your application build.gradle file:

debugImplementation "androidx.compose.ui:ui-tooling:1.4.2"
implementation "androidx.compose.ui:ui-tooling-preview:1.4.2"

score 1 · Answer 8 · answered Jul 19 '21 at 16:11

The Jetpack Compose (rc01, rc02) has an issue with @Preview. You can solve it by adding the following code in your build.gradle file:

android {
   ...
}

configurations.all {
    resolutionStrategy {
        force("androidx.compose.ui:ui-tooling:1.0.0-beta09")
        force("androidx.compose.ui:ui-tooling-data:1.0.0-beta09")
        force("androidx.compose.ui:ui-tooling-preview:1.0.0-beta09")
    }
}

dependencies {
   ...
}

Example: https://github.com/AlexZhukovich/ComposePlayground/blob/main/app/build.gradle

score 1 · Answer 9 · answered Jun 25 '22 at 14:51

1

I had to add

debugImplementation 'androidx.customview:customview-poolingcontainer:1.0.0-rc01'
debugImplementation 'androidx.customview:customview:1.1.0'

Source

answered Jun 25 '22 at 14:51

bytesculptor

411
1
4
21

score 1 · Answer 10 · answered Jul 30 '22 at 16:57

This is what worked for me add these dependencies if missed any

In the new AS compose runtime is missing and probably moved to something else and added UI tooling from the top when these were added studio started working with preview.

implementation("androidx.compose.runtime:runtime:1.2.0")
implementation("androidx.compose.ui:ui-tooling:1.2.0")

all together

implementation("androidx.activity:activity-compose:1.5.1")
implementation("androidx.compose.ui:ui:1.2.0")
implementation("androidx.compose.runtime:runtime:1.2.0")
implementation("androidx.compose.ui:ui-tooling-preview:1.2.0")
implementation("androidx.compose.ui:ui-tooling:1.2.0")

score 0 · Answer 11 · answered Nov 12 '21 at 16:46

0

For me I just didn't have the following in my gradle file:

composeOptions {
    kotlinCompilerExtensionVersion '1.0.3'
}

and

buildFeatures {
   compose true
}

answered Nov 12 '21 at 16:46

ryankuck

320
3
15

score 0 · Answer 12 · answered Dec 19 '21 at 17:19

0

in project's build.gradle specify:

dependencies {
            classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.30"
        }

answered Dec 19 '21 at 17:19

teafoot

1
1

Hpsaturn · Answer 13 · 2022-10-02T11:34:13.687

I had the same issue, and also had some compiling problems. My conclusion is that you need a good "variable versions" schema, for example is important use the same version for some dependencies, for example the Kotlin version.

I did something like this project: Jetpack Compose Navigation

where they using a global definition of version variables like this:

buildscript {
    ext {
        // Sdk and tools
        compileSdkVersion = 33
        minSdkVersion = 21
        targetSdkVersion = 32

        // App dependencies
        appCompatVersion = '1.5.1'
        activityComposeVersion = '1.6.0'
        composeCompilerVersion = "1.3.0"
        composeVersion = '1.2.1'
        coreTestingVersion = '2.1.0'
        espressoVersion = '3.4.0'
        gradleVersion = '7.2.2'
        kotlinVersion = '1.7.10'
        ktlintVersion = '0.45.2'
        ktxVersion = '1.9.0'
        materialVersion = '1.6.1'
        navigationComposeVersion = '2.5.2'
    }
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
    dependencies {
        classpath "com.android.tools.build:gradle:$gradleVersion"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
        classpath 'com.google.gms:google-services:4.3.14'
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.2'
    }
}

And then use it in your app build.gradle too:

dependencies {

    implementation project(path: ':libtoolscommon')

    implementation "androidx.appcompat:appcompat:$rootProject.appCompatVersion"
    implementation "androidx.core:core-ktx:$rootProject.ktxVersion"
    implementation "com.google.android.material:material:$rootProject.materialVersion"
    implementation 'androidx.preference:preference-ktx:1.2.0'

    // Compose
    implementation "androidx.compose.runtime:runtime:$rootProject.composeVersion"
    implementation "androidx.compose.ui:ui:$rootProject.composeVersion"
    implementation "androidx.compose.foundation:foundation:$rootProject.composeVersion"
    implementation "androidx.compose.material:material:$rootProject.composeVersion"
    implementation "androidx.compose.material:material-icons-extended:$rootProject.composeVersion"
    implementation "androidx.activity:activity-compose:$rootProject.activityComposeVersion"
    implementation "androidx.navigation:navigation-compose:$rootProject.navigationComposeVersion"
    debugImplementation "androidx.compose.ui:ui-tooling:$rootProject.composeVersion"

    // Testing dependencies
    androidTestImplementation "androidx.arch.core:core-testing:$rootProject.coreTestingVersion"
    androidTestImplementation "androidx.test.espresso:espresso-contrib:$rootProject.espressoVersion"
    androidTestImplementation "androidx.test.espresso:espresso-core:$rootProject.espressoVersion"

    // Compose testing dependencies
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$rootProject.composeVersion"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$rootProject.composeVersion"

    implementation "androidx.compose.material3:material3:1.0.0-beta03"
    implementation "androidx.compose.material3:material3-window-size-class:1.0.0-beta03"
    implementation 'androidx.window:window:1.1.0-alpha03'

   ---
}

And also try to have the last version of this libraries.

If you have a whole project in Kotlin, it should be like this:

    implementation(libs.androidx.core.ktx)
    implementation(libs.kotlin.stdlib)
    implementation(libs.kotlinx.coroutines.android)

    implementation(libs.androidx.compose.ui.tooling.preview)
    debugImplementation(libs.androidx.compose.ui.tooling)
    implementation(libs.androidx.compose.materialWindow)
    implementation(libs.androidx.compose.material.iconsExtended)

    implementation(libs.androidx.lifecycle.runtime)
    implementation(libs.androidx.lifecycle.viewModelCompose)
    implementation(libs.androidx.navigation.compose)

    implementation(libs.androidx.activity.compose)
    implementation(libs.androidx.window)

Don't do that. Just use the compose BoM and just add the version once. Without any variable: https://developer.android.com/jetpack/compose/bom/bom?hl=es-419 — Rubén Viguera, Apr 03 '23 at 05:54
At the moment I did that because the official example from Google did that. But I agree with you. That is the way. — Hpsaturn, Aug 31 '23 at 11:18

score -1 · Answer 14 · answered Oct 26 '22 at 03:25

-1

Expect it to show in the 'Split' or 'Design' mode after a build. (Not right over code like it seems in the tutorial.)

answered Oct 26 '22 at 03:25

clwhisk

1,805
1
18
17

Jetpack Compose Preview not showing

14 Answers14

Linked