Hello everyone, has anyone encountered issues with

LazyColumn

and rows of different heights? I have an app where I use

LazyColumn

in multiple places for items with different heights and they all work fine except for one screen. In this one screen, trying to scroll UP resets the position and moves the content further down, eventually the user is stuck at the bottom of the list. I have been narrowing down the problem and it seems to repro only when the content has cells of different heights. I tried looking for a bug report bug I could not find anything. I am in the process of trying to narrow down the issue so I can have a demo of it that I can share. But in the meantime I wanted to know if anyone has seen something like this.

What would be most optimal way to convert hex color to a Compose Color, and to avoid recreation of an object on recomposition? Colors are mainly used inside

LazyColumn

. Only thing I could think of is using

remember

, but I'd still would have to use

remember

inside

LazyColumn

.

How to create a blur effect on specific part of layout? I want to blur the content in the list only behind the bottom bar.

Ive been trying to wrap my head around some lingering performance issues Ive been seeing since adopting compose. It seems to happen whenever the state is updated and recompositions happen in a deeeeep hierarchy of composables. Are there any ways I can optimize it such that only parts of the composables are invoked? Ive followed best practices all throughout, but my state is complex, and the composables rendering it are complex as well, yet as simple as Ive been able to make them! More details in thread 🙏🏽🧵

Hey Guys, i am facing issue while changing language from English to Arabic and vice-versa. the issue is screen is blinking and after changing a language as i am selecting a language from dropdown

I can't seem to be able to set a proper

weight(1f)

on a

RangeSlider

. Am I doing something funny, or is this a bug with the component?

