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.

[arok]

For me @Preview annotation works in Android Studio in common module but it seems AS does not support compose multiplatform resources so if my composable uses any Res.drawable I get the following error org.jetbrains.compose.resources.MissingResourceException: Missing resource with path: drawable/ic_plus_16.xml

[hafiz013]

@arok if you follow information from kmp they say that have to add res in gradle then import it by using you own id for example import project res.sample.com so when call in main screen res.drawable.ic_plus_16 . However, i have seen bugs if you add new drawable seem like kmp composeApp not trigger. To fix it you have to run unit test first then error import trigger then you have click command + enter ( to import). Then running again unit test, later install package composeApp to device, it ok.