Monday, May 16, 2011

Android – Styling the ProgressDialog Bar

This is the default gray and yellow progress bar:








I want my progress bar to look like this:










Steps to accomplish this:


1) Create a layer list xml file in your drawable folder to hold the shapes and gradients for each part of the progress bar.


my_progress_bar.xml
1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
3:  <item android:id="@android:id/background">  
4:    <shape>  
5:      <corners android:radius="5dip" />  
6:      <gradient  
7:          android:startColor="#69A0C6"  
8:          android:endColor="#446F8D"  
9:          android:angle="270"/>  
10:    </shape>  
11:  </item>  
12:  <item android:id="@android:id/secondaryProgress">  
13:    <clip>  
14:      <shape>  
15:        <corners android:radius="5dip" />  
16:        <gradient  
17:          android:startColor="#B963BA"  
18:          android:endColor="#A05AA1"  
19:          android:angle="270" />  
20:      </shape>  
21:    </clip>  
22:  </item>  
23:  <item android:id="@android:id/progress">  
24:    <clip>  
25:      <shape>  
26:        <corners  
27:          android:radius="5dip" />  
28:        <gradient  
29:          android:startColor="#911793"  
30:          android:endColor="#5B115C"  
31:          android:angle="270" />  
32:      </shape>  
33:    </clip>  
34:  </item>  
35:  </layer-list>  
In this example the blue color is the background and the purple is the progress.


2) Set the progress drawable in your Java code.

 dialog.setProgressDrawable(c.getResources().getDrawable(R.drawable.my_progress_bar));