how could I draw only the parts of the text that are on top of the darker, filled background in whit...

# compose

[Florian]

how could I draw only the parts of the text that are on top of the darker, filled background in white and the rest in black?

[Colton Idle]

Someone had this question before (it was a progress bar filling up from the bottom of the screen and the numbers were in the middle) and it was like months ago... but I can't find it. 😭

[Colton Idle]

Oooh! https://kotlinlang.slack.com/archives/CJLTWPH7S/p1615129496051100?

[Luis]

I would draw the text twice on top of each other, and have a clipshape that clips the top text based on how much progress you have

[Florian]

Thank you @Colton Idle I'll read that

[Florian]

@Luis if that works it's pretty smart

[Anastasia Rozovskaya]

I suppose you can couple usage of AnnotatedString with your progress bar, coloring text depending on the progress made. I didn’t test it, but this sounds like a possible solution

[Florian]

@Anastasia Rozovskaya Thank you. I don't know how good that will work with localized strings tho

[Florian]

@Luis can you point me to the method I have to use to clip the text depending on the progress?

[Luis]

there is a clip() modifier that takes a Shape

[Luis]

You could create a custom Rectable Shape that is based on a percentage, and draws an outline based on that

[Luis]

The RectangleShape source just draws a rectangle outline, but you can create one that outlines based on a percentage of width (or height)

[Florian]

ok, thank you very much!

[Florian]

@Luis you're a genius 🙂

[Luis]

Glad you got it working!