Search code examples
androidmaterial-designandroid-progressbarprogress-indicator

Multi Colour progress bar


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


Solution

  • 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;
    }