'A successful build is needed before the preview can be displayed or can not show content in preview in Android Studio 4.0 (Canary)
I have tried to open the preview, but I can not open it.
I have tried opening Android Studio again, but the preview shows only a blank white screen and no content is shown inside it. When I open it again, it shows the following message at the preview side:
A successful build is needed before the preview can be displayed
A Build process has been finished and tried to build multiple times but still showing the same error.
I have used simple text inside it.
@Composable
fun Greeting(name: String) {
Text (text = "Hello $name!")
}
Here is my full content:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Greeting("Android")
}
}
@Composable
fun Greeting(name: String) {
Text (text = "Hello $name!")
}
@Preview
@Composable
fun PreviewGreeting() {
Greeting("Android")
}
}
How can I fix this?
Solution 1:[1]
I had the same issue. The build error message I got when I clicked on "Run with --info" was:
e: This version (1.0.0-alpha13) of the Compose Compiler requires Kotlin version 1.4.30 but you appear to be using Kotlin version 1.5.0 which is not known to be compatible. Please fix your configuration (or
suppressKotlinVersionCompatibilityCheckbut don't say I didn't warn you!).
So I went to the project level build.gradle file and added a snippet before the changes (you may change the version according to your error message) -
buildscript {
..
..
dependencies {
classpath "com.android.tools.build:gradle:7.0.0-alpha15"
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0"
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
..
..
}
So according to the error message, I changed kotlin-gradle-plugin version from 1.5.0 to 1.4.30 as below:
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0"
to
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.30"
After this again, I did 'Sync Now' the Gradle file and did 'Build & Refresh' in the preview tab. Hopefully the compatibility issues were gone and I was able to see the real time preview.
This may not be the best solution as we it requires downgrading Kotlin version, but yeah it worked for me. You can just try it off!!
Solution 2:[2]
Try this:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Greeting("Android")
}
}
@Composable
fun Greeting(name: String) {
Text (text = "Hello $name!")
}
}
@Preview
@Composable
fun PreviewGreeting() {
Greeting("Android")
}
Solution 3:[3]
Follow this steps, worked for me:
- File -> Invalid Caches/Restart
- Click on the preview screen, where it says "A successful build is needed before..."
- Build & Refresh with the following command: Option + Command + Shift + R (on Mac), I guess Alt + Ctrl + Shift + R is the command on Windows
It is important to click on the preview screen before you run the command.
Solution 4:[4]
Please follow the developer's document carefully. Please define your greeting function and PreviewGreeting function outside the MainActivity. Please do something like this:
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.compose.unaryPlus
import androidx.ui.core.Text
import androidx.ui.core.dp
import androidx.ui.core.setContent
import androidx.ui.foundation.DrawImage
import androidx.ui.graphics.Color
import androidx.ui.layout.*
import androidx.ui.material.MaterialColors
import androidx.ui.material.MaterialTheme
import androidx.ui.res.imageResource
import androidx.ui.tooling.preview.Preview
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme(
colors = MaterialColors(
primary = Color.Black,
background = Color.Cyan,
secondary = Color.Magenta
)
) {
Greeting("Hello World")
}
}
}
}
@Composable
fun Greeting(name: String) {
val image = +imageResource(R.drawable.ic_launcher_round)
Column(crossAxisSize = LayoutSize.Expand, modifier = Spacing(16.dp)) {
Text(name)
Text(name)
Text(name)
HeightSpacer(50.dp)
Container(expanded = true, height = 100.dp, width = 100.dp) {
DrawImage(image)
}
}
}
@Preview
@Composable
fun DefaultPreview() {
val image = +imageResource(R.drawable.ic_launcher_round)
Column(crossAxisSize = LayoutSize.Expand, modifier = Spacing(16.dp)) {
Text("Android")
Text("Android")
Text("Android")
Text("Hello")
HeightSpacer(50.dp)
Container(expanded = true, height = 100.dp, width = 100.dp) {
DrawImage(image)
}
}
}
And then run your app one time in the device/emulator. Then you can see the preview working:
Solution 5:[5]
I believe you might have fixed it already, but would still answer as there is no accepted answer yet.
I tried creating project from Empty Compose Activity project template. and It shows above error.
There is an issue in app:build.gradle file.
Replace compileSdkVersion 'Google Inc.:Google APIs:23' with compileSdkVersion
29
Replace targetSdkVersion 23 with targetSdkVersion 29
Clean and build the project and issues should be resolved.
Solution 6:[6]
I was facing the same issue, invalidate cache and restart worked for me.
Solution 7:[7]
After you build, close the file and then reopen it from the file tree on the left. Then it should work. I have no preview in there, so now it says no preview found. Add a preview by annotation compostables with @Preview.
But I think it will work for you.
Solution 8:[8]
It's kind of weird when you first create your compose project the preview doesn't work. A very simple solution is just go to the Build ? Rebuild menu to rebuild your project and everything just works fine :)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow