Add Android preview to android-ios compose template

[gastsail]

Describe the bug I'm trying to preview my composables on the android side to see what I'm doing before compiling.

I have added the preview tooling lib to the androidMain

And then used the @Preview annotation on my androidmain package inside my shared folder

I cannot even see the preview icon on the top right corner to see the composable preview

This is my setup

Affected platforms Select one of the platforms below:

• All
• iOS (we don't support Preview on iOS, @dima-avdeev-jb )
• Android

Versions

• Kotlin version*: 1.9.0
• Compose Multiplatform version*: 0.6.1
• OS version(s)* (required for Desktop and iOS issues):
• OS architecture (x86 or arm64):
• JDK (for desktop issues): corretto-17

Expected behavior I should be able to see the preview

[mazunin-v-jb]

Hello! Thanks for the issue. Could you please provide info about the affected platform? We don't have a working preview on iOS target yet. And could you check again your Compose Multiplatform version?

[gastsail]

Hey how are you thanks for your reply, compose plugin version is 0.6.1, I have also tried downgrading jdk to 11 , 16 and still the same.

Im trying only to run this on the Android side, thanks.

[mazunin-v-jb]

Thank you for providing information. Could you please try to create a new Android project and check if it works in it? And if so, could you please check how you connect artifacts and dependencies in androidApp/build.gradle.kts in both your projects?

[gastsail]

Hey @mazunin-v-jb I have used this template https://github.com/JetBrains/compose-multiplatform-ios-android-template#readme I did not start it from scratch, surprisingly I cannot find any example that uses the @Preview annotation, is just me or for now is it having issues ?

If you go to -> https://github.com/JetBrains/compose-multiplatform/blob/master/examples/README.md in any of these examples I cannot find the @Preview annotation on the androidMain folders , I assume that all the views are visualized on runtime.

[mazunin-v-jb]

That's correct, that template doesn't have a preview setting for Android. We're planning to fix this later.

[gastsail]

Thanks a lot, is there any workaround I can do on that template to be able to use the preview ?

[mazunin-v-jb]

Unfortunately, I can't provide a workaround for now. We'll try to fix it in the future. Please stay tuned, we'll inform here when we fix.

[gastsail]

Thanks a lot @mazunin-v-jb , I will be waiting and trying out new things, will close this for now :)

[gastsail]

or should we keep it open for when an update is available ?

[fzanutto]

I added these settings inside the android block of the root build.gradle.kts

buildFeatures {
    compose = true
}
composeOptions {
    kotlinCompilerExtensionVersion = "1.5.1"
}

Besides this dependencies for androidMain

api(compose.preview)
api(compose.uiTooling)

And my previews are showing

Here is the repo: https://github.com/fernandozanutto/water-reminder

[gastsail]

Thanks a lot @fernandozanutto will try this one and let you know 👍

[gastsail]

Ok, so, I have added

composeOptions {
        kotlinCompilerExtensionVersion = "1.5.1"
    }
    buildFeatures {
        compose = true
    }

As @fernandozanutto suggested inside the :androidApp buildGradle file , then added

api(compose.preview)
api(compose.uiTooling)

Inside androidMain in the :shared build.gradle file, and now from androidApp package I can render the previews

Btw, on gradle.properties I'm using

#Gradle
org.gradle.jvmargs=-Xmx2048M -Dkotlin.daemon.jvm.options\="-Xmx2048M"

#Kotlin
kotlin.code.style=official

#MPP
kotlin.mpp.stability.nowarn=true
kotlin.mpp.enableCInteropCommonization=true
kotlin.mpp.androidSourceSetLayoutVersion=2

#Compose
org.jetbrains.compose.experimental.uikit.enabled=true
compose.ios.resources.sync=false

#Android
android.useAndroidX=true
android.compileSdk=34
android.targetSdk=33
android.minSdk=24

#Versions
kotlin.version=1.9.0
agp.version=8.0.2
compose.version=1.5.0-beta02

[realityexpander]

This has been broken again with kotlin 1.9.10, compose 1.5.2, agp 8.0.2

[dima-avdeev-jb]

Related PR and discussion here: https://github.com/JetBrains/compose-multiplatform-template/pull/18

[ariefannur]

same with @realityexpander got this error Cannot cast androidx.compose.compiler.plugins.kotlin.ComposePluginRegistrar to org.jetbrains.kotlin.compiler.plugin.CompilerPluginRegistrar

[virtanAnton]

To solve ambiguous behaviour in gradle plugin and make Layout Inspector work, you may define separate gradle module for Android build.gradle(:app) and for multiplatform build.gradle (:shared) with mentioned configuration https://github.com/JetBrains/compose-multiplatform/issues/3499#issuecomment-1686417059

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = extensions.getByType(ComposeExtension::class.java)
            .dependencies.compiler.auto.substringAfterLast(":")
    }

    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }

    dependencies {
        debugImplementation(compose.uiTooling)
    }
}

[realityexpander]

To solve ambiguous behaviour in gradle plugin and make Layout Inspector work, you may define separate gradle module for Android build.gradle(:app) and for multiplatform build.gradle (:shared) with mentioned configuration #3499 (comment)

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = extensions.getByType(ComposeExtension::class.java)
            .dependencies.compiler.auto.substringAfterLast(":")
    }

    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }

    dependencies {
        debugImplementation(compose.uiTooling)
    }
}

What are the versions of the plug-ins you are using for this?

I tried to apply your suggestion to my project : https://github.com/realityexpander/FredsRoadtripStoryteller.git

[virtanAnton]

To solve ambiguous behaviour in gradle plugin and make Layout Inspector work, you may define separate gradle module for Android build.gradle(:app) and for multiplatform build.gradle (:shared) with mentioned configuration #3499 (comment)

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = extensions.getByType(ComposeExtension::class.java)
            .dependencies.compiler.auto.substringAfterLast(":")
    }

    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }

    dependencies {
        debugImplementation(compose.uiTooling)
    }
}

What are the versions of the plug-ins you are using for this?

I tried to apply your suggestion to my project : https://github.com/realityexpander/FredsRoadtripStoryteller.git

Check resources demo project here: https://github.com/virtanAnton/compose-multiplatform/tree/local-dev To open: open ./components/build.gradle.kts It's use compose.version=1.6.0-dev1378

[hafiz013]

Why my ticket request feature link to this ticket which actually not answering my request which is compose preview not applicable in folder composeApp.

[brucemax]

Why my ticket request feature link to this ticket which actually not answering my request which is compose preview not applicable in folder composeApp.

Totaly agree, I haven't "Code/Splite/Design" buttons for files in composeApp folder at all.

BTW Preview feature is very important, but all their template projects just ignore it, disappointed

[dima-avdeev-jb]

@hafiz013 @brucemax Thanks for the information.

@hafiz013 I will answer in the original Issue

[hafiz013]

I know that preview can do inside android folder but it is wasting time double instead can focus only composeApp folder. Please make it visibile to view. Thanks in advance

[dima-avdeev-jb]

@hafiz013 Thanks for description. Yes, we plan to do so in commonMain - but it is really a huge task.

[gastsail]

@dima-avdeev-jb take your time, you guys are doing an awesome job already porting compose to multiplatform, thanks a lot !

[brucemax]

@dima-avdeev-jb take your time, you guys are doing an awesome job already porting compose to multiplatform, thanks a lot !

Agreed. Compose and KMP is best thing happened with mobile development last 10 years 👍

[andrey2ag]

Following the thread... I would love to see the Preview issue fixed

[brucemax]

Following the thread... I would love to see the Preview issue fixed

Do you use @Preview in commonMain ? But how? I placed implementation (compose.components.uiToolingPreview) in commonMain. Preview annotation is available but design section not appeared. Or does it workable only for Fleet?

[dev-lcc]

https://youtrack.jetbrains.com/issue/KTIJ-19150/Android-app-from-mpp-wizard-with-com.android.application-plugin-fails-to-run

Linking it here to let others see the solution.