Phan Van Linh Phan Van Linh - 7 days ago 6
Android Question

SweepGradient change position of start and end color

I want to create a CircleView with gradient from bottom -> left -> top -> right.

So I using canvas with

SweepGradient
like this

protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();

int[] colors = {Color.GREEN, Color.RED};
float[] positions = {0, 1};

SweepGradient gradient = new SweepGradient(100, 100, colors, positions);
paint.setShader(gradient);
canvas.drawCircle(100, 100, 100, paint);
}


enter image description here

But the default order of this is right -> bottom -> left -> top but I want bottom -> left -> top -> right
I have tried change the positions to

float[] positions = {0.25f, 1.25f};


but it only works in
Preview
of AndroidStudio, when I run in real device, it displays the result as same as
positions = {0, 1}


How can I make
SweepGradient
gradient from
bottom -> left -> top -> right
like this

enter image description here

--- UPDATE ---
If I use
setLocalMatrix
for
SweepGradient
like this

Matrix matrix = new Matrix();
matrix.setRotate(90);
gradient.setLocalMatrix(matrix);


in Preview mode of AndroidStudio it working perfectly, but in my real device it look like

enter image description here

Answer

Rotate the canvas before drawing the circle.

public class CircleView extends View {
    private Paint paint;

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

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

    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public void init() {
        paint = new Paint();

        int[] colors = {Color.GREEN, Color.RED};
        float[] positions = {0, 1};
        SweepGradient gradient = new SweepGradient(100, 100, colors, positions);
        paint.setShader(gradient);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        canvas.rotate(90, 100, 100);
        canvas.drawCircle(100, 100, 100, paint);
        canvas.restore();
    }
}
Comments