Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a prebuilt resource/widget for the "nice" indeterminate progress indicator in Android Wear?

I mean this one:

enter image description here

(doesn't look as nice in the single screenshot, but it's much better than the default indeterminate progress -- in fact its shape and animation is pretty similar to the new "Material" indeterminate progress included in Android L, plus it changes colors).

There are no differences in styles.xml between the 19 and 20 platforms, and while there is a new styles_micro.xml, it doesn't seem to include this.

like image 858
matiash Avatar asked Jul 07 '14 21:07

matiash


1 Answers

Needed the same thing as you. Not sure if you found a solution that is part of android wear. Since I did not find a solution I did build my own. It is not perfect but as long as you do not study it frame by frame it should look correct.

I created it as it's own view. The code is not perfect and if someone like to improve it go ahead.

public class ProgressView extends ProgressBar {
    RectF rectF;
    Paint p;
    int start = 0;
    int maxvalue = 320;
    int value = 320;
    int[] currentColor = {0,0,0};
    boolean reverse = false;
    int nextcolor = 1;

    final int[][] colors = {
        {224,187,63},
        {224,46,25},
        {39,105,227},
        {51,130,49}
    };

    public ProgressView(Context context) {
        super(context);
        init();
    }

    public ProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ProgressView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init(){
        p = new Paint();
        p.setStrokeWidth(6);
        p.setStrokeCap(Paint.Cap.ROUND);
        p.setAntiAlias(true);
        p.setStyle(Paint.Style.STROKE);
        p.setColor(Color.argb(255,colors[0][0], colors[0][1], colors[0][2]));
        currentColor = Arrays.copyOf(colors[0], colors[0].length);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        rectF = new RectF(0+5, 0+5, w-5, h-5);
    }

    @Override
    protected void onDraw(Canvas c){
        if(reverse)
            start += 15;
        else
            start += 5;

        if(start == 360){
            start = 1;
        }
        if(!reverse)
            value -= 10;
        else
            value += 10;
        if(value == 0 || value == maxvalue){
            reverse = !reverse;
        }
        transformColor();
        p.setColor(Color.argb(255,currentColor[0], currentColor[1], currentColor[2]));
        c.drawArc(rectF, start, maxvalue - value, false, p);
        invalidate();
    }

    private void transformColor(){
        changeColors(0);
        changeColors(1);
        changeColors(2);
        if(currentColor[0] == colors[nextcolor][0] && currentColor[1] == colors[nextcolor][1] && currentColor[2] == colors[nextcolor][2]){
            if(nextcolor == 3)
                nextcolor = 0;
            else
                nextcolor++;
        }
    }

    private void changeColors(int i){
        if(currentColor[i] > colors[nextcolor][i]){
            currentColor[i] -= 1;
        }
        if(currentColor[i] < colors[nextcolor][i]){
            currentColor[i] += 1;
        }
    }
}

I hope this can help someone. You could add more properties to it if you like but this is kind of the minimum solution that I found was working.

like image 72
ui-jakob Avatar answered Nov 14 '22 22:11

ui-jakob