Hi, What would be the proper way to delay a lazylist /scroll state restoration? For example with

collectAsLazyPagingItems

the state is collected in a launched effect so even if the flow is cached and available if the collect is started in a composable that is recreated there's at least a frame running with no content and the position is reset to 0. In that case I can collect earlier in a scope that is not removed as the data is cached. But what if I wanted to actually not keep the data, reload it then restore scroll. Is there some official doc / pattern for that ?

Hey guys, I need your help by finding a solution for my layout issue. I have a row or list item (doesn’t care at the moment) with different layouts and different click areas. 1. Click area of the

Text

should be from

parent.start

until

Divider

2. Text and Divider+Icon have to be centered with 5% spacing to start and end 3. Icon has his own click area I will post an example code snippet in the thread. I’m very interested in your ideas how to do this in a “simple” way 😉

I need to achieve sticky header like that (it should add any space between sections);

is it possible to make blur effect like this?:

What's the correct way of rendering html string in compose? Something very similar to

HtmlCompat.fromHtml()

in textView.

How can I get rid of `compose-navigation`'s cross-fade animation? It doesn't work well with 1. hiding bottom bars, 2. per-screen scaffolds. I can use Accompanist, but I don't wanna set the transition to null in each single

composable

path 😣.

Hello I am trying to have a column that will take the whole available height as long as it is between a

MIN_H

and

MAX_H

. If the vertical available space is more than

MAX_H

, the column should leave some empty space at the bottom, and if it is less than

MIN_H

, the content will be scrollable. I thought I could get this quite easily with

Modifier.heightIn()

but it doesn't matter where I put it or what I pass to it I never get the desired result. Example code in the thread.

Is there a

Text

implementation that can take

SpannedString

?

Which library supports GIF files best for compose?

Hello , I’m having hard time trying to implement this (vertical text in a card). I tried with graphicsLayer, rotation and translation but without success...

Hello, What’s the preferred way to implement a custom string resource system in Compose? Problem: We are adding the Lokalise SDK https://docs.lokalise.com/en/articles/1400668-lokalise-android-sdk. And working with strings looks like this:

val resources = new LokaliseResources(context)
val text = resources.getString(R.string.screen_title)

What’s the best way to store and create the

LokaliseResources

object in Compose? We want to use the

LokaliseResources.getString ()

function as a replacement for

androidx.compose.ui.res.stringResource ()

. We now have an implementation like this:

@Composable
fun CustomTheme(
  useDarkTheme: Boolean = false,
  content: @Composable () -> Unit,
) {
  val colors = if (useDarkTheme) DarkColorPalette else LightColorPalette
  val colorPalette = remember { colors }
  colorPalette.update(colors)
  
  MaterialTheme(
    colors = debugColors(),
    typography = MaterialTypography,
  ) {
    CompositionLocalProvider(
      CustomColors provides colorPalette,
      content = content,
    )
  }
}

class Screen : com.bluelinelabs.conductor.Controller {
  private val lokaliseResources: LokaliseResources by lazy { LokaliseResources(activity) }
  private fun getString(@StringRes resId: Int): String {
    return lokaliseResources.getString(resId)
  }

 @Composable
 fun Content() {
    CustomTheme(useDarkTheme = false) {
      Text(value = getString(R.string.screen_title))
    }
  }
}

But the problem is that you cannot get a string resource outside of the

Screen

class in any Compose method. Is it possible to create LokaliseResources in a singleton? Or can this be added to

CustomTheme

somehow?

I’m following this guide to add compose to my existing app.. It says

Make sure you're using Kotlin 1.5.21 in your project.

Will Kotlin version

1.5.31

work?

Would anyone be able to provide some guidance on how to implement an animated expanding/collapsing navigation rail similar to what is shown here (which is from the Navigation drawer section of this page)? The issue that I'm running into is related to how the text in the FAB or list items behaves when the rail is collapsing. As you can see in the animation, the desired effect is to have the text (i.e. "Compose" and "Inbox") fade out as the rail collapses with the result being that only the icons are visible. However, in practice, since the FAB and list items are contained within the rail, the text gets wrapped during the animation as the width of the rail animates to the collapsed size. The only thing I have found to "work" is to set the

wrapContentWidth(unbounded = true)

modifier on the

Text

composable, however, this has the side-effect of never wrapping the text, which I don't necessarily want. I started looking into creating a transition and using

AnimatedContent

but I haven't been having much luck so far.

I have a data class annotated with

@Stable

and would expect that a change to the property would reflect the new state but it doesn't:

@Stable
data class StableState(var isChecked: Boolean)

@Composable
fun StableTest(state: StableState) {
    Checkbox(checked = state.isChecked, onCheckedChange = {
        state.isChecked = it
    })
}

What did I miss?

Hi guys How Can I wrap my text to new line when it's too long to be fully visible in one line?

Hi, how can we get elevation only at the bottom when using a

Card

composable

is there a version of compose build that everything is open? I try to implement something but everything is marked as internal

Is there a snap-helper for snapping to items in lists? (e.g. when the user stops scrolling, the list snaps to the nearest item)

Hi folks, I’m trying to resolve the issue when cards overlap in grid view with

zIndex

, but the problem is that in lazy LazyGrid Implementation

