This is my implementation for `Marquee`. Is this c...

# compose

[Mayank Saini]

This is my implementation for Marquee. Is this correct?

@Composable
fun MarqueeText(announcement: String, marqueeSpeed: MarqueeSpeed, modifier: Modifier = Modifier) {
    val scrollState = rememberScrollState()
    val scope = remember { CoroutineScope(SupervisorJob() + Dispatchers.Main.immediate) }
    onDispose { scope.cancel() }
    ScrollableRow(scrollState = scrollState, modifier = modifier, children = {
        Row {
            repeat(1000) {
                Text(
                    text = announcement, maxLines = 1
                )
            }
        }
        val scrollBy = when (marqueeSpeed) {
            MarqueeSpeed.SLOW -> 2f
            MarqueeSpeed.MEDIUM -> 6f
            MarqueeSpeed.FAST -> 9f
        }
        scrollState.smoothScrollBy(scrollBy)
        scope.launch {
            while (true) {
                scrollState.smoothScrollBy(scrollBy)
                delay(50)
            }
        }

    })
}

[Mayank Saini]

@Zach Klippenstein (he/him) [MOD]

[Zach Klippenstein (he/him) [MOD]]

Couple notes:

- Never use remember { CoroutineScope… }, use rememberCoroutineScope() instead.
- In this case, you don’t even need that. Never trigger side effects directly in the composition either, use one of the *Effect functions. In this case, you could use LaunchedTask (which will eventually be renamed to LaunchedEffect).
- There’s a better way to do looping animations, using animated values (see how cursor blinking is implemented).
- I think using ScrollableRow here means you’ll have to fight the system to make it non-interactive - better to just use a row and “scroll” it by using modifiers only.

[Zach Klippenstein (he/him) [MOD]]

One sec

[Zach Klippenstein (he/him) [MOD]]

Actually i’m not sure a row is enough, since you need to measure it as though there’s only a single text. Might need a custom layout.

[Zach Klippenstein (he/him) [MOD]]

You can do it with boxes too. Here’s a version with boxes:

MarqueeBoxes.kt

[Zach Klippenstein (he/him) [MOD]]

And here’s a version with a custom layout.

MarqueeCustomLayout.kt

[Zach Klippenstein (he/him) [MOD]]

i think the custom layout one is actually a bit more concise and more readable

[Zach Klippenstein (he/him) [MOD]]

Here’s the custom layout one with speed and direction control

Untitled

[Mayank Saini]

@Zach Klippenstein (he/him) [MOD] Thats a very neat implementation and works as expected. Thanks Zach

[Zach Klippenstein (he/him) [MOD]]

Actually I think that comment is wrong about overflowing the float, I think you need more logic to ensure that doesn't cause visual jitter but anyway the general idea still works.

[Zach Klippenstein (he/him) [MOD]]

Also you probably want to measure the children with infinite width, since they're going to be scrolling anyway. val childConstraints = constraints.copy(maxWidth = Constraints.Infinity)

[Zach Klippenstein (he/him) [MOD]]

You could also optimize in the case where the child is wider than the current constraints by not drawing the overflow if it's not within the bounds (by not calling place).

If you want to get really fancy, you could use SubcomposeLayout to avoid composing the overflow copy altogether when it's not needed, but unless your scrolling content is very expensive to compose, I don't think it's worth the effort. (Would need to benchmark to show the overhead of subcomposing is less than the overhead of composing twice)

[Mayank Saini]

Is MarqueeText in the pipeline as a ready to use feature?

[Mayank Saini]

@Zach Klippenstein (he/him) [MOD] The solution works but is consuming ridiculous amount of CPU and energy. What can be the possible solution for this?

[Zach Klippenstein (he/him) [MOD]]

Idk, what does the Android Studio profiler say?

[Zach Klippenstein (he/him) [MOD]]

It's only re-positioning the composables on every frame, which I thought was pretty cheap (since the parent size isn't being changed). Might want to try translating the canvas instead though to see if that is any better.