Support common `org.jetbrains.compose.ui.tooling.preview.Preview` in IDEA and Android Studio

[igordmn]

State on 08-07-2024 (Compose 1.6.11):

• added commonMain org.jetbrains.compose.ui.tooling.preview.Preview (in implementation(compose.components.uiToolingPreview))
• it is supported only in Fleet, IDEA/Android Studio support needs to be added separately
• there is currently multiple Preview's that confuses people. It is tracked in https://github.com/JetBrains/compose-multiplatform/issues/4869

[igordmn]

Parent task: https://github.com/JetBrains/compose-multiplatform/issues/2045

[Him188]

Is it possible to render Android previews from commonMain if android target is enabled?

Desktop previews lack features such as device sizes, light/dark, interactive mode, layout inspector, animations, etc. Given these limitations, I don't like and don't use desktop previews at all. I always open a separate editor tab and place all previews in androidMain.

It could be very nice if a common @Preview annoatation can somehow trigger Android previews in Android Studio, before we implement these features in compose multiplatform previews.

[igordmn]

Is it possible to render Android previews from commonMain if android target is enabled?

At the moment, it isn't possible officially. There can be workarounds, but I haven't checked them.

A current working official (but cumbersome) way is defining your android-only @androidx.compose.ui.tooling.preview.Preview previews in androidMain and call a common defined Composable in it.

[Andrew0000]

@igordmn How soon can we expect this feature to arrive? Is there any plan? This would be really useful in terms of productivity and would make the transition from Jetpack Compose to CMP easier.

[Him188]

A current working official (but cumbersome) way is defining your android-only @androidx.compose.ui.tooling.preview.Preview previews in androidMain and call a common defined Composable in it.

Thanks, that's what I have been doing. The problem is it separates code and previews, making it hard for collaborators to find them. A separate IDE tab is also needed. Switching between tabs is frustrating.

Common @Preview is the feature that I want most. However, whether I will use it in production is still questionable, due to the lack of features compared with Android previews. It's likely that I will continue writing previews in androidMain even if it's frustrating. But at least I might start using common @Preview for very small composables that do not need interactive mode or considering device sizes.

[brucemax]

Just came here to see if anything changed after several month, unfortunately no. I just want to write UI and see preview right in the same file..

[hmy65]

How could fleet support commonMain preivew? That's strange.

[gulabsagevadiya]

Is it possible to render Android previews from commonMain if android target is enabled?

At the moment, it isn't possible officially. There can be workarounds, but I haven't checked them.

A current working official (but cumbersome) way is defining your android-only @androidx.compose.ui.tooling.preview.Preview previews in androidMain and call a common defined Composable in it.

yes i did the same but it is not showing preview like jetpack compose does in android. when i did like you said preview runs on emulator not showing in side by side

[igordmn]

is not showing preview like jetpack compose does in android

You can check how it is done in https://kmp.jetbrains.com/:

The important parts are in composeApp/build.gradle.kts:

androidMain.dependencies {
    ...
    implementation(compose.preview)
    ...
}
...
android {
    ...
    buildFeatures {
        compose = true
    }
    ...
}

[gulabsagevadiya]

is not showing preview like jetpack compose does in android

You can check how it is done in https://kmp.jetbrains.com/:

The important parts are in composeApp/build.gradle.kts:

androidMain.dependencies {
    ...
    implementation(compose.preview)
    ...
}
...
android {
    ...
    buildFeatures {
        compose = true
    }
    ...
}

yes this worked fine. can you help me little more as i am using common resource in kmp. when i use any drawable from common resource render gets fail

[igordmn]

when i use any drawable from common resource render gets fail

Maybe this is what you encounter. Try the latest dev version

[Andrew0000]

@igordmn sorry for asking again, but is there any time frame when we can expect Preview to work in commonMain in IDEA/AS?

For me this is a quite important feature that stops me from using CMP more.

[igordmn]

but is there any time frame when we can expect Preview to work in commonMain in IDEA/AS

We don't have public ETA

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.

[storytellerF]

Fleet compose preview only work for fun App()?

[adamglin0]

Fleet compose preview only work for fun App()?

It support all composable function