https://kotlinlang.org logo
Channels
100daysofcode
100daysofkotlin
100daysofkotlin-2021
advent-of-code
aem
ai
alexa
algeria
algolialibraries
amsterdam
android
android-architecture
android-databinding
android-studio
androidgithubprojects
androidthings
androidx
androidx-xprocessing
anime
anko
announcements
apollo-kotlin
appintro
arabic
argentina
arkenv
arksemdevteam
armenia
arrow
arrow-contributors
arrow-meta
ass
atlanta
atm17
atrium
austin
australia
austria
awesome-kotlin
ballast
bangladesh
barcelona
bayarea
bazel
beepiz-libraries
belgium
benchmarks
berlin
big-data
books
boston
brazil
brikk
budapest
build
build-tools
bulgaria
bydgoszcz
cambodia
canada
carrat
carrat-dev
carrat-feed
chicago
chile
china
chucker
cincinnati-user-group
cli
clikt
cloudfoundry
cn
cobalt
code-coverage
codeforces
codemash-precompiler
codereview
codingame
codingconventions
coimbatore
collaborations
colombia
colorado
communities
competitive-programming
competitivecoding
compiler
compose
compose-android
compose-desktop
compose-hiring
compose-ios
compose-mp
compose-ui-showcase
compose-wear
compose-web
confetti
connect-audit-events
corda
cork
coroutines
couchbase
coursera
croatia
cryptography
cscenter-course-2016
cucumber-bdd
cyprus
czech
dagger
data2viz
databinding
datascience
dckotlin
debugging
decompose
decouple
denmark
deprecated
detekt
detekt-hint
dev-core
dfw
docs-revamped
dokka
domain-driven-design
doodle
dsl
dublin
dutch
eap
eclipse
ecuador
edinburgh
education
effective-kotlin
effectivekotlin
emacs
embedded-kotlin
estatik
event21-community-content
events
exposed
failgood
fb-internal-demo
feed
firebase
flow
fluid-libraries
forkhandles
forum
fosdem
fp-in-kotlin
framework-elide
freenode
french
fritz2
fuchsia
functional
funktionale
gamedev
ge-kotlin
general-advice
georgia
geospatial
german-lang
getting-started
github-workflows-kt
glance
godot-kotlin
google-io
gradle
graphic
graphkool
graphql
graphql-kotlin
graviton-browser
greece
grpc
gsoc
gui
hackathons
hacktoberfest
hamburg
hamkrest
helios
helsinki
hexagon
hibernate
hikari-cp
hire-me
hiring
hiring-french
hongkong
hoplite
http4k
hungary
hyderabad
image-processing
india
indonesia
inkremental
intellij
intellij-plugins
intellij-tricks
internships
introduce-yourself
io
ios
iran
israel
istanbulcoders
italian
jackson-kotlin
jadx
japanese
jasync-sql
java-to-kotlin-refactoring
javadevelopers
javafx
javalin
javascript
jdbi
jhipster-kotlin
jobsworldwide
jpa
jshdq
juul-libraries
jvm-ir-backend-feedback
jxadapter
k2-early-adopters
kaal
kafka
kakao
kalasim
kapt
karachi
karg
karlsruhe
kash_shell
kaskade
kbuild
kdbc
kgen-doc-tools
kgraphql
kinta
klaxon
klock
kloudformation
kmdc
kmm-español
kmongo
knbt
knote
koalaql
koans
kobalt
kobweb
kodein
kodex
kohesive
koin
koin-dev
komapper
kondor-json
kong
kontent
kontributors
korau
korean
korge
korim
korio
korlibs
korte
kotest
kotest-contributors
kotless
kotlick
kotlin-asia
kotlin-beam
kotlin-by-example
kotlin-csv
kotlin-data-storage
kotlin-foundation
kotlin-fuel
kotlin-in-action
kotlin-inject
kotlin-latam
kotlin-logging
kotlin-multiplatform-contest
kotlin-mumbai
kotlin-native
kotlin-pakistan
kotlin-plugin
kotlin-pune
kotlin-roadmap
kotlin-samples
kotlin-sap
kotlin-serbia
kotlin-spark
kotlin-szeged
kotlin-website
kotlinacademy
kotlinbot
kotlinconf
kotlindl
kotlinforbeginners
kotlingforbeginners
kotlinlondon
kotlinmad
kotlinprogrammers
kotlinsu
kotlintest
kotlintest-devs
kotlintlv
kotlinultimatechallenge
kotlinx-datetime
kotlinx-files
kotlinx-html
kotrix
kotson
kovenant
kprompt
kraph
krawler
kroto-plus
ksp
ktcc
ktfmt
ktlint
ktor
ktp
kubed
kug-leads
kug-torino
kvision
kweb
lambdaworld_cadiz
lanark
language-evolution
language-proposals
latvia
leakcanary
leedskotlinusergroup
lets-have-fun
libgdx
libkgd
library-development
lincheck
linkeddata
lithuania
london
losangeles
lottie
love
lychee
macedonia
machinelearningbawas
madrid
malaysia
mathematics
meetkotlin
memes
meta
metro-detroit
mexico
miami
micronaut
minnesota
minutest
mirror
mockk
moko
moldova
monsterpuzzle
montreal
moonbean
morocco
motionlayout
mpapt
mu
multiplatform
mumbai
munich
mvikotlin
mvrx
myndocs-oauth2-server
naming
navigation-architecture-component
nepal
new-mexico
new-zealand
newname
nigeria
nodejs
norway
npm-publish
nyc
oceania
ohio-kotlin-users
oldenburg
oolong
opensource
orbit-mvi
osgi
otpisani
package-search
pakistan
panamá
pattern-matching
pbandk
pdx
peru
philippines
phoenix
pinoy
pocketgitclient
polish
popkorn
portugal
practical-functional-programming
proguard
prozis-android-backup
pyhsikal
python
python-contributors
quasar
random
re
react
reaktive
realm
realworldkotlin
reductor
reduks
redux
redux-kotlin
refactoring-to-kotlin
reflect
refreshversions
reports
result
rethink
revolver
rhein-main
rocksdb
romania
room
rpi-pico
rsocket
russian
russian_feed
russian-kotlinasfirst
rx
rxjava
san-diego
science
scotland
scrcast
scrimage
script
scripting
seattle
serialization
server
sg-user-group
singapore
skia-wasm-interop-temp
skrape-it
slovak
snake
sofl-user-group
southafrica
spacemacs
spain
spanish
speaking
spek
spin
splitties
spotify-mobius
spring
spring-security
squarelibraries
stackoverflow
stacks
stayhungrystayfoolish
stdlib
stlouis
strife-discord-lib
strikt
students
stuttgart
sudan
swagger-gradle-codegen
swarm
sweden
swing
swiss-user-group
switzerland
talking-kotlin
tallinn
tampa
teamcity
tegal
tempe
tensorflow
terminal
test
testing
testtestest
texas
tgbotapi
thailand
tornadofx
touchlab-tools
training
tricity-kotlin-user-group
trójmiasto
truth
tunisia
turkey
turkiye
twitter-feed
uae
udacityindia
uk
ukrainian
uniflow
unkonf
uruguay
utah
uuid
vancouver
vankotlin
vertx
videos
vienna
vietnam
vim
vkug
vuejs
web-mpp
webassembly
webrtc
wimix_sentry
wwdc
zircon
Powered by
Title
d