@Preview
@Composable
fun RangeSliderTest() {
    var values by remember { mutableStateOf(0f..1f) }

    Row(
        modifier = Modifier.background(Color.White).fillMaxWidth().padding(16.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        Text("0")
        RangeSlider(
            modifier = Modifier.weight(1f),
            values = values,
            valueRange = 0f..1f,
            onValueChange = { values = it },
        )
        Text("1")
    }
}

Use case: When I open a screen, I want a textField to be focused immediately and have the keyboard show. More in thread 🧵

I'm building a simple todo app. There is a single text field when you open the app and it should have the keyboard ready when the app opens. Is this the right way to do it?

val focusRequester = FocusRequester()

  DisposableEffect(Unit) {
      focusRequester.requestFocus()
      onDispose { }
  }
  
OutlinedTextField(label = {Text("TODO")}, modifier = Modifier.focusRequester(focusRequester),

Or do I not need a sideEffect?

Nice post, and spot on with the distinction between state and events

Hi all, when using

AlertDialog

on

material3

, confirmButton and dismissButton don’t show when getting a scrollable list. But it works on

material2

Hi. I wonder if there is a way to retrieve a semantic object within a test and assert its values.

Does Jetpack Compose offer a way to query the semantic tree? For example, looking for a specific node, maybe marked with a

testTag

.

From the android arch docs... trying to understand something

...
        LaunchedEffect(userMessage) {
            snackbarHostState.showSnackbar(userMessage.message)
            // Once the message is displayed and dismissed, notify the ViewModel.
            viewModel.userMessageShown(userMessage.id)
        }
...

Is showSnackbar a synchrnous call? i.e. userMessageShown() will be called ONLY after showSnackbar is done/dismissed?

Hi guys Is anyone have sample or demo app to support Language Arabic and English, please share git url Thanks

Hi, I’ve updated my project to Kotlin 

1.6.10

, Compose 

1.1.0-rc03

 and accompanist 

0.22.1-rc

 , but I got the exception below, plz let me know how to fix it.

Reading the guide to app architecture, I found this note:

In some apps, you might have seen ViewModel events being exposed to the UI using Kotlin Channels or other reactive streams. These solutions usually require workarounds such as event wrappers in order to guarantee that events are not lost and that they're consumed only once.

I too (sometimes) use a

Channel

to send events from ViewModel to UI as a

Flow

which I collect in

LaunchedEffect

but I never had to use any

workarounds such as event wrappers in order to guarantee that events are not lost and that they're consumed only once

It is automatically taken care of while using channels. What exactly did the author mean here?

Has anyone had issues testing a BasicTextField with a custom text style? It seems to cause issues. After i match the text field and call

performTextInput

I can no longer match any other elements on the tree. If i use a style from MaterialTheme like body2 it’s fine, but anything else, I get this error:

offset(6) should be less than line limit(0)
java.lang.IndexOutOfBoundsException: offset(6) should be less than line limit(0)
	at android.text.TextLine.measure(TextLine.java:353)
	at android.text.Layout.getHorizontal(Layout.java:1213)
	at android.text.Layout.getHorizontal(Layout.java:1190)
	at android.text.Layout.getPrimaryHorizontal(Layout.java:1160)

Code is in thread

neumorphic button with jetpack compose 1.1 Box { Box.blur.light, Box.blur.dark, content } that's it

Hey folks, I’d like to follow up this post I found in search with a question: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1637659659341600 This is most related to the issue I’m having where I can’t see previews of compose objects in XML (see attached image). We’re integrated compose into our databinding layouts and we aren’t able to get any previews. Given how

<androidx.compose.ui.platform.ComposeView

works, and points to something like:

binding.payButtonLayout.composeButton.apply {
    setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnDetachedFromWindow)
    setContent {
        MaterialTheme {
            Button(onClick = {}) {
                Text("My button")
            }
        }
    }
}

I’ve tried using the

tools:composableName="androidx.compose.material.ButtonKt"

,

<androidx.compose.ui.tooling.ComposeViewAdapter

and even making my own view by inheriting from

AbstractComposeView

but still no preview. Would I be correct in saying that this just isn’t possible to do? Thanks in advance!

Hello ✋, I wanted to get your opinion on this small piece of code. I have a

LandingViewModel

exposing a

LandingViewState

data class LandingViewState(
    val firstPlayerName: String = "",
    val secondPlayerName: String = "",
    val canPlay: Boolean = false,
)

I would like the last attribute to be derived from name arguments while only exposing the

viewState

– you can see that as a reducer. I haven't been able to find a better pattern than this

@HiltViewModel
class LandingViewModel @Inject constructor() : ViewModel() {

    val viewState: LandingViewState by derivedStateOf {
        LandingViewState(
            firstPlayerName, secondPlayerName, firstPlayerName.isNotEmpty() && secondPlayerName.isNotEmpty()
        )
    }
    var firstPlayerName: String by mutableStateOf("")
    var secondPlayerName: String by mutableStateOf("")

}

So I've made the

viewState

as a derived state and exposed the other attributes. Ideally, I'd only expose the

viewState

as a state and transform the

canPlay

on the fly as I'd have done with a reducer. But I can't figure out how to do it with compose

mutableStateOf

Is it possible to set in a

MaterialTheme

a separate

typography

for a

TextButton

? Currently there is only

typography.button

. But in our design the regular

Button

uses a different text color than a

TextButton

.

This seems like a basic question, but I’m not finding an answer by searching or googling. My starter compose project did not include the compose-compiler dependency and I don’t see it in my dependency tree either. The description of this on developer.android.com says “Transform @Composable functions and enable optimizations with a Kotlin compiler plugin.” What are the main features that dependency adds?

I want to create a modifier that will offset the content in the x axis by a specific amount, and then draw a background filling that space. What is the best way of accomplish that ?

I’m trying to update Compose to the latest versions, but I’m getting

Backend Internal error: Exception during IR lowering

Caused by: java.lang.IllegalStateException: couldn't find inline method Landroidx/compose/runtime/EffectsKt;.rememberCoroutineScope$default

How can I go about fixing this issue? I can’t find a solution from searching here.

I’m wondering if I’m doing something wrong when collecting

StateFlow

from Compose, the issue is that the state always “restarts” from initial state when switching between screens on bottom nav. This is an issue when the VM has something different than the initial state, as for some reason the Compose local state always restarts from intial state, before getting the updated state from the VM. On the VM side my flow looks as follows:

public val viewState: StateFlow<ScreenState> = _internalState.stateIn(
        clientScope,
        SharingStarted.WhileSubscribed(),
        ScreenState(showLoading = true)
    )

And on my Compose screen collection looks like so:

fun Screen(
    viewModel: ViewModel = getViewModel(),
) {
    val lifecycleOwner = LocalLifecycleOwner.current

    val viewStateFlow = remember(viewModel.viewState, lifecycleOwner) {
        viewModel.viewState.flowWithLifecycle(lifecycleOwner.lifecycle, Lifecycle.State.STARTED)
    }
    val viewState by viewStateFlow.collectAsState(ViewModel.ScreenState(showLoading = true))

    Logger.i { "VM state ${viewModel.viewState.value}" } // 1
    Logger.i { " Screen local state is ${viewState}" } // 2

can anyone advise why my LaunchedEffect code block keeps triggering when coming back to my Composable, despite the key not changing? so my screen is composed, user navigates deeper, then comes back to that first screen using

navigateUp()

.. at this point the LaunchedEffect block is triggered again. am I misunderstanding it? code in thread ➡️

I’m struggling with accessibility behavior for buttons in my app. None of my Compose buttons are reading “Button” with the text in TalkBack. I can’t reproduce this in a different app, it seems to just be my app (currently on 1.0.5). A few interesting things I’ve discovered trying to track this down: • When printing the node tree from TalkBack, the buttons show up as

Button:invisible

, which I strongly suspect is the core reason this isn’t working. Digging into TalkBack source, this should only happen when

AccessibilityNodeInfo.isVisibleToUser

is false. • I set some breakpoints in

AndroidComposeViewAccessibilityDelegateCompat

, and as best as I can tell the node info has

isVisibleToUser

correctly set to true, and I do see the correct role showing up here for the buttons What are some things that could cause this? I’ve tried replacing my design systems’ buttons with Material buttons, I’ve tried moving the composables out of Fragments and into the Activity, I’ve tried removing all other content in case something else on the screen was confusing TalkBack, all with no success. I’d love to file a bug, but since I can’t reproduce it outside my application I don’t have much more to provide.

Has anyone tried to implement a ComposeView inside an android.support.v4.view.NestedScrollingParent? How to deal with nested scrollables in this case?

Hi, I’m new into compose. And I’ve been struggling with managing a lot of states for a UI form. Is there any smarter way through which I can create form & manage states smartly.