Add Android preview to android-ios compose template #3499

gastsail · 2023-08-15T18:17:55Z

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 · 2023-08-16T10:20:58Z

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 · 2023-08-16T13:17:54Z

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 · 2023-08-16T17:20:46Z

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 · 2023-08-16T19:37:27Z

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 · 2023-08-17T10:51:40Z

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

gastsail · 2023-08-17T14:46:44Z

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

mazunin-v-jb · 2023-08-18T11:15:42Z

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 · 2023-08-18T19:02:59Z

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

gastsail · 2023-08-18T19:03:51Z

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

fzanutto · 2023-08-19T01:15:56Z

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 · 2023-08-20T14:02:20Z

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

gastsail · 2023-08-21T14:14:41Z

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 · 2023-10-03T03:57:47Z

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

dima-avdeev-jb · 2023-10-05T16:53:01Z

Related PR and discussion here: JetBrains/compose-multiplatform-template#18

ariefannur · 2023-11-01T14:51:28Z

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

virtanAnton · 2024-01-22T06:44:23Z

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)
    }
}

realityexpander · 2024-01-22T19:35:31Z

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 · 2024-01-23T11:30:18Z

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 · 2024-01-26T14:18:45Z

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 · 2024-02-12T02:16:14Z

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 · 2024-02-12T22:27:02Z

@hafiz013 @brucemax
Thanks for the information.

@hafiz013 I will answer in the original Issue

hafiz013 · 2024-02-13T05:07:03Z

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 · 2024-02-14T10:46:01Z

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

gastsail · 2024-02-14T17:23:03Z

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

brucemax · 2024-02-15T20:04:50Z

@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 · 2024-03-08T05:56:57Z

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

brucemax · 2024-03-08T21:58:26Z

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 · 2024-03-18T08:25:01Z

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.

gastsail added bug Something isn't working submitted labels Aug 15, 2023

mazunin-v-jb added wait for reply Further information is requested and removed submitted labels Aug 16, 2023

mazunin-v-jb changed the title ~~@Preview does not work on JVM 17 and Kotlin compiler 1.9.0~~ Add Android preview to android-ios compose template Aug 17, 2023

mazunin-v-jb removed the wait for reply Further information is requested label Aug 17, 2023

mazunin-v-jb self-assigned this Aug 17, 2023

gastsail closed this as completed Aug 18, 2023

gastsail reopened this Aug 18, 2023

gastsail mentioned this issue Aug 20, 2023

Compile error in kmp Android target after upgrading to 1.5.0-rc01 #3531

Closed

dima-avdeev-jb mentioned this issue Aug 21, 2023

Android Preview JetBrains/compose-multiplatform-template#18

Open

1 task

gastsail closed this as completed Aug 21, 2023

dima-avdeev-jb unassigned mazunin-v-jb Oct 5, 2023

dima-avdeev-jb added android studio preview reproduced labels Oct 5, 2023

dima-avdeev-jb self-assigned this Oct 5, 2023

dima-avdeev-jb reopened this Oct 5, 2023

This was referenced Jan 23, 2024

Add buildFeatures compose to be able to preview composables #4149

Closed

Preview compose multiplatform #4180

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Android preview to android-ios compose template #3499

Add Android preview to android-ios compose template #3499

gastsail commented Aug 15, 2023 •

edited by dima-avdeev-jb

mazunin-v-jb commented Aug 16, 2023 •

edited

gastsail commented Aug 16, 2023 •

edited

mazunin-v-jb commented Aug 16, 2023

gastsail commented Aug 16, 2023 •

edited

mazunin-v-jb commented Aug 17, 2023

gastsail commented Aug 17, 2023

mazunin-v-jb commented Aug 18, 2023 •

edited

gastsail commented Aug 18, 2023

gastsail commented Aug 18, 2023

fzanutto commented Aug 19, 2023 •

edited

gastsail commented Aug 20, 2023

gastsail commented Aug 21, 2023

realityexpander commented Oct 3, 2023

dima-avdeev-jb commented Oct 5, 2023

ariefannur commented Nov 1, 2023

virtanAnton commented Jan 22, 2024

realityexpander commented Jan 22, 2024

virtanAnton commented Jan 23, 2024

hafiz013 commented Jan 26, 2024

brucemax commented Feb 12, 2024

dima-avdeev-jb commented Feb 12, 2024

hafiz013 commented Feb 13, 2024

dima-avdeev-jb commented Feb 14, 2024

gastsail commented Feb 14, 2024

brucemax commented Feb 15, 2024 •

edited

andrey2ag commented Mar 8, 2024

brucemax commented Mar 8, 2024 •

edited

dev-lcc commented Mar 18, 2024

Add Android preview to android-ios compose template #3499

Add Android preview to android-ios compose template #3499

Comments

gastsail commented Aug 15, 2023 • edited by dima-avdeev-jb

mazunin-v-jb commented Aug 16, 2023 • edited

gastsail commented Aug 16, 2023 • edited

mazunin-v-jb commented Aug 16, 2023

gastsail commented Aug 16, 2023 • edited

mazunin-v-jb commented Aug 17, 2023

gastsail commented Aug 17, 2023

mazunin-v-jb commented Aug 18, 2023 • edited

gastsail commented Aug 18, 2023

gastsail commented Aug 18, 2023

fzanutto commented Aug 19, 2023 • edited

gastsail commented Aug 20, 2023

gastsail commented Aug 21, 2023

realityexpander commented Oct 3, 2023

dima-avdeev-jb commented Oct 5, 2023

ariefannur commented Nov 1, 2023

virtanAnton commented Jan 22, 2024

realityexpander commented Jan 22, 2024

virtanAnton commented Jan 23, 2024

hafiz013 commented Jan 26, 2024

brucemax commented Feb 12, 2024

dima-avdeev-jb commented Feb 12, 2024

hafiz013 commented Feb 13, 2024

dima-avdeev-jb commented Feb 14, 2024

gastsail commented Feb 14, 2024

brucemax commented Feb 15, 2024 • edited

andrey2ag commented Mar 8, 2024

brucemax commented Mar 8, 2024 • edited

dev-lcc commented Mar 18, 2024

gastsail commented Aug 15, 2023 •

edited by dima-avdeev-jb

mazunin-v-jb commented Aug 16, 2023 •

edited

gastsail commented Aug 16, 2023 •

edited

gastsail commented Aug 16, 2023 •

edited

mazunin-v-jb commented Aug 18, 2023 •

edited

fzanutto commented Aug 19, 2023 •

edited

brucemax commented Feb 15, 2024 •

edited

brucemax commented Mar 8, 2024 •

edited