Customizing ProgressBar to Android

Periodically, there is a need to replace the standard circular ProgressBar with any of your own.

Usually, the visual perception of people is more acute, so just give an example of several options ProgressBar



On Habré some of the preloader generation resources were discussed, you can use them to create an image that later falls into the ProgressBar.
')
To customize ProgressBar'a need to perform several quite trivial steps:

1. Create Android project
2. Add a file containing loader to the project (for example, res / drawable / loader1.png)
3. Create an animation file (for example, res / drawable / loader1_progress.xml)

1. <? xml version = "1.0" encoding = "utf-8" ? >
2. < animated-rotate xmlns: android = " schemas.android.com/apk/res/android "
3. android: drawable = "@ drawable / loader1"
4. android: pivotX = "50%"
5. android: pivotY = "50%" />

4. Place ProgressBar in Activiti and say to use our animation resource created in the previous step (for example res / layouts /)

1. <? xml version = "1.0" encoding = "utf-8" ? >
2. < LinearLayout xmlns: android = " schemas.android.com/apk/res/android "
3. android: layout_width = "fill_parent"
4. android: layout_height = "fill_parent"
5. android: orientation = "vertical" >
6. < ProgressBar
7. android: indeterminateDrawable = "@ drawable / loader1_progress"
8. android: layout_height = "50dp"
9. android: layout_width = "50dp" >
10. </ ProgressBar >
11. </ LinearLayout >

In addition to using ready-made images of loaders, you can also use the android functionality to create a loader manually (for example, /res/drawable/custom_progress.xml)
Consider the example of the figure of the ring. The colors are in the #aarrggbb format, where aa indicates the alpha value (transparency).

1. <? xml version = "1.0" encoding = "utf-8" ? >
2. < animated-rotate xmlns: android = " schemas.android.com/apk/res/android "
3. android: pivotX = "50%"
4. android: pivotY = "50%" >
5. < shape android: shape = "ring"
6. android: innerRadiusRatio = "5"
7. android: thicknessRatio = "6"
8. android: useLevel = "false" >
9. < gradient
10. android: type = "sweep"
11. android: useLevel = "false"
12. android: centerY = "0.10"
13. android: startColor = "# 0020ffcc"
14. android: centerColor = "# 8820ffcc"
15. android: endColor = "# ff20ffcc" />
17. < size android: width = "18dip"
18. android: height = "18dip" />
19. </ shape >
20. </ animated-rotate >

If we have several images of the same ProgressBar

then you can use the following method (for example /res/drawable/custom_progress_blue.xml):

1. <? xml version = "1.0" encoding = "utf-8" ? >
2. < animation-list android: oneshot = "false"
3. xmlns: android = " schemas.android.com/apk/res/android " >
4. < item android: duration = "100" >
5. < scale android: drawable = "@ drawable / blue_1" android: scaleGravity = "center" />
6. </ item >
7. < item android: duration = "100" >
8. < scale android: drawable = "@ drawable / blue_2" android: scaleGravity = "center" />
9. </ item >
10. < item android: duration = "100" >
11. < scale android: drawable = "@ drawable / blue_3" android: scaleGravity = "center" />
12. </ item >
13. < item android: duration = "100" >
14. < scale android: drawable = "@ drawable / blue_4" android: scaleGravity = "center" />
15. </ item >
16. < item android: duration = "100" >
17. < scale android: drawable = "@ drawable / blue_5" android: scaleGravity = "center" />
18. </ item >
19. < item android: duration = "100" >
20. < scale android: drawable = "@ drawable / blue_6" android: scaleGravity = "center" />
21. </ item >
22. < item android: duration = "100" >
23. < scale android: drawable = "@ drawable / blue_7" android: scaleGravity = "center" />
24. </ item >
25. < item android: duration = "100" >
26. < scale android: drawable = "@ drawable / blue_8" android: scaleGravity = "center" />
27. </ item >
28. < item android: duration = "100" >
29. < scale android: drawable = "@ drawable / blue_9" android: scaleGravity = "center" />
30. </ item >
31. < item android: duration = "100" >
32. < scale android: drawable = "@ drawable / blue_10" android: scaleGravity = "center" />
33. </ item >
34. < item android: duration = "100" >
35. < scale android: drawable = "@ drawable / blue_11" android: scaleGravity = "center" />
36. </ item >
37. < item android: duration = "100" >
38. < scale android: drawable = "@ drawable / blue_12" android: scaleGravity = "center" />
39. </ item >
40. </ animation-list >

Sample code is available on github .
If you have any suggestions how else you can realize your plans, feel free to write.