Pull to refresh

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

Reading time 4 min
Views 36K
Периодически возникает потребность заменить стандартный круговой 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:androidschemas.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:androidschemas.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:androidschemas.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:androidschemas.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.
Если у Вас есть предложения как еще можно реализовать задуманное, не стесняйтесь, пишите.
Tags:
Hubs:
+20
Comments 27
Comments Comments 27

Articles