Jetpack Compose Preview not showing

user_12507977 0
Viewed 17389

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!")
}
android-jetpack-compose android
11 Answers
    buildFeatures {
        compose true
    }

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

user_167279230

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.

user_125079770

For me it was some kind of mixture

  1. Be sure you have latest Android Studio version
  2. Within project/build.gradle be sure you have
dependencies {
  classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.20' 
}
  1. 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")
}
  1. File -> Invalidate Ccaches and restart
  2. 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.

user_45434350
user_31340150

I think you can find something you want in configuration enter image description here

user_101991380
user_86162290

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

user_47539830

I had to add

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

Source

user_117377500

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

composeOptions {
    kotlinCompilerExtensionVersion '1.0.3'
}

and

buildFeatures {
   compose true
}
user_50210560

in project's build.gradle specify:

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

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")
user_45174500
Related