Кастомизация ProgressBar в Android

Периодически возникает потребность заменить стандартный круговой ProgressBar на какой-либо свой.

Обычно визуальное восприятие у людей более обострено, так что сразу приведу пример нескольких вариантов ProgressBar



На хабре обсуждались некоторые ресурсы генерации прелоадеров, можно использовать их для создания изображения, которое в последствии попадет в ProgressBar.

Для кастомизации ProgressBar'a нужно выполнить несколько вполне тривиальных шагов:

1. Создать Android проект
2. Добавить в проект файл, содержащий loader (например res/drawable/loader1.png)
3. Создать файл анимации (например 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. Разместить ProgressBar в Активити и сказать чтобы использовал наш ресурс анимации, созданный на предыдущем шаге (например 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>

Кроме использования готовых изображений лоадеров, можно также использовать функционал android для создания лоадера вручную (например /res/drawable/custom_progress.xml)
Рассмотрим на примере фигуры кольца. Цвета указаны в формате #aarrggbb, где аа указывает значение альфа (прозрачность).

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" />
16.   
17.     <size android:width=«18dip»
18.        android:height=«18dip» />
19.   </shape>
20. </animated-rotate>

Если у нас имеется несколько изображений одного ProgressBar

то можно воспользоваться следующим способом (например /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>

Код примера доступен на github.
Если у Вас есть предложения как еще можно реализовать задуманное, не стесняйтесь, пишите.