Has support for marquee text been added lately? I ...

# compose

[Simon Stahl]

Has support for marquee text been added lately? I know it wasn't supported as of about 6 month ago

[Simon Stahl]

this post has a custom implementation for it, but i wanted to check in first to see if it got added in the meantime https://stackoverflow.com/questions/68974245/marquee-text-effect-in-jetpack-compose

[Adam Powell]

@Zach Klippenstein (he/him) [MOD] has an implementation of an arbitrary marquee modifier floating around

[Simon Stahl]

I would love to see that 🙂 I assume it did not make its way into the official libs yet?

[Adam Powell]

I don't think it has any dependencies on internals so whether it's in the official libs or not yet shouldn't matter

[Adam Powell]

https://twitter.com/zachklipp/status/1473412339915374595

[Simon Stahl]

awesome. i'll have a look at it. thanks a lot

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

It's in my queue to land once I'm done fixing a few critical text field bugs 😅

[Simon Stahl]

looking forward to it. I couldn't get it to work copying the files from the PR because Modifier.transformLayoutCoordinates() is unknown. it's ok though, i got another custom implementation that does work until your changes get merged in

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

You only need that if you need touch input in your marquee content

[Simon Stahl]

ah i see. I got it to work after commenting out that code, but am a bit surprised about how the marquee seems to work.
1. I would expect a short pause after every marquee loop when the text reaches its original position
2. The text is marquee-ing even when it fits inside
3. The marquee is backwards unless I specify a negative speed
4. Ideally there would be some fading on the edges, so the text doesn't look so cut off

[Simon Stahl]

this is how i use it

val speed = (-30).dp
val spacing = 50.dp
val marqueeState = rememberScrollingMarqueeState(dpsPerSec = speed)
Text(
    modifier = Modifier
        .fillMaxWidth()
        .marquee(state = marqueeState, spacing = spacing),
    text = it,
    maxLines = 1
)

[Simon Stahl]

is this by design, or did i mess something up when commenting out some of the code?

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

This is all useful feedback for the api! Most of it was intentional - you have full control of the animation, you can add whatever pauses you want. You can also add fades or other effects if desired. A lot of these things might be specific to a particular design system, so it might not make sense to provide all these behaviors automatically in Foundation. I'm actually not sure if Material includes Marquee, if it did it could be built on top of this.

[Simon Stahl]

OK, i've played around with it for a bit, but couldn't quite figure out how to achieve it. Are there any more examples except what is in MarqueeSamples and MarqueeDemo? I wonder if, since marquee text is probably the default case folks are looking for, it would make sense to include a shortcut for this case?

[Simon Stahl]

What I am looking for is something that behaves similar to this TextView and can be configured in a similar way

TextView(context).apply {
    layoutParams = ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT
    )
    text = "The quick brown fox jumped over the lazy dogs."
    isSingleLine = true
    ellipsize = TextUtils.TruncateAt.MARQUEE
    marqueeRepeatLimit = -1
    isHorizontalFadingEdgeEnabled = true
    isSelected = true
    textAlignment = View.TEXT_ALIGNMENT_CENTER
}

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

Yea it probably makes sense to provide something that matches the framework behavior, at the very least as a sample but probably even as code.