val rows = (scope.totalSize + nColumns - 1) / nColumns
    LazyColumn(
        modifier = modifier,
        state = state,
        contentPadding = contentPadding
    ) {
        items(rows) { rowIndex ->
            Row {
                for (columnIndex in 0 until nColumns) {
                    val itemIndex = rowIndex * nColumns + columnIndex
                    if (itemIndex < scope.totalSize) {
                        Box(
                            modifier = Modifier.weight(1f, fill = true),
                            propagateMinConstraints = true
                        ) {
                            scope.contentFor(itemIndex, this@items).invoke()
                        }
                    } else {
                        Spacer(Modifier.weight(1f, fill = true))
                    }
                }
            }
        }
    }

our composable items are wrapped in a Box, but

zIndex

only works for direct children of the composable node. How would you resolve this issue? Any suggestions are welcome

Just updated to Accompanist 0.19.0, and I have an issue with the reworked HorizontalPager: my items have now a start/end padding to fill the pager width, instead of only keeping the item width. Anyone know how to fix this ?

Is there a way for

LazyRow

items to fill the max available width (and size their children accordingly?)

Hi guys i built a small library to help navigate in compose with well typed functions: https://github.com/xmartlabs/TypedNavigation Any feedback is welcome!!

Can someone provide a code example of how I should unit test my

ViewModel

that defines a

mutableStateOf

property? I found that

Snapshot.withMutableSnapshot

or

snapshotFlow

can be used to achieve this, has anyone used this strategy?

I think there is something wrong with the Navigation docs in the Interoperability section. Navigating from fragment-based screens to Compose screens is fine. You just wrap the Compose UI in a ComposeView and go! But, I don't understand what the docs say when the reverse is to be done; Navigate from a Compose UI to a Fragment. The example snippet is not clear if not wrong.

If Google have the underlying Compose system working with iOS's UiKit, are they considering releasing it so developers can use the underling Compose system with iOS's UI widgets? I'd enjoy using the Compose system even if I do need to use new UI widgets with it.

Is there a way to get the "frosted glass" blur effect in Android 11 and lower in compose? https://medium.com/android-news/the-blurry-frosted-background-is-a-common-pattern-on-ios-where-they-have-simply-controls-to-cbd0c5843e5f

Clicking/dragging doesn't seem to work when I offset a composable within the scope of another composable. It seems the click rectangle for the composable is where the composable would be if it wasn't offset. In other words, the click rectangle doesn't get moved by the offset. Here's a simple example where I want the nested boxes to be moved with the parent when the parent is dragged, but the nested boxes can also be dragged independently too. This works as long as you don't move the red or green boxes outside of the blue one. Am I doing something wrong, or missing something here?

data class MyBox(val index: Int, val color: Color)

@Composable
fun DraggingTest() {
    val boxes = mutableListOf<MyBox>()
    boxes.add(MyBox(0, Color.Blue))
    boxes.add(MyBox(1, Color.Red))
    boxes.add(MyBox(2, Color.Green))

    ConstraintLayout(modifier = Modifier
        .fillMaxSize()
        .background(Brush.verticalGradient(listOf(Color.Black, Color.Transparent)))
    ) {
        if(boxes.isNotEmpty()) {
            DraggableBox(index = boxes[0].index, color = boxes[0].color, boxes.takeLast(boxes.size-1))
        }
    }
}

@Composable
fun DraggableBox(index: Int, color: Color, boxes: List<MyBox>) {
    val initialYOffset = if(index == 0) 0f else 100f
    Box(modifier = Modifier.fillMaxSize())
    {
        val offsetX = remember { mutableStateOf(0f) }
        val offsetY = remember { mutableStateOf(initialYOffset) }
        Box(modifier = Modifier
            .offset { IntOffset(offsetX.value.roundToInt(), offsetY.value.roundToInt()) }
            .size(150.dp).background(color)
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consumeAllChanges()
                    offsetX.value = (offsetX.value + dragAmount.x)
                    offsetY.value = (offsetY.value + dragAmount.y)
                }
            }
        ) {
            Text("Box $index", modifier = Modifier.align(Alignment.BottomCenter)
                .offset(0.dp, 20.dp))

            if(boxes.isNotEmpty()) {
                DraggableBox(index = boxes[0].index, color = boxes[0].color, boxes.takeLast(boxes.size-1))
            }
        }
    }
}

Hi, just check if anyone know, is • using `Column`/`Row` have the same down side as using

LinearLayout

? (i.e. ConstraintLayout is preferred over LinearLayout). Or • in JetpackCompose, there’ll be no performance impact using `Column`/`Row`, and the Compose’s

ConstraintLayout

is just to make placement easier (for some case), but no performance benefit? Thanks!

Hi, I found a issue that occurred using

paddingFromBaseline

in Text. I saw this document and wrote code as below

@Composable
fun TwoTexts(...) {
    Row(modifier.height(IntrinscisSize.Min) {
        // skipped other modifiers
        Text(text = "Hi", modifier = modifier.paddingFromBaseline(top = 26.sp, bottom = 10.sp) 
        Divider(...)
        Text(text = "there", ...)
    }
}
// TextSize = 24.sp
// LineHeight = 36.sp

But ui rendered differently. I think that text measured by

paddingFromBaseline

even if it's smaller than Baseline value Is this the result intended by IntrinsicSize.Min? Please look at pictures below Thanks!

Perhaps it would be a quite basic question there I go: I’m implementing a custom graphic view with 2 possible cases: 1. Infinite width (and fixed height) in such case the width is taken from the number of elements of the graphic and the i just allow horizontal scrolling. 2. Fixed with and height where in this case I need to know the width and height of the component to properly fit the graphic in the canvas rect. Can anyone help me out with the second point? (I’m just starting so there are many things yet that I don’t know exist) Thanks!