Notable improvement in perf while switching "screens" with a crossfade from alpha04 to alpha05, very nice

Does compose have integrated haptics for things like sliders and buttons?

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?

Is there a pub /sub state pattern for compose?

Is a composable blur modifier in the works?

Is there a way in compose to detect a phone shake?

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.

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?

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.

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.

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.

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.

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

Wonder why this is not working for me 🤔

Except using ComposeView, is there any way to implement bottom sheet behavior in compose?

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.

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.

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.

Hey! Does anyone know if a NumberPicker implementation for compose has been done yet? cheers

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?

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

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/

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

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?

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

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?

I also don’t want the button to go grey so setting enabled = false isn’t my answer i don’t think.

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.

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?

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?