Issue
I wanted to have a drawable resource that features a row of circles, with one of them in solid background similiar to this (refer to the row of circles at the bottom). I wanted to show an animation of it going from left to right, and having a drawable resource is the first step of achieving it. How can I do that. thanks
Solution
I use a TextView to which five strings (I have 5 steps) all composed with Unicode characters (\u26cb for the empty circle) and (\u26cf for the filled circle).
Like this (i stored them in my res/values/arrays.xml file):
<!-- Steps -->
<string-array name="steps">
<item>\u25cf \u25cb \u25cb \u25cb \u25cb</item>
<item>\u25cb \u25cf \u25cb \u25cb \u25cb</item>
<item>\u25cb \u25cb \u25cf \u25cb \u25cb</item>
<item>\u25cb \u25cb \u25cb \u25cf \u25cb</item>
<item>\u25cb \u25cb \u25cb \u25cb \u25cf</item>
</string-array>
So, when the array is loaded, I can set the TextView's text easily basing upon the current step.
[EDIT]
As you probably know, Unicode characters ar not only "characters"... you can have some graphic icons (glyphs).
Among these, you find circles (filled and empty).
The first line in the array DRAWS a filled circle followed by 4 empty circles.
The second line DRAWS an empty circle, a filled circle and 3 empty circles, and so on.
To "animate" the row, just pass your TextView the next element in the array. as its text.
[EDIT]
Here's an emulated ldpi device screen showing step 2 of 5 in the process.
This is the second array element.
Bottom part of the screen
[EDIT]
Why did I choose text instead of images?
Because it is:
light (a ttf font is vectorial graphics),
scalable (I don't have to provide several PNGs for different screen resolutions),
easy (read the array once, and set a TextView's text accordingly),
maintainable (should I add or remove some steps, it's just a matter of modifying the string array accordingly)
Answered By - Phantômaxx
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.