CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composewear-os
bourne86
bourne86

Reputation: 11

Is there a way to create a marquee text in a Wear OS tile?

I am using Jetpack Compose for Wear OS and I am creating a tile that I would like to display some marquee text on - like a news ticker. Is there a way to do this?

I tried creating a function like this:

@ExperimentalFoundationApi
private fun marqueeText(context: Context, text: String): LayoutElementBuilders.LayoutElement =
    LayoutElementBuilders.Column.Builder()
        .setWidth(DimensionBuilders.DpProp.Builder().setValue(100f).build())
        .setModifiers(ModifiersBuilders.Modifiers.Builder()
            .apply { Modifier.basicMarquee(
                iterations = Int.MAX_VALUE,
                animationMode = MarqueeAnimationMode.Immediately,
                delayMillis = 0,
                initialDelayMillis = 0,
                spacing = MarqueeSpacing.fractionOfContainer(0.9f),
                velocity = 0.dp
            ) }
            .build())
        .addContent(Text.Builder(context, text)
            .setTypography(Typography.TYPOGRAPHY_CAPTION2)
            .build()
        )
        .build()

But it does not work. The text is displayed but is does not scroll.

Upvotes: 1

Views: 176

Answers (2)

Neda Topoljanac
Neda Topoljanac

Reputation: 46

you can use .setOverflow on Text and set as TEXT_OVERFLOW_MARQUEE.

And also please note that basicMarquee comes from Compose, and Wear OS Compose and Wear OS Tiles APIs can't be mixed together.

Upvotes: 2

TofferJ
TofferJ

Reputation: 4784

As mentioned in the comment by @dect, the behavior you are looking for is (at least currently) not supported.

Tiles are not a suitable surface for any type of custom animations. They were designed to be updated in minute intervals, most likely to minimize the impact on battery life. You can force a higher refresh rate, but anything below ~5 seconds tend to get unpredictable. Trust me I've tried...

The best (and maybe only?) way to get close to real-time content updates in a Tile is using a dynamic expression.

Combined with content update animations, this gives you a way show fresh data in an aesthetically pleasing way, without wasting precious power.

Unfortunately, I can't think of a way to combine the two to achieve the ticker effect you're looking for. Hopefully the links above can at least inspire you to come up with an alternative acceptable solution.

Upvotes: -2

Related Questions