https://kotlinlang.org logo
#compose
Title
# compose
s

Simon Stahl

01/27/2022, 7:35 PM
Has support for marquee text been added lately? I know it wasn't supported as of about 6 month ago
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
a

Adam Powell

01/27/2022, 8:03 PM
@Zach Klippenstein (he/him) [MOD] has an implementation of an arbitrary marquee modifier floating around
s

Simon Stahl

01/27/2022, 8:30 PM
I would love to see that 🙂 I assume it did not make its way into the official libs yet?
a

Adam Powell

01/27/2022, 8:32 PM
I don't think it has any dependencies on internals so whether it's in the official libs or not yet shouldn't matter
s

Simon Stahl

01/27/2022, 8:55 PM
awesome. i'll have a look at it. thanks a lot
z

Zach Klippenstein (he/him) [MOD]

01/27/2022, 11:00 PM
It's in my queue to land once I'm done fixing a few critical text field bugs 😅
🙏 1
s

Simon Stahl

01/27/2022, 11:58 PM
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
z

Zach Klippenstein (he/him) [MOD]

01/28/2022, 5:53 AM
You only need that if you need touch input in your marquee content
s

Simon Stahl

01/28/2022, 8:02 PM
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
this is how i use it
Copy code
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
)
is this by design, or did i mess something up when commenting out some of the code?
z

Zach Klippenstein (he/him) [MOD]

01/29/2022, 5:52 AM
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.
s

Simon Stahl

01/30/2022, 9:34 PM
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?
What I am looking for is something that behaves similar to this
TextView
and can be configured in a similar way
Copy code
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
}
z

Zach Klippenstein (he/him) [MOD]

02/01/2022, 3:20 AM
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.
58 Views