Custom Drawable for ProgressBar/ProgressDialog
Solution 1
I used the following for creating a custom progress bar.
File res/drawable/progress_bar_states.xml
declares the colors of the different states:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<gradient
android:startColor="#000001"
android:centerColor="#0b131e"
android:centerY="0.75"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:startColor="#234"
android:centerColor="#234"
android:centerY="0.75"
android:endColor="#a24"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#144281"
android:centerColor="#0b1f3c"
android:centerY="0.75"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
And the code inside your layout xml:
<ProgressBar android:id="@+id/progressBar"
android:progressDrawable="@drawable/progress_bar_states"
android:layout_width="fill_parent" android:layout_height="8dip"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminateOnly="false"
android:max="100">
</ProgressBar>
Enjoy!
Solution 2
I was having some trouble using an Indeterminate Progress Dialog with the solution here, after some work and trial and error I got it to work.
First, create the animation you want to use for the Progress Dialog. In my case I used 5 images.
../res/anim/progress_dialog_icon_drawable_animation.xml:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/icon_progress_dialog_drawable_1" android:duration="150" />
<item android:drawable="@drawable/icon_progress_dialog_drawable_2" android:duration="150" />
<item android:drawable="@drawable/icon_progress_dialog_drawable_3" android:duration="150" />
<item android:drawable="@drawable/icon_progress_dialog_drawable_4" android:duration="150" />
<item android:drawable="@drawable/icon_progress_dialog_drawable_5" android:duration="150" />
</animation-list>
Where you want to show a ProgressDialog:
dialog = new ProgressDialog(Context.this);
dialog.setIndeterminate(true);
dialog.setIndeterminateDrawable(getResources().getDrawable(R.anim.progress_dialog_icon_drawable_animation));
dialog.setMessage("Some Text");
dialog.show();
This solution is really simple and worked for me, you could extend ProgressDialog and make it override the drawable internally, however, this was really too complicated for what I needed so I did not do it.
Solution 3
Try setting:
android:indeterminateDrawable="@drawable/progress"
It worked for me. Here is also the code for progress.xml:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
android:toDegrees="360">
<shape android:shape="ring" android:innerRadiusRatio="3"
android:thicknessRatio="8" android:useLevel="false">
<size android:width="48dip" android:height="48dip" />
<gradient android:type="sweep" android:useLevel="false"
android:startColor="#4c737373" android:centerColor="#4c737373"
android:centerY="0.50" android:endColor="#ffffd300" />
</shape>
</rotate>
Solution 4
Your style should look like this:
<style parent="@android:style/Widget.ProgressBar" name="customProgressBar">
<item name="android:indeterminateDrawable">@anim/mp3</item>
</style>
Solution 5
Custom progress with scale!
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:duration="150">
<scale
android:drawable="@drawable/face_no_smile_eyes_off"
android:scaleGravity="center" />
</item>
<item android:duration="150">
<scale
android:drawable="@drawable/face_no_smile_eyes_on"
android:scaleGravity="center" />
</item>
<item android:duration="150">
<scale
android:drawable="@drawable/face_smile_eyes_off"
android:scaleGravity="center" />
</item>
<item android:duration="150">
<scale
android:drawable="@drawable/face_smile_eyes_on"
android:scaleGravity="center" />
</item>
</animation-list>
Comments
-
Sam about 4 years
Reading the limited documentation that Google has provided, I get the feeling that it is possible to change the look (drawable) of a ProgressBar/ProgressDialog by simply creating a new style an assigning it to the style property of the ProgressBar. But I cannot get this to work properly. Here is what I did so far:
I created a shape like this (mp2.xml)
<?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadiusRatio="4" android:thicknessRatio="4" android:useLevel="false"> <size android:width="50dip" android:height="50dip" /> <gradient android:type="sweep" android:useLevel="false" android:startColor="#300000ff" android:centerColor="#500000ff" android:endColor="#ff0000ff" /> </shape>
then created an animation (mp3.xml) like this:
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="30" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="30" android:toDegrees="60" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="60" android:toDegrees="90" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="90" android:toDegrees="120" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="120" android:toDegrees="150" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="150" android:toDegrees="180" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="180" android:toDegrees="210" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="210" android:toDegrees="240" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="240" android:toDegrees="270" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="270" android:toDegrees="300" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="300" android:toDegrees="330" android:repeatCount="1" /> </item> <item android:duration="70"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="330" android:toDegrees="360" android:repeatCount="1" /> </item> </animation-list>
then created a style (attrs.xml) like this:
<?xml version="1.0" encoding="utf-8"?> <resources> <style parent="@android:style/Widget.ProgressBar" name="customProgressBar"> <item name="android:progressDrawable">@anim/mp3</item> </style> </resources>
and the in my main.xml I have set the style like this:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:drawingCacheQuality="high"> <ProgressBar android:id="@+id/ProgressBar01" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/customProgressBar"/> </LinearLayout>
But it still shows the same drawable as before. What am I doing wrong?
-
pengwang over 13 yearsyou modify your android:startColor="#300000ff“ to #FF00ff00,modify a other color
-
Petr Prazak almost 12 yearsThanks for noting "dialog.setIndeterminateDrawable()"
-
Andrew Wyld about 11 years@YuliaRogovaya is it because the drawables aren't in clip elements? I couldn't make it work either; suspect the clip element is the key.
-
Diego almost 11 yearsIs there a way to have just an image in the dialog, so no message, but a drawable in the entire dialog?
-
blindstuff almost 11 years@Diego I haven't tried it, but I don't see why not. Have you tried using a drawable that would take up the space you wanted (i.e. had a long aspect ratio) and not setting any text to the Dialog?
-
Nezam about 10 yearshow to do this for a
ProgressDialog
? -
Jona about 10 years@Nezam I can't give you exact code or samples but this is what you would need to do. Provide a custom theme to the ProgressDialog. The custom theme would define the progressbar style.
-
MinceMan about 10 yearsIf you want to use a drawable then just
android:drawable=
in the rotate tag and then remove the shape. Finally someone who answers the spinning progress bar question. -
Crawler almost 9 yearsIt sets color but progress bar is not rotating
-
QED over 7 yearsIt would be nice to see a screenshot of this thing in action
-
leofontes about 7 years@Jona I know its been awhile, but how could I make this drawable smaller in height??
-
Febin Mathew over 6 yearscan we define the max-width of the progress bar in this drawable?
-
Subhrajyoti Sen over 5 yearsin case it doesn't work for someone, make sure you are including
<clip>
tags. Just leaving it here. -
Taras Lozovyi over 4 yearsTo quickly adjust rotation speed
android:toDegrees
can be set to higher value. Setting it toandroid:toDegrees="1080"
will increase rotation in 3 times.