How to draw a line of circles in android [closed]

Question

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

Answer 1

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)

Answer 2

You can use Jake Wharton's ViewPagerIndicator to add the titles or simple circles for each tab in your ViewPager.

The supplied sample code on GitHub

You can also use the ViewPager and PageIndicator of Greendroid library

Check out the ViewPagerIndicator Tutorial

Answer 3

you can take image of circle like in the above image and then set image in imageview place horizontally just like in the above image.