darkmoon_uk

09/07/2021, 6:12 AM
@xxfast This is a weak area at the moment, the limitations had me frustrated for some time. Here's what you need to do: • First, make sure you are only defining
@Preview
s from your top-level Application modules, for either Android or Desktop. You can try to do it from library projects or submodules, and some stuff might work if you import extra dependencies; but it's unsupported and gets ugly (ref: this thread). • Secondly; import the
compose.preview
and
compose.uitooling
dependencies for Android and Desktop as you would expect to; but for the Android top-level project you must apply a Gradle Dependency Substitution to 'deeply' replace all the JetBrains preview dependencies with the Google ones, for it to work with Android Studio properly. By 'deeply', I mean the replacement will affect all transitive dependencies as well. Just directly depending on the Google one won't work; you'll get duplicate class errors. I will fetch you a code snippet for the dependency substitution...
👍 2
1
x

xxfast

09/07/2021, 6:18 AM
do you mean
compose.preview
?
:yes: 1
d

darkmoon_uk

09/07/2021, 6:25 AM
Where:
Versions.Compose.JetBrainsMultiplatform
= e.g.
1.0.0-alpha4-build331
Versions.Compose.GoogleAndroid
=
1.0.1
☝️ Put that block in the top-level of your Android App module's
build.gradle.kts
to workaround the 'broken' JetBrains Artifact and resolve the Google one instead.
x

xxfast

09/07/2021, 6:27 AM
I see - thanks @darkmoon_uk 🙌 will give that a go
d

darkmoon_uk

