Hi. I’m trying to implement a collapsing toolbar but my code is so laggy, and it causes recomposition of screen body while scrolling screen.

@Composable
fun Demo() {
    val scroll = rememberScrollState(0)
    Column(modifier = Modifier.fillMaxSize()) {
        CollapsingToolbar(scroll = scroll.value, title = "Screen Title")
        Body(scroll)
    }
}


@Composable
fun Body(scroll: ScrollState) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scroll)
    ) {
        repeat(5) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(Color.Red)
            )
        }
    }
}

@Composable
fun CollapsingToolbar(
    scroll: Int,
    title: String,
    onNavigateUpClicked: () -> Unit = {},
) {
    val collapseRange = with(LocalDensity.current) {
        (150.dp - 56.dp).toPx()
    }
    val collapseFraction = (scroll / collapseRange).coerceIn(0f, 1f)
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .heightIn(min = 56.dp)
            .wrapContentHeight()
            .background(Color.Green),
    ) {
        IconButton(
            onClick = onNavigateUpClicked,
            modifier = Modifier
                .padding(start = 8.dp, top = 8.dp)
                .background(Color.Cyan)
                .align(Alignment.TopStart)

        ) {
            Icon(
                imageVector = Icons.Default.ArrowBack,
                contentDescription = null,
                modifier = Modifier.background(Color.Red)
            )
        }
        Text(
            text = title,
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .padding(start = 24.dp, top = 150.dp * (1 - collapseFraction))
                .align(Alignment.CenterStart)
                .offset(x = 32.dp * collapseFraction)
        )
    }
}

Did the `getValue`/

setValue

import issue ever get resolved? I thought I saw that it was a while ago, but I'm re-exploring Compose and I'm running into issues with it not getting imported.

Is there a way to preserve the drawing buffer/frame in canvas? If i’m using

LaunchedEffect(){…}

along with

withFrameNanos{..}

to update a state (using loop, say for creating a game or animation). Can the previous frame be preserved without recomposition in jetpack compose? Something like

preserveDrawingBuffer

in JS.

Hi here… I’m trying out hybrid of RecyclerView and ComposeViewHolder.. but looks like everytime it binds, it

setContent

, cause to it be slower. The profile looks as the image below. How can it be speed up? FYI, the detail question in. https://stackoverflow.com/questions/69514265/how-to-make-recyclerview-with-composable-viewholder-render-faster

Alert dialogs with lists looks... weird

[ScrollView fillViewport] There were a few discussions about how to replicate ScrollView-s fillViewport=true behaviour. The same can be definitely achieved with a Column having

fillMaxHeight

height, and then applying the

verticalScroll

modifier on it. But if we use an inner Column, then the way it is measured is different than what we got used to using XML layouts. Setting an inner Columns height to

wrapContentHeight

and applying

.weight(1f)

on it only respects the weight modifier, but the

wrapContentHeight

modifier is ignored. This makes the

Column

cut its children. Is there a workaround for this? Sample code in 🧵

Are there any sample projects available where Kotlin Flow, without LiveData, is used with Compose?

Hello, in compose how can we prevent the app from switching to dark mode when system goes to dark mode

Is it possible to specify that a text should use the condensed style, similar to how you might specify its font-weight; or do I need to specify a completely different TextStyle which points to the condensed variant?

Is it possible to specify a LazyList to be the size of its largest child? When using a LazyRow with different item heights, the height is always that of the largest currently visible item - scrolling past a large item will jump the entire UI due to the LazyLists height being reduced.

I think the Modifier system is really clever designed

BadgeBox(badgeContent = { Text(value) }) {
         //whatever
     }

I have a

BadgeBox

like this, but if the value is

0

, I want to badge to be hidden. If I pass null to

badgeContent

, the circle still shows but with nothing in it. How do I hide it completely while still showing the inner content?

Hi. Can you please tell me why padding is not working in this composable:

Surface(
    modifier = Modifier.padding(10.dp)
    shape = AppTheme.shapes.medium,
    color = AppTheme.colors.surface
  ) {
  content()
}

