Compose Preview not showing in Android Studio kotlin multiplatform project

Question

My latest jellyfish Android studio doesn't show me preview for Compose mutliplatform composable functions. Here's build.gradle :

sourceSets {
    val desktopMain by getting
    
    androidMain.dependencies {
        implementation(libs.compose.ui.tooling.preview)
        implementation(libs.androidx.activity.compose)
    }
    commonMain.dependencies {
        implementation(compose.runtime)
        implementation(compose.foundation)
        implementation(compose.material)
        implementation(compose.ui)
        implementation(compose.components.resources)
        implementation(libs.kotlinx.serialization.json)
        implementation(compose.components.uiToolingPreview)
        implementation(libs.navigation.compose)
        implementation(libs.androidx.lifecycle.viewmodel.compose)
    }
    desktopMain.dependencies {
        implementation(compose.desktop.currentOs)
    }
}

here's lib.versions.toml :

compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose" }

here's my code :

@Composable
fun MainMenuContent(
    viewState: MainMenuState
) {
    Column {
        repeat(5) {
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                IconTextRow(Icons.Rounded.Home, stringResource(Res.string.all_purpose))
                IconTextRow(Icons.Rounded.Home, stringResource(Res.string.all_purpose))
                IconTextRow(Icons.Rounded.Home, stringResource(Res.string.all_purpose))
            }
        }
    }
}

private class MainMenuParameterProvider : PreviewParameterProvider<MainMenuState> {
    override val values: Sequence<MainMenuState>
    init {
        val defaultState = MainMenuState(isPaid = false)
        values = sequenceOf(
            defaultState,
            defaultState.copy(isPaid = true)
        )
    }
}

@Preview
@Composable
private fun MainMenuPreview(
    @PreviewParameter(MainMenuParameterProvider::class) param: MainMenuState
) {
    MaterialTheme {
        MainMenuContent(
            param
        )
    }
}

I'm using Fleet and it doesn't work for me either. I think "PreviewParameterProvider" is not supported yet somehow with IDEs even though we can use it. — Özgür
– Özgür, Commented May 12, 2024 at 6:39
do you still have the problem ? I have it too, I'm looking for a solution but I can't find a correct one. — Thaerith
– Thaerith, Commented Jul 4, 2024 at 10:02
I am still looking for an answer to this issue and neither fleet nor android studio show previews. Has anyone find the solution? — melikaafrakhteh
– melikaafrakhteh, Commented Nov 24, 2024 at 12:17

Jadu · Accepted Answer · 2025-02-10 12:27:47Z

1

Origin post : Jetpack Compose preview can no longer be rendered

This happened while I was working with Kotlin Multiplatform and thanks to @aga for the answer, the implementation is a quite different but concept remains the same

In you build.gradle.kts go to the bottom end of the file and define the dependencies and add this debugImplementation "androidx.compose.ui:ui-tooling"

dependencies {
    debugImplementation("androidx.compose.ui:ui-tooling")
}

How to use it

sync the project and Now go to android[main] and create a Kotlin file and annotate with @androidx.compose.ui.tooling.preview.Preview and @composable

Example

@androidx.compose.ui.tooling.preview.Preview
@Composable
fun preview() {
    Yourcomposable()
}

That's all, Happy coding

answered Feb 10 at 12:27

Jadu

7995 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

President James K. Polk · Accepted Answer · 2025-05-26 23:59:36Z

0

You don't need a workaround.

The preview is shown when you open the androidMain/MainActivity.kt file.
Just dock this file to the right side, and you can simply drag the preview panel over the whole code.
You don't really need to be able to see the MainActivity.kt code.

That way, the preview panel that is linked to MainActivity.kt is just shown to the right side of your screen, while you can just create/edit your layout in the CommonMain/YourAppName.kt file.

edited May 26 at 23:59

President James K. Polk

42.3k34 gold badges113 silver badges149 bronze badges

answered May 24 at 20:38

Thomas Van Beeck

1

Collectives™ on Stack Overflow

Compose Preview not showing in Android Studio kotlin multiplatform project

2 Answers 2

How to use it

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

How to use it

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related