09/07/2021, 6:39 AM
The limitation that you can only put
@Preview
in the top-level module is painful in the common-case that you want to build a component library in it's own module... you would want the `@Preview`s to live alongside the components, but this is not directly possible right now 👎 As a compromise; I still define
@Composable
functions intended as previews in the component library module, just without their
@Preview
annotation, then expose them with the
@Preview
from the top level module e.g: Component Library Module (the preview implementation)
@Composable
fun MyButton_Preview() {
    MyButton(...)
}
Top-level Application Module (just proxy the preview, adding annotation)
@Preview
@Composable
fun MyButton() = MyButton_Preview()
You can change the naming to suit but this gives one idea how to work around the limit.
x

xxfast

09/07/2021, 6:42 AM
yeah - i have a
:login
feature module that targets ios, jvm, android, js while
:login:ui
is a sub-module that only targets jvm and android. I wish i can just define my composable previews in the
commonMain
of
:login:ui
and keep the components and their previews together
d

darkmoon_uk

09/07/2021, 6:42 AM
You can play around with split panes in the IDE to make the code and preview visible at the same time... the Code / Split / Design won't be useful now because of the need to keep the Preview in a different module.
I really hope JetBrains and Google can improve Compose/MP in this area soon. This is fundamental workflow stuff and impacts usability a lot.
How did you go @xxfast? I've edited some of the guidance above to be a little clearer, in case it helps.
x

xxfast

09/07/2021, 12:25 PM
didn’t seem to work on my first try - i placed these in a feature submodule
:login:ui
kotlin {
  android {
    compilations.all {
      kotlinOptions {
        jvmTarget = "1.8"
      }
    }

    // Part of workaround to transitively enforce Google Preview/Tooling while JetBrains' is broken
    configurations.all {
      resolutionStrategy {
        dependencySubstitution {
          substitute(module("org.jetbrains.compose.ui:ui-tooling-preview:${Jetbrains.Versions.composeMultiplatform}"))
            .using(module("androidx.compose.ui:ui-tooling:${AndroidX.Versions.compose}"))
          substitute(module("org.jetbrains.compose.ui:ui-tooling-preview:${Jetbrains.Versions.composeMultiplatform}"))
            .using(module("androidx.compose.ui:ui-tooling-preview:${AndroidX.Versions.compose}"))
        }
      }
    }
  }
  ..
}
where
object AndroidX {
  object Versions {
    ...
    const val compose = "1.0.0"
  }
}

object Jetbrains {
  object Versions {
    const val composeMultiplatform = "1.0.0-alpha3"
    const val kotlin = "1.5.21"
    ..
  }
}
i should note that compose Multiplatform plugin i’ve installed is
1.0.0-alpha4-build331
- perhaps the plugin version should also match version of the dependency
:yes: 1
d

darkmoon_uk

09/07/2021, 12:34 PM
As mentioned, the dependency substitution should go in your Application (Top-Level) module, not in a sub-module.
You also cannot use the
@Preview
annotation from your feature submodule.
x

xxfast

09/07/2021, 12:38 PM
ah i see
nice - got the preview window to show up 🙌
d

darkmoon_uk

09/07/2021, 1:19 PM
👌 It's there, but that grey-boxed
ComposeViewAdapter
message is actually the error state expected when the dependency substitution isn't applied.
Assuming your top-level Android Application project is a standard Android Application Module, then place the given substitution block of code, at the top-level of its
build.gradle.kts
... not inside
kotlin {...}
or
android {...}
etc.
x

xxfast

09/07/2021, 1:21 PM
ah my bad - let me give that a try
woohoo 😛arty-parrot:
thanks for helping out @darkmoon_uk 🙌
hopefully JB/Google will work on getting the tooling support over to
commonMain
source sets where these composable are defined
Is there a ticket/issue raised regarding this on compose-jb?
☝️ 1
c

Colton Idle

09/07/2021, 2:50 PM
@Igor Demin is this something every project should be doing? Re: deep dependency substitution
i

Igor Demin

09/07/2021, 3:55 PM
@Igor Demin is this something every project should be doing? Re: deep dependency substitution
Only as a workaround. Either Android Studio doesn't work with the artifacts published by maven coordinates other than
androidx.compose.ui:ui-tooling-preview
Or our
org.jetbrains.compose.ui:ui-tooling-preview-android
is broken. We currently investigate a possibility of not publishing our own android artifacts and reusing the already published
androidx.compose
artifacts. After that this issue will no longer be relevant.
Is there a ticket/issue raised regarding this on compose-jb?
I haven't found any
👍 2
d

darkmoon_uk

09/08/2021, 1:02 AM