It is only working when i add a box around the content(). is this the correct way to do it???

Surface(
    shape = AppTheme.shapes.medium,
    color = AppTheme.colors.surface
  ) {
  Box(modifier = Modifier.padding(10.dp)) {
    content()
  }
}

Hello, so, I'm curious about architecture. We are now wrapping our UI with something that handles our viewmodel and states and then providing the UI with information rather then passing in the viewmodel. Right? So, starting here how do we handle when there are too many parameters being passed to the UI, like 20? In my mind, when I read trough this case I would leave it as is because it was pretty much explanatory. I also had an option to break it in several smaller UI components but it looked off and ugly (like, let's say, header body and footer) How are you handling your viewmodel and UI when your UI needs to receive too many parameters?

Guys how would you handle mixing callback based and hosted object based approaches? I got some sample code where I've started with object like here: https://github.com/androidx/androidx/blob/androidx-main/compose/docs/compose-api-guidelines.md#hoisted-state-types But I want to use this composable with callback after all. Sample in thread. I've used launched effect to translate changes of property to callback. Do you have any solutions / patterns to handle case like this?

hello everyone, does anyone came across a proper solution to customize ripple effect with rounded corners as it’s container let’s say a Box with background rounded shape corners ?

hi everyone… just a question which I didn’t find any answers in the internet… is there a way to do navigation in Compose without the Jetcpack Compose Navigation component? I would like to learn the “native” way to do navigation in Compose before moving to Navigation component… I didn’t find any articles/questions in StackOverflow or anything else that talks about this

Hello Everyone, Few months earlier when Compose was still alpha and a lot of performance improvements were being made, two things were there I wanted to know about and whats their status • Inlining Composable components was also being talked about , what happened to that ? • Multi-threaded Composition ? 🤔

What’s the proper way to show an one time even? For example a toast from a

SharedFlow

?

Hey guys, I was fiddling around with compose layouts(such as

Row

,

Column

,

LazyVerticalGrid

and the accompanist

FlowRow

) trying to achieve something like CSS `minmax` function for columns. Basically I'd like to lay out a list of elements such that they take all the available space, as in visually they always occupy the whole width of the screen, but are still constrained by a min size and a max size. Is there any way to achieve that using Jetpack Compose?

ViewModelScope is canceling a network request when user pops composition where ViewModel is injected. Is it possible to send a network request inside a Side-effects without interruption upon exiting the composition?

Is there any way to override the default alpha value of ripple across my app?

Any insight about https://issuetracker.google.com/issues/202309451 or a possible workaround?

I have a few doubts 🙂: • Is there any standard for storing colors/dimens/multi-language string resources in Compose? • Is keeping these resources in XML still the standard practice or is it idiomatic to store these resources in Kotlin files in compose? • If we are storing them in Kotlin files, what could be considered a clean way to support multiple themed colors or multiple language strings? • Also, is there any benefit to keeping all dimens in a single place in compose?

Is there some behaviour difference between

BasicTextField

and

TextField

with respect to cursor placement and/or LTR/RTL behaviour? The code below produces a text field where the cursor stays to the left, and thus text comes out “backwards” as you type. A

TextField

with the same parameters works as expected. Thanks!

BasicTextField(
          value = TextFieldValue(text),
          onValueChange = { onValueChange(it.text) },
          textStyle = TextStyle.Default.copy(
            color = Color.White,
            fontSize = fontSize.em,
            fontWeight = FontWeight.Bold,
          ),
          enabled = /* calculated from some state */,
          modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
          keyboardOptions = KeyboardOptions(
            autoCorrect = false,
          ),
        )

How can I make these all the same height? Or maybe a more accurate way to put it. How can I make all items in a row, the height of the largest item in the row, while the row itself wraps the content.

Is it possible to observe changes to a

SnapshotStateList

?

Also, what are the practical differences (if any) between using

SnapshotStateList

and

Flow<List<T>>.collectAsState

?