Multi Colour progress bar

Question

I want to create a progress bar (intermediate progress bar) similar to gmail app which change colours.I am able to this by keeping and updating progress_indeterminate_horizontal.xml from sdk/platforms. I don't want to use animation (multi colour images). I want to achieve this using xml (i want use gradient). Any help will be appreciated.

Thanks in advance

Answer 1

Here's my implementation: Draws an animated rainbow gradient. Cool, if I do say so myself. It's not XML-based, but could be made to be, and it does use gradients. Perhaps it will give you some ideas.

Setup:

    pb = (ProgressBar) findViewById(R.id.progressbar_Horizontal);
    GradientDrawable rainbow = new GradientDrawable(Orientation.LEFT_RIGHT,
            new int[] {Color.RED, Color.MAGENTA, Color.BLUE, Color.CYAN, Color.GREEN, Color.YELLOW, Color.RED});

    AnimationDrawable ad = getProgressBarAnimation();
    pb.setBackgroundDrawable(ad);

And animate:

    private AnimationDrawable getProgressBarAnimation(){

    GradientDrawable rainbow1 = new GradientDrawable(Orientation.LEFT_RIGHT,
            new int[] {Color.RED, Color.MAGENTA, Color.BLUE, Color.CYAN, Color.GREEN, Color.YELLOW});

    GradientDrawable rainbow2 = new GradientDrawable(Orientation.LEFT_RIGHT,
            new int[] { Color.YELLOW, Color.RED, Color.MAGENTA, Color.BLUE, Color.CYAN, Color.GREEN});          

    GradientDrawable rainbow3 = new GradientDrawable(Orientation.LEFT_RIGHT,
            new int[] { Color.GREEN, Color.YELLOW, Color.RED, Color.MAGENTA, Color.BLUE, Color.CYAN });

    GradientDrawable rainbow4 = new GradientDrawable(Orientation.LEFT_RIGHT,
            new int[] { Color.CYAN, Color.GREEN, Color.YELLOW, Color.RED, Color.MAGENTA, Color.BLUE });

    GradientDrawable rainbow5 = new GradientDrawable(Orientation.LEFT_RIGHT,
            new int[] { Color.BLUE, Color.CYAN, Color.GREEN, Color.YELLOW, Color.RED, Color.MAGENTA });

    GradientDrawable rainbow6 = new GradientDrawable(Orientation.LEFT_RIGHT,
            new int[] {Color.MAGENTA, Color.BLUE, Color.CYAN, Color.GREEN, Color.YELLOW, Color.RED });


    GradientDrawable[]  gds = new GradientDrawable[] {rainbow1, rainbow2, rainbow3, rainbow4, rainbow5, rainbow6};

    AnimationDrawable animation = new AnimationDrawable();

    for (GradientDrawable gd : gds){
        animation.addFrame(gd, 100);

    }

    animation.setOneShot(false);

    return animation;


}

Kotlin

Setup:

    val ad = getProgressBarAnimation()
    progressBar.background = ad

And animate:

fun getProgressBarAnimation(): AnimationDrawable {

    val rainbow1 = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
            intArrayOf(Color.RED, Color.MAGENTA, Color.BLUE, Color.CYAN, Color.GREEN, Color.YELLOW))

    val rainbow2 = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
            intArrayOf(Color.YELLOW, Color.RED, Color.MAGENTA, Color.BLUE, Color.CYAN, Color.GREEN))

    val rainbow3 = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
            intArrayOf(Color.GREEN, Color.YELLOW, Color.RED, Color.MAGENTA, Color.BLUE, Color.CYAN))

    val rainbow4 = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
            intArrayOf(Color.CYAN, Color.GREEN, Color.YELLOW, Color.RED, Color.MAGENTA, Color.BLUE))

    val rainbow5 = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
            intArrayOf(Color.BLUE, Color.CYAN, Color.GREEN, Color.YELLOW, Color.RED, Color.MAGENTA))

    val rainbow6 = GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
            intArrayOf(Color.MAGENTA, Color.BLUE, Color.CYAN, Color.GREEN, Color.YELLOW, Color.RED))


    val gds = arrayListOf(rainbow1, rainbow2, rainbow3, rainbow4, rainbow5, rainbow6)

    val animation = AnimationDrawable()

    for (gd in gds) {
        animation.addFrame(gd, 100)
    }

    animation.isOneShot = false;

    return animation;
}

Answer 2

This is what you are looking for. Add this library in your project and you'll be able to use it.

Then you'll be able to use it as a normal processbar. Example:

private SmoothProgressBar  mProgressBar;

OnCreate:

mProgressBar = (SmoothProgressBar) findViewById(R.id.progressbar);
mProgressBar.progressiveStart();

OnPause:

mProgressBar.progressiveStop();

Answer 3

If your are using material design library, making the linear progress bar contiguous may be what you want.

• In the layout with this attribute:

  app:indeterminateAnimationType
  

• or programmatically with this method:

  setIndeterminateAnimationType()
  

Refer here for more info.