Jetpack Compose. Preview is not available

Question

There is a project with compose.

There are a 2 modules in the project: core and othergames ( core is depends on othergames ).

I can successfully see a previews (annotated with @Preview) of compose views in core module. But when I try to see previews in othergames , preview can't be shown with error:

The following classes could not be instantiated:
- androidx.compose.ui.tooling.ComposeViewAdapter (Open Class, Show Exception, Clear Cache)
Tip: Use View.isInEditMode() in your custom views to skip code or show sample data when shown in the IDE.  If this is an unexpected error you can also try to build the project, then manually refresh the layout.

There are details:

java.lang.NoSuchFieldError: view_tree_saved_state_registry_owner
    at androidx.savedstate.ViewTreeSavedStateRegistryOwner.set(ViewTreeSavedStateRegistryOwner.java:53)
    at androidx.compose.ui.tooling.ComposeViewAdapter.init(ComposeViewAdapter.kt:666)
    at androidx.compose.ui.tooling.ComposeViewAdapter.<init>(ComposeViewAdapter.kt:217)
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:490)
    at org.jetbrains.android.uipreview.ViewLoader.createNewInstance(ViewLoader.java:373)
    at org.jetbrains.android.uipreview.ViewLoader.loadClass(ViewLoader.java:192)
    at org.jetbrains.android.uipreview.ViewLoader.loadView(ViewLoader.java:150)
    at com.android.tools.idea.rendering.LayoutlibCallbackImpl.loadView(LayoutlibCallbackImpl.java:302)
    at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:417)
    at android.view.BridgeInflater.loadCustomView(BridgeInflater.java:428)
    at android.view.BridgeInflater.createViewFromTag(BridgeInflater.java:332)
    at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:965)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:663)
    at android.view.LayoutInflater.inflate(LayoutInflater.java:505)
    at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:361)
    at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:436)
    at com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:121)
    at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:727)
    at com.android.tools.idea.rendering.RenderTask.lambda$inflate$7(RenderTask.java:883)
    at com.android.tools.idea.rendering.RenderExecutor$runAsyncActionWithTimeout$2.run(RenderExecutor.kt:187)
    at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
    at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
    at java.base/java.lang.Thread.run(Thread.java:829)

Both of modules has a equal compose dependencies and settings in build.gradle files:

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
        useIR = true
    }
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.2.0-alpha03'
    }

And:

dependencies {

...

    implementation "androidx.compose.ui:ui:1.2.0-alpha03"
    implementation "androidx.compose.ui:ui-tooling:1.2.0-alpha03"
    implementation "androidx.compose.ui:ui-tooling-preview:1.2.0-alpha03"
    implementation "androidx.compose.foundation:foundation:1.2.0-alpha03"
    implementation "androidx.compose.foundation:foundation-layout:1.2.0-alpha03"
    implementation "androidx.compose.material:material:1.2.0-alpha03"
    implementation "androidx.compose.material:material-icons-core:1.2.0-alpha03"
    implementation "androidx.compose.material:material-icons-extended:1.2.0-alpha03"
    implementation "androidx.compose.animation:animation:1.2.0-alpha03"
    implementation "androidx.compose.animation:animation-core:1.2.0-alpha03"
    implementation "androidx.compose.animation:animation-graphics:1.2.0-alpha03"
    implementation "androidx.compose.runtime:runtime-livedata:1.2.0-alpha03"
    implementation "androidx.compose.compiler:compiler:1.2.0-alpha03"

...

Why I can't see previews in othergames module? How to solve it?

Answer 1

I found a solution to fix it. In module where previews broke I added library which I removed recently:

implementation 'androidx.appcompat:appcompat:1.4.1'

Once I did it, previews appeared again. I not sure this library is real reason, because core module doesn't contains this library, but still show preview.

UPDATE:

Time passed and I ran into this problem again. Now it is not solved by adding the library I mentioned above. I still don't know what to do.

Answer 2

Came across the exact issue earlier. Make sure everything is up to date, this includes:

Android Studio ( Help > Check for updates) Jetpack Compose (project level build) Kotlin (project level build)

Other than that, the compose-tooling dependency should have the same version as that of Compose itself.

Here's what solved my issue

@Preview(showSystemUi = true, showBackground = true) // Apparently, adding these two lines seems to do the magic here
@Composable
fun MyComposable(){
     ...
}

Well, that should be pretty much it.

Have a look at Studio BumbleBee "Render Problem" For Compose Preview

Answer 3

Whenever you see a "try to build the project" error, always check the gradle implementations first.

Then, move on to whether your version numbers are correct.

Alpha versions aren't always the best choices.

So, if you can't find an error in the implementations, roll back any error associated implementation to it's previous stable release.

Then check again.

Also, maybe try and create a new android studio project and check if the core implementations in both the new and your current are similar or, at least look ok for the common ones.

If they look ok, add a comment besides all the implementations that look ok. Then focus on the other implementations.

---

Now, assuming your error is the same, ie a combination of try to build the project and is associated with compose , check all your ui based implementations and, your jetpack compose implementations if you are using those. Hope it helps.