how to change center of canvas.drawArc android in a custom view

Question

I got code for creating a custom view to show gauge in android.

public class CustomGauge extends View {

private static final int DEFAULT_LONG_POINTER_SIZE = 1;

private Paint mPaint;
private float mStrokeWidth;
private int mStrokeColor;
private RectF mRect;
private String mStrokeCap;
private int mStartAngel;
private int mSweepAngel;
private int mStartValue;
private int mEndValue;
private int mValue;
private double mPointAngel;
private float mRectLeft;
private float mRectTop;
private float mRectRight;
private float mRectBottom;
private int mPoint;
private int mPointColor;
private float mPointSize;
private int mPointStartColor;
private int mPointEndColor;

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

public CustomGauge(Context context, AttributeSet attrs) {
    super(context, attrs);
    Log.v("SSS", "in CustomGauge");
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomGauge, 0, 0);

    // stroke style
    mStrokeWidth = a.getDimension(R.styleable.CustomGauge_strokeWidth, 10);
    mStrokeColor = a.getColor(R.styleable.CustomGauge_strokeColor, android.R.color.darker_gray);
    mStrokeCap = a.getString(R.styleable.CustomGauge_strokeCap);

    // angel start and sweep (opposite direction 0, 270, 180, 90)
    mStartAngel = a.getInt(R.styleable.CustomGauge_startAngel, 0);
    mSweepAngel = a.getInt(R.styleable.CustomGauge_sweepAngel, 360);

    // scale (from mStartValue to mEndValue)
    mStartValue = a.getInt(R.styleable.CustomGauge_startValue, 0);
    mEndValue = a.getInt(R.styleable.CustomGauge_endValue, 1000);

    // pointer size and color
    mPointSize = 0.3f;// a.getColor(R.styleable.CustomGauge_pointSize, 0);
    mPointStartColor = a.getColor(R.styleable.CustomGauge_pointStartColor, android.R.color.white);
    mPointEndColor = a.getColor(R.styleable.CustomGauge_pointEndColor, android.R.color.white);

    // calculating one point sweep
    mPointAngel = ((double) Math.abs(mSweepAngel) / (mEndValue - mStartValue));
    a.recycle();
    init();
}

private void init() {
    Log.v("SSS", "in init");
    // main Paint
    mPaint = new Paint();
    mPaint.setColor(mStrokeColor);
    mPaint.setStrokeWidth(mStrokeWidth);
    mPaint.setAntiAlias(true);
    if (!TextUtils.isEmpty(mStrokeCap)) {
        if (mStrokeCap.equals("BUTT"))
            mPaint.setStrokeCap(Paint.Cap.BUTT);
        else if (mStrokeCap.equals("ROUND"))
            mPaint.setStrokeCap(Paint.Cap.ROUND);
    } else
        mPaint.setStrokeCap(Paint.Cap.BUTT);
    mPaint.setStyle(Paint.Style.STROKE);
    mRect = new RectF();

    mValue = mStartValue;
    mPoint = mStartAngel;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.v("SSS", "in CustomGauge");
    float paddingLeft = getPaddingLeft();
    float paddingRight = getPaddingRight();
    float paddingTop = getPaddingTop();
    float paddingBottom = getPaddingBottom();
    float width = getWidth() - (paddingLeft + paddingRight);
    float height = getHeight() - (paddingTop + paddingBottom);
    float radius = (width > height ? width / 2 : height / 2) * 3/8;

    mRectLeft = width / 2 - radius + paddingLeft;
    mRectTop = height / 2 - radius + paddingTop;
    // mRectRight = width / 2 - radius + paddingLeft + width;
    mRectRight = width / 2 - radius + paddingLeft + width;
    mRectBottom = height / 2 - radius + paddingTop + height;
    // Log.v("SSS", "mRectLeft:" + mRectLeft + "    mRectTop:" + mRectTop +
    // "    mRectRight:" + mRectRight + "   mRectBottom:" + mRectBottom);

    mRect.set(mRectLeft, mRectTop, mRectRight, mRectBottom);

    mPaint.setColor(mStrokeColor);
    mPaint.setShader(null);
    // canvas.drawArc(mRect, mStartAngel, mSweepAngel, false, mPaint);//
    // this draws the background arc
    mPaint.setColor(getResources().getColor(R.color.Black));
    mPaint.setShader(new LinearGradient(0, 0, 0, getHeight(), mPointEndColor, mPointStartColor, android.graphics.Shader.TileMode.MIRROR));
    canvas.drawArc(mRect, mPoint - mPointSize / 2, mPointSize, true, mPaint);
    Log.v("SSS" , "mPoint:" + mPoint + ".........mPointSize:" + mPointSize);

    Paint paint = new Paint();
    paint.setColor(getResources().getColor(R.color.Black));
    paint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(width / 2, height / 2, 15, paint);
}

public void setValue(int value) {
    mValue = value;
    mPoint = (int) (mStartAngel + (mValue - mStartValue) * mPointAngel);
    invalidate();
}

public int getValue() {
    return mValue;
}

}

And layout code is,

 <pl.pawelkleczkowski.customgauge.example.CustomGauge
    android:background="@drawable/cluster"
    android:id="@+id/gauge1"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_below="@+id/button"
    gauge:pointStartColor="@color/Red"
    gauge:pointEndColor="@color/Red"
    gauge:pointSize="1"
    gauge:startAngel="180"
    gauge:strokeCap="ROUND"
    gauge:strokeColor="@color/Gray"
    gauge:strokeWidth="10dp"
    gauge:startValue="0"
    gauge:endValue="1000"
    gauge:sweepAngel="180" />

In activity I used that like

gauge1 = (CustomGauge) findViewById(R.id.gauge1);
for (i = 0; i < 100; i++) {
                        try {
                            runOnUiThread(new Runnable() {
                                @Override
                                public void run() {
                                    gauge1.setValue(i * 10);
                                    }
                            });
                            Thread.sleep(10);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }

Using this I'm successfully showing a gauge.

But issue is, in onDraw method of Custeom view, the canvas is drawing the arc using canvas.drawArc with it's center at center position of that custom view in layout.

But I want to change the center of canvas.drawArc so that, the arc drawn in my custom view will have center at bottom of that entire custom view.

So how to change the center around which the arc will be drawn in above case.

Answer 1

I just found an upvote to the question, so putting the answer(work around) that I found out

canvas.scale(1, 2.0f);

This moved canvas drawing position from center of image to bottom of image.(Only y axis shifted).