Mark progress on the border of Android

Question

I need to mark progress on the edge of my gaze. For instance. Initially, the view will have no border at all, when 50% progress is achieved, only 50% of the view will receive the border. Find the attached image. I have a lot of googling, but no luck. The view I used is a text image.

Edited

The following code shortens the edges of a bitmap. What I did in this code is 1. Bg is set to a black hexagon 2. And I took an empty green boundary hexagon and opened this hollow hexagon so that it looks like the border is accumulating.

public class MyView extends View { private Bitmap mBitmap; private Paint mPaint; private RectF mOval; private float mAngle = 135; private Paint mTextPaint; private Bitmap bgBitmap; public MyView(Context context) { super(context); doInit(); } /** * @param context * @param attrs * @param defStyleAttr */ public MyView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // TODO Auto-generated constructor stub doInit(); } /** * @param context * @param attrs */ public MyView(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub doInit(); } private void doInit() { // use your bitmap insted of R.drawable.ic_launcher mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.hexagon_border); bgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.view_message_small_hexagon); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mOval = new RectF(); mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mTextPaint.setTextSize(48); mTextPaint.setTextAlign(Align.CENTER); mTextPaint.setColor(0xffffaa00); mTextPaint.setTypeface(Typeface.DEFAULT_BOLD); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { Matrix m = new Matrix(); RectF src = new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight()); RectF dst = new RectF(0, 0, w, h); m.setRectToRect(src, dst, ScaleToFit.CENTER); Shader shader = new BitmapShader(mBitmap, TileMode.CLAMP, TileMode.CLAMP); shader.setLocalMatrix(m); mPaint.setShader(shader); m.mapRect(mOval, src); } @Override protected void onDraw(Canvas canvas) { //canvas.drawColor(0xff0000aa); Matrix matrix = new Matrix(); canvas.drawBitmap(bgBitmap, matrix, null); canvas.drawArc(mOval, -90, mAngle, true, mPaint); } @Override public boolean onTouchEvent(MotionEvent event) { float w2 = getWidth() / 2f; float h2 = getHeight() / 2f; mAngle = (float) Math.toDegrees(Math.atan2(event.getY() - h2, event.getX() - w2)); mAngle += 90 + 360; mAngle %= 360; invalidate(); return true; } 

}

Answer 1

try this SO answer :

 public class MyView extends View { private Bitmap mBitmap; private Paint mPaint; private RectF mOval; private float mAngle = 135; private Paint mTextPaint; public MyView(Context context) { super(context); // use your bitmap insted of R.drawable.ic_launcher mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mOval = new RectF(); mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mTextPaint.setTextSize(48); mTextPaint.setTextAlign(Align.CENTER); mTextPaint.setColor(0xffffaa00); mTextPaint.setTypeface(Typeface.DEFAULT_BOLD); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { Matrix m = new Matrix(); RectF src = new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight()); RectF dst = new RectF(0, 0, w, h); m.setRectToRect(src, dst, ScaleToFit.CENTER); Shader shader = new BitmapShader(mBitmap, TileMode.CLAMP, TileMode.CLAMP); shader.setLocalMatrix(m); mPaint.setShader(shader); m.mapRect(mOval, src); } @Override protected void onDraw(Canvas canvas) { canvas.drawColor(0xff0000aa); canvas.drawArc(mOval, -90, mAngle, true, mPaint); canvas.drawText("click me", getWidth() / 2, getHeight() / 2, mTextPaint); } @Override public boolean onTouchEvent(MotionEvent event) { float w2 = getWidth() / 2f; float h2 = getHeight() / 2f; mAngle = (float) Math.toDegrees(Math.atan2(event.getY() - h2, event.getX() - w2)); mAngle += 90 + 360; mAngle %= 360; invalidate(); return true; } } 

Answer 2

check this link and change things according to your requirement. This is a pretty good example to suit your requirements.

Answer 3

Getting a good circular scroller is difficult in itself. ProgressWheel is a good custom View that does this. You should be able to modify the ProgressWheel onDraw () class to make something very similar to what you want.