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!")
}

Answer 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.

Answer 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.

Answer 3

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' 
}

3. 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")
}

4. File -> Invalidate Ccaches and restart
5. 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.

Answer 4

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

Answer 5

I think you can find something you want in configuration