Fill the form with text in two different colors.

Question

I tried to achieve this, but I can only achieve to fill an object (form). My requirement is to change the color of the text along with filling out the form.

The form can be filled in as a percentage, up to 10% to 50% = Green
51% to 80% = yellow
81% to 100% = Red

When yellow fills the background " : " in the form, it will change the color to " White ", which was previously " Yellow . The size of this shape is also dynamic.

What have I tried and achieved?

I can fill the figure in percent, but could not change the color when it reaches the edge of the text.

Answer 1

I wrote my own submission. You get this double color effect using the Path APIs. But for compatibility with Android 1+ you must use the Region API and above Kitkat (19+), you can only use the Path API.

Let's look at the concept of how to achieve this effect step by step:

• There are three forms that we need to do - Outline Rounded Stroke + Orange Progress Bar + the text itself
• We draw a stroke like
• But for the Progress panel, we need to remove the text that intersects it, and basically make the transparent intersection of the text transparent. (Difference)
• Also, for the progress panel, we should display only that part of the rectangle that intersects with the outer rounded stroke. (Intersection)
• And similarly, for text, on the left side, we basically chop off the parts that intersect with the progress bar. And we show only the right part of the text in orange. (DIFFERENCES again)

If you use API 19+, this is what the critical code fragment looks like:

croppedProgressPath.op(progressPath, textPath, Path.Op.DIFFERENCE); croppedProgressPath.op(progressStrokePath, Path.Op.INTERSECT); ———————————— croppedTextPath.op(textPath, progressPath, Path.Op.DIFFERENCE); 

The lines are here and here .

Ive wrote a "proof of concept" for this project called Diffre on Github. If you want to check this out first, all the code is in this repo .