https://kotlinlang.org logo
Docs
Join the conversationJoin Slack
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
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
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
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
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 Linen
compose
  • y

    Yann Badoual

    10/16/2020, 7:10 PM
    Notable improvement in perf while switching "screens" with a crossfade from alpha04 to alpha05, very nice
    h
    a
    +4
    16 replies · 7 participants
  • g

    Guy Bieber

    10/16/2020, 7:29 PM
    Does compose have integrated haptics for things like sliders and buttons?
    👀 1
    1 reply · 1 participant
  • g

    Guy Bieber

    10/16/2020, 7:41 PM
    I have a colleague who zstacks all their screens and changes what is in front. I typically just switch what is being rendered in a composable with a if or case statement. Is doing stacking a best practice for compose?
    a
    3 replies · 2 participants
  • g

    Guy Bieber

    10/16/2020, 7:41 PM
    Is there a pub /sub state pattern for compose?
    z
    4 replies · 2 participants
  • g

    Guy Bieber

    10/16/2020, 7:43 PM
    Is a composable blur modifier in the works?
    n
    1 reply · 2 participants
  • g

    Guy Bieber

    10/16/2020, 7:53 PM
    Is there a way in compose to detect a phone shake?
    z
    2 replies · 2 participants
  • r

    Ronnie Magatti

    10/16/2020, 10:18 PM
    Hey 👋 I’ve got a weird case with text fields here happening on
    alpha05
    I’ve put up a minimum reproducible example here but the Tl;DR is: text fields either don’t seem to be grabbing focus when they should, or they are but still won’t bring up the keyboard. On the MRE, downgrading
    compose_version
    to
    alpha04
    seems to “fix” the issue. The MRE was created on AS Canary 13 selecting new project -> compose activity.
    a
    r
    6 replies · 3 participants
  • s

    Sergey B

    10/17/2020, 9:09 AM
    Hey 👋 I'm new to compose. I'm trying to implement similar behaviour - https://kstatic.googleusercontent.com/files/7e4ab89fb77bd37859c71e8625ec5d3a0d1ecaedcb888e9e4af37f0132c2938917ca5d6598145e4cc2419f815bd1248a82fbac123c49538bc0d0d8046fcc76cd . Could you give me a direction on how to implement it? Do I need to use swipeable modifier? Or is there something ready to use?
    r
    2 replies · 2 participants
  • n

    Nat Strangerweather

    10/17/2020, 4:29 PM
    Hello, I'm trying to space my radio buttons evenly within a row. When I use fillMaxWidth, the radio buttons move to the right beyond the screen (there are 4), like this. Is there anything I can do to space the buttons evenly within the row? Please see screenshot below.
    n
    2 replies · 2 participants
  • h

    Hitanshu Dhawan

    10/17/2020, 6:16 PM
    Hello, I updated* the compose version from 1.0.0-alpha01 to 1.0.0-alpha05 and my component which was made using ConstraintLayout seems to be broken. More on this thread.
    ☝️ 1
    z
    h
    +1
    10 replies · 4 participants
  • m

    Mihai Hrincescu

    10/17/2020, 9:12 PM
    Hello, is the a way to get a
    @Composable
    to not get cliped by the parent? I already tried using
    Modifier.drawLayer(clip = false)
    but it seems to have no effect.
    a
    5 replies · 2 participants
  • j

    jaqxues

    10/18/2020, 7:40 AM
    Hello, So I have these simple Preference Items that are causing me some trouble. I set the Spacer with a Modifier of weigth(1f) so the Title (or generally content) of the Preference is always on the left side and the Switch always on the right. However, when I try to use a longer text as description, the Switch gets moved and it does not look correct anymore. I tried setting a padding explicitly and other stuff, which did not work as expected.
    Unbenannt
    g
    9 replies · 2 participants
  • a

    Aditya Wasan

    10/18/2020, 8:56 AM
    Hey, I have a
    LazyColumnForIndexed
    where the items change due to a boolean condition. However, if I've scrolled more than the size of the second list and then try to switch to the second list the app crashes with
    java.lang.IllegalStateException: entered drag with non-zero pending scroll: -1638.0
    Just wanted to know if it's a bug or that's how it is intended to work.
    LazyColumnForIndexed(
        items = if (showSaved.value) savedPostsState.value else hottestPostsState.value,
        modifier = Modifier.padding(horizontal = 8.dp)
      ) { index, item ->
    p
    3 replies · 2 participants
  • p

    pavi2410

    10/18/2020, 3:03 PM
    Wonder why this is not working for me 🤔
    a
    1 reply · 2 participants
  • c

    Cash Hsiao

    10/19/2020, 7:49 AM
    Except using ComposeView, is there any way to implement bottom sheet behavior in compose?
    z
    2 replies · 2 participants
  • m

    Maik

    10/19/2020, 8:23 AM
    Hello, I have not updated my application for some time. Now I have switched to the current version of Android Studio Canary and Compose. I noticed that you can't jump into the source code of the Compose framework anymore. Is this on purpose, or am I doing something wrong here?
    // IntelliJ API Decompiler stub source generated from a class file
    // Implementation of methods is not available
    
    package androidx.compose.foundation.layout
    
    @kotlin.PublishedApi internal val DefaultRowMeasureBlocks: androidx.compose.ui.node.LayoutNode.MeasureBlocks /* compiled code */
    
    @androidx.compose.runtime.Composable public inline fun Row(modifier: androidx.compose.ui.Modifier /* = compiled code */, horizontalArrangement: androidx.compose.foundation.layout.Arrangement.Horizontal /* = compiled code */, verticalAlignment: androidx.compose.ui.Alignment.Vertical /* = compiled code */, children: @androidx.compose.runtime.Composable() (androidx.compose.foundation.layout.RowScope.() -> kotlin.Unit)): kotlin.Unit { /* compiled code */ }
    
    @kotlin.PublishedApi @androidx.compose.runtime.Composable internal fun rowMeasureBlocks(horizontalArrangement: androidx.compose.foundation.layout.Arrangement.Horizontal, verticalAlignment: androidx.compose.ui.Alignment.Vertical): androidx.compose.ui.node.LayoutNode.MeasureBlocks { /* compiled code */ }
    I would be glad about some helpful tips.
    g
    a
    +1
    5 replies · 4 participants
  • a

    Antanas A.

    10/19/2020, 9:52 AM
    Hello, Is it currently possible to use/compile Jetpack Compose in Kotlin/JS from 1.4.0 version with experimental IR compiler? I want to replace React with Compose in a front end, by using @Composable functions instead of React Components.
    l
    2 replies · 2 participants
  • s

    Sergey Y.

    10/19/2020, 10:14 AM
    A weird issue happened to me after upgrading Compose to Alpha05. Text does not respect nor fillMaxWidth nor horizontalAlignment or Modifier.align for Column. It is always centered within the parent. Only when the text string is long enough Text spreads all parent width. Compose Alpha04 aligns text to the start of the Column as expected.
    ➕ 2
    p
    a
    +1
    25 replies · 4 participants
  • p

    P.J.

    10/19/2020, 11:15 AM
    Hey! Does anyone know if a NumberPicker implementation for compose has been done yet? cheers
    i
    1 reply · 2 participants
  • d

    Daniele B

    10/19/2020, 1:03 PM
    Is it possible to make a column “stretchable” ? Let’s say I have 5 columns. I would like the 1st column to be attached to the screen left hand side, the 5th column to be attached to the screen right hand side. I would like to give a fixed width to the 1st, 3rd, 4th and 5th columns. But I would like to allow the 2nd column to take the remaining horizontal space. How can I do that in Compose?
    j
    z
    4 replies · 3 participants
  • z

    zoha131

    10/19/2020, 1:21 PM
    Today I am been trying to implement custom checkable button. I want the button to take all the available places. Unfortunately it only works if I wrap CategoryButton inside a Box. Without Box the text Does not get placed in a wrong way. A little help would be appreciated. Here is my code:
    import androidx.compose.animation.animate
    import androidx.compose.foundation.Canvas
    import androidx.compose.foundation.Image
    import androidx.compose.foundation.Text
    import androidx.compose.foundation.clickable
    import androidx.compose.foundation.layout.*
    import androidx.compose.foundation.shape.RoundedCornerShape
    import androidx.compose.material.MaterialTheme
    import androidx.compose.material.Surface
    import androidx.compose.material.icons.Icons
    import androidx.compose.material.icons.filled.Close
    import androidx.compose.runtime.Composable
    import androidx.compose.runtime.mutableStateOf
    import androidx.compose.runtime.remember
    import androidx.compose.ui.Layout
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.draw.clip
    import androidx.compose.ui.geometry.Offset
    import androidx.compose.ui.graphics.Color
    import androidx.compose.ui.graphics.ColorFilter
    import androidx.compose.ui.graphics.drawscope.translate
    import androidx.compose.ui.layout.ContentScale
    import androidx.compose.ui.unit.Constraints
    import androidx.compose.ui.unit.dp
    import androidx.ui.tooling.preview.Preview
    
    @Composable
    fun CategoryButton(modifier: Modifier = Modifier) {
        val (checked, setChecked) = remember { mutableStateOf(false) }
        Surface(
            modifier = modifier
                .clip(RoundedCornerShape(4.dp))
                .clickable {
                    setChecked(!checked)
                },
            shape = RoundedCornerShape(4.dp)
        ) {
            CategoryButtonLayout(isChecked = checked, modifier = modifier)
        }
    }
    
    @Composable
    private fun CategoryButtonLayout(isChecked: Boolean, modifier: Modifier) {
        Layout(
            children = { CategoryButtonContent(isChecked) },
            modifier = modifier,
            measureBlock = { miserables, constraints ->
                val width = constraints.maxWidth
                val height = 48.dp.toIntPx()
    
                val canvasConstraints = Constraints(
                    maxHeight = height,
                    minHeight = height,
                    maxWidth = width,
                    minWidth = width
                )
    
                val iconSize = 24.dp.toIntPx()
                val iconConstraints = Constraints(
                    minHeight = iconSize,
                    maxHeight = iconSize,
                    minWidth = iconSize,
                    maxWidth = iconSize
                )
    
                val canvasPlaceable = miserables[0].measure(canvasConstraints)
                val iconPlaceable = miserables[1].measure(iconConstraints)
                val textPlaceable = miserables[2].measure(constraints)
    
                layout(width, height) {
                    canvasPlaceable.place(0, 0)
                    iconPlaceable.place(8, height / 2 - iconPlaceable.height / 2)
                    textPlaceable.place(iconSize, height / 2 - textPlaceable.height / 2)
                }
            }
        )
    }
    
    @Composable
    private fun CategoryButtonContent(isChecked: Boolean) {
        val textColor = if (isChecked) Color.White else Color.Black
        val textColorAnimated = animate(textColor)
    
        val radius = if (isChecked) 550.dp else 4.dp
        val radiusAnimated = animate(radius)
    
        Canvas(
            modifier = Modifier.fillMaxSize(),
            onDraw = {
    
                val left = size.width / 2
                // To move the center of the circle
                translate(left, 0f) {
                    drawCircle(color = Color.Red, radius = radiusAnimated.toIntPx().toFloat())
                }
    
                drawLine(
                    color = Color.Red,
                    start = Offset(size.width, 0f),
                    end = Offset(size.width - 8.dp.toIntPx().toFloat(), 0f),
                    strokeWidth = size.width
                )
            }
        )
    
        Image(
            asset = Icons.Filled.Close,
            colorFilter = ColorFilter.tint(textColorAnimated),
            contentScale = ContentScale.Fit
        )
    
        Text(
            style = MaterialTheme.typography.button.copy(color = textColorAnimated),
            text = "COVID 19",
            maxLines = 1
        )
    }
    
    @Preview
    @Composable
    fun CategoryButtonPreview() {
        Box(
            Modifier.fillMaxWidth()
        ) {
            CategoryButton()
        }
    }
    
    @Preview
    @Composable
    fun CategoryButtonRowBoxPreview() {
        Row(
            Modifier.fillMaxWidth()
        ) {
            Box(
                Modifier.fillMaxWidth().weight(1f)
            ) {
                CategoryButton()
            }
    
            Box(
                Modifier.fillMaxWidth().weight(1f)
            ) {
                CategoryButton()
            }
        }
    }
    
    @Preview
    @Composable
    fun CategoryButtonRowPreview() {
        Row(
            Modifier.fillMaxWidth()
        ) {
    
            CategoryButton(
                modifier = Modifier.fillMaxWidth().weight(1f)
            )
    
            CategoryButton(
                modifier = Modifier.fillMaxWidth().weight(1f)
            )
        }
    }
    a
    z
    5 replies · 3 participants
  • a

    Afzal Najam

    10/19/2020, 1:52 PM
    Hi, I wrote a two-part blog post about how to use the new navigation-compose library (still pre-alpha). First part is normal use cases, second part is about using it with bottom navigation (and also multiple nav graphs in each tab). Part 1: https://afzaln.com/intro-to-jetpack-compose-navigation/ Part 2: https://afzaln.com/multiple-navigation-graphs-with-jetpack-compose-navigation/
    🙏🏽 5
    👏 7
    🔥 5
    a
    j
    +1
    9 replies · 4 participants
  • d

    Daniele B

    10/19/2020, 2:43 PM
    How can I see where the padding for
    TopAppBar
    are defined? I tried to look for its implementation (by hitting CMD-B), but it’s not available from Android Studio
    j
    z
    2 replies · 3 participants
  • z

    zoha131

    10/19/2020, 3:45 PM
    I am not getting any elevation or shadow for this:
    Surface(
                    elevation = 16.dp
                ) {
                    Text(text = "Hello World", modifier = Modifier.padding(16.dp))
                }
    But if I add
    Modifier.drawLayer(shadowElevation = 16f
    then I get shadow. Now my qs is. shouldn’t elevation give us the shadow/elevation?
    a
    2 replies · 2 participants
  • c

    caelum19

    10/19/2020, 4:13 PM
    Hey, sorry if this has been asked before, but is there plans for some easier way to share Composables? Creating a project just for that Composable and submitting it to jitpack, and then sticking it on your github for anyone lucky enough to stumble upon it isn't ideal. Now that Composables are so reusable and detached, something like a Composable marketplace for easier sharing, discovery, using and updating would be really cool
    v
    z
    +1
    20 replies · 4 participants
  • d

    Daniele B

    10/19/2020, 4:16 PM
    Is there a way to make a word bold or italics within a Text in Jetpack Compose, without having to create different Texts for applying the bold or italics fontStyle?
    n
    h
    +1
    4 replies · 4 participants
  • m

    mattinger

    10/19/2020, 6:53 PM
    I also don’t want the button to go grey so setting enabled = false isn’t my answer i don’t think.
    j
    s
    +2
    35 replies · 5 participants
  • t

    Tash

    10/19/2020, 8:02 PM
    With Compose, is there (or will there be) a departure from using the ViewModel arch component to preserve state during config changes? Having the ViewModel (arch component) is great, but I wonder what’s next. In the very basic form they’re essentially state holders that give us a simple solution for handling config changes, and because of that very feature, they have the propensity to grow into monoliths of presentation/domain transactions.
    i
    s
    +1
    7 replies · 4 participants
  • f

    fabio.carballo

    10/19/2020, 9:22 PM
    hello, is there any way to show the layout bounds using the developer options? if not, what would be the most practical way to achieve the same effect?
    h
    2 replies · 2 participants
  • v

    Vsevolod Ganin

    10/19/2020, 11:07 PM
    Found a strange behavior in
    LazyColumnFor
    . When I use positional
    remember
    inside
    itemContent
    , it remembers everything for that particular index in the list. So when I remove an item in the source list, the (index + 1) item takes its place and inherits the memory of its predecessor. I think that’s because of the usage of
    key(index)
    in
    LazyColumnFor
    implementation. Is this intended?
    z
    4 replies · 2 participants
Powered by Linen
Title
v

Vsevolod Ganin

10/19/2020, 11:07 PM
Found a strange behavior in
LazyColumnFor
. When I use positional
remember
inside
itemContent
, it remembers everything for that particular index in the list. So when I remove an item in the source list, the (index + 1) item takes its place and inherits the memory of its predecessor. I think that’s because of the usage of
key(index)
in
LazyColumnFor
implementation. Is this intended?
A small repro
@Preview
@Composable
fun Repro() {
    val list = remember { mutableStateListOf("a", "b", "c", "d", "e") }
    LazyColumnForIndexed(items = list) { index, item ->
        val randomNumber = remember { Random.nextInt(0..1000) }
        Text(
            text = "$item: $randomNumber",
            modifier = Modifier.clickable(onClick = {
                list.removeAt(index)
            })
        )
    }
}
Using
key(item)
inside
itemContent
makes it behave as I wanted
z

Zach Klippenstein (he/him) [MOD]

10/19/2020, 11:12 PM
Seems like a bug to me too, that behavior is really surprising. I’d just go ahead and file a bug.
👌 1
v

Vsevolod Ganin

10/19/2020, 11:31 PM
https://issuetracker.google.com/171230892
⭐ 2
View count: 5