'Jetpack Compose Preview not showing

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 android-jetpack-compose

Solution 1:^[1]

    buildFeatures {
        compose true
    }

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

Solution 2:^[2]

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.

Solution 3:^[3]

I think you can find something you want in configuration

Solution 4:^[4]

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

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

Solution 5:^[5]

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.

Solution 6:^[6]

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

Solution 7:^[7]

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

Solution 8:^[8]

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

composeOptions {
    kotlinCompilerExtensionVersion '1.0.3'
}

and

buildFeatures {
   compose true
}

Solution 9:^[9]

in project's build.gradle specify:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Neeraj Sharma
Solution 2	user12507977
Solution 3	MJ Studio
Solution 4	Sonu Sourav
Solution 5	Liviu
Solution 6	Tink
Solution 7	ALex Zhukovich
Solution 8	kuck1
Solution 9	teafoot

'Jetpack Compose Preview not showing

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]