title: how to change center of canvas.drawArc android in a custom view
body: <p><img src="https://i.stack.imgur.com/yRHIG.png" alt="enter image description here"><img src="https://i.stack.imgur.com/Fgdnd.png" alt="enter image description here">I got code for creating a custom view to show gauge in android.</p>
  
  <pre><code>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 &gt; 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;
  }
  </code></pre>
  
  <p>}</p>
  
  <p>And layout code is,</p>
  
  <pre><code> &lt;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" /&gt;
  </code></pre>
  
  <p>In activity I used that like </p>
  
  <pre><code>gauge1 = (CustomGauge) findViewById(R.id.gauge1);
  for (i = 0; i &lt; 100; i++) {
                          try {
                              runOnUiThread(new Runnable() {
                                  @Override
                                  public void run() {
                                      gauge1.setValue(i * 10);
                                      }
                              });
                              Thread.sleep(10);
                          } catch (InterruptedException e) {
                              e.printStackTrace();
                          }
                      }
  </code></pre>
  
  <p>Using this I'm successfully showing a gauge.</p>
  
  <p>But issue is, in <code>onDraw</code> method of Custeom view, the canvas is drawing the arc using <code>canvas.drawArc</code> with it's center at center position of that custom view in layout.</p>
  
  <p>But I want to change the center of <code>canvas.drawArc</code> so that, the arc drawn in my custom view will have center at bottom of that entire custom view.</p>
  
  <p>So how to change the center around which the arc will be drawn in above case.</p>