ProgressBar Colour

Question

I want to set the Progressbar Colour in My Application as Default progressbar colour is Slight White and My Application also has the White background so it cant be visible properly. So Please give me the Solution for it. Thanks.

Solution 1

@Chirag : I don't think that will be enough is it ? Your code will probably set a gradient at the background but the white spinner will still be here.

What I did to get my custom spinner working was to set a ProgressBar with a background drawable (image or shape). The ProgressBar animation is here called in Java.

<ProgressBar
     android:id="@+id/ProgressBar01" 
     android:layout_width="40px"
     android:layout_height="40px"
     style="?android:attr/progressBarStyle"
     android:indeterminateOnly="false"
     android:background ="@drawable/spinner_blue_76"
     />

splash_spinner.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="359"
    android:duration="1000"
    android:repeatMode="restart"
    android:repeatCount="infinite"
    android:interpolator="@android:anim/linear_interpolator">
</rotate>

LauncherActivity

    ...
    ProgressBar t = (ProgressBar) findViewById(R.id.ProgressBar01);
    t.startAnimation(AnimationUtils.loadAnimation(this,R.anim.splash_spinner));
    ...

spinner_blue_76 (or whatever)

It might not be the proper way either but it works well. (I have now a blue spinner on my grey background)

Solution 2

Please make one xml file name progress.xml and put it in res/xml folder and write the below code in that xml file.

<?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="76dip" android:height="76dip" />
        <gradient android:type="sweep" android:useLevel="false"
            android:startColor="#447a29" 
            android:endColor="#447a29"
            android:angle="0"
             />
    </shape>
</rotate> 

after creating this xml file set your progressbars background as this xml ..

Like

<ProgressBar
  android:id="@+id/ProgressBar01" 
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background = "@xml/progress">

Solution 3

Not the proper answer but still what I did was this: In order to get a black ProgressBar, use one of the inverse styles:

<ProgressBar style="@android:style/Widget.ProgressBar.Inverse"/>
<ProgressBar style="@android:style/Widget.ProgressBar.Large.Inverse"/>
<ProgressBar style="@android:style/Widget.ProgressBar.Small.Inverse"/>

For this you need to have a minimum of Android SDK level 4 (Android 1.6).

Solution 4

For a horizontal style ProgressBar I use:

    import android.widget.ProgressBar;
    import android.graphics.drawable.GradientDrawable;
    import android.graphics.drawable.ClipDrawable;
    import android.view.Gravity;
    import android.graphics.drawable.Drawable;
    import android.graphics.drawable.LayerDrawable;

    public void setColours(ProgressBar progressBar,
                            int bgCol1, int bgCol2, 
                            int fg1Col1, int fg1Col2, int value1,
                            int fg2Col1, int fg2Col2, int value2)
      {
        //If solid colours are required for an element, then set
        //that elements Col1 param s the same as its Col2 param
        //(eg fg1Col1 == fg1Col2).

        //fgGradDirection and/or bgGradDirection could be parameters
        //if you require other gradient directions eg LEFT_RIGHT.

        GradientDrawable.Orientation fgGradDirection
            = GradientDrawable.Orientation.TOP_BOTTOM;
        GradientDrawable.Orientation bgGradDirection
            = GradientDrawable.Orientation.TOP_BOTTOM;

        //Background
        GradientDrawable bgGradDrawable = new GradientDrawable(
                bgGradDirection, new int[]{bgCol1, bgCol2});
        bgGradDrawable.setShape(GradientDrawable.RECTANGLE);
        bgGradDrawable.setCornerRadius(5);
        ClipDrawable bgclip = new ClipDrawable(
                bgGradDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);     
        bgclip.setLevel(10000);

        //SecondaryProgress
        GradientDrawable fg2GradDrawable = new GradientDrawable(
                fgGradDirection, new int[]{fg2Col1, fg2Col2});
        fg2GradDrawable.setShape(GradientDrawable.RECTANGLE);
        fg2GradDrawable.setCornerRadius(5);
        ClipDrawable fg2clip = new ClipDrawable(
                fg2GradDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);        

        //Progress
        GradientDrawable fg1GradDrawable = new GradientDrawable(
                fgGradDirection, new int[]{fg1Col1, fg1Col2});
        fg1GradDrawable.setShape(GradientDrawable.RECTANGLE);
        fg1GradDrawable.setCornerRadius(5);
        ClipDrawable fg1clip = new ClipDrawable(
                fg1GradDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);        

        //Setup LayerDrawable and assign to progressBar
        Drawable[] progressDrawables = {bgclip, fg2clip, fg1clip};
        LayerDrawable progressLayerDrawable = new LayerDrawable(progressDrawables);     
        progressLayerDrawable.setId(0, android.R.id.background);
        progressLayerDrawable.setId(1, android.R.id.secondaryProgress);
        progressLayerDrawable.setId(2, android.R.id.progress);

        //Copy the existing ProgressDrawable bounds to the new one.
        Rect bounds = progressBar.getProgressDrawable().getBounds();
        progressBar.setProgressDrawable(progressLayerDrawable);     
        progressBar.getProgressDrawable().setBounds(bounds);

        // setProgress() ignores a change to the same value, so:
        if (value1 == 0)
            progressBar.setProgress(1);
        else
            progressBar.setProgress(0);
        progressBar.setProgress(value1);

        // setSecondaryProgress() ignores a change to the same value, so:
        if (value2 == 0)
            progressBar.setSecondaryProgress(1);
        else
            progressBar.setSecondaryProgress(0);
        progressBar.setSecondaryProgress(value2);

        //now force a redraw
        progressBar.invalidate();
      }

An example call would be:

      setColours(myProgressBar, 
              0xff303030,   //bgCol1  grey 
              0xff909090,   //bgCol2  lighter grey 
              0xff0000FF,   //fg1Col1 blue 
              0xffFFFFFF,   //fg1Col2 white
              50,           //value1
              0xffFF0000,   //fg2Col1 red 
              0xffFFFFFF,   //fg2Col2 white
              75);          //value2

If you don't need the 'secondary progress' simply set value2 to value1.

View more solutions

Comments

[Chirag]

i like the way you implement it... that is why i m giving vote to your answer.

[pengwang]

i think if custom a progressBarStyle or use @Chirag method,the result more well