Quantcast
Viewing latest article 7
Browse Latest Browse All 18

Custom seek-bar like Circle (pie chart) using bitmap.

Here's something I came up with using clip path. I'm using following images (coder colours) out of which background is a solid one and foreground one contains only blue circle on transparent background. First background image is drawn onto screen, then clip path is set so that progress image, foreground one, is drawn properly on top of it.


privateclassProgressViewextendsView{privateBitmap bgBitmap;privateBitmap fgBitmap;privateRectF fullRect =newRectF();privatePath clipPath =newPath();publicProgressView(Context context){super(context);
        bgBitmap =BitmapFactory.decodeResource(
                                   context.getResources(), R.drawable.bg);
        fgBitmap =BitmapFactory.decodeResource(
                                   context.getResources(), R.drawable.fg);}@Overridepublicvoid onDraw(Canvas c){
        fullRect.right = getWidth();
        fullRect.bottom = getHeight();

        c.drawBitmap(bgBitmap,null, fullRect,null);float angle =SystemClock.uptimeMillis()%3600/10.0f;

        clipPath.reset();
        clipPath.setLastPoint(getWidth()/2, getHeight()/2);
        clipPath.lineTo(getWidth()/2, getHeight());
        clipPath.arcTo(fullRect,-90, angle);
        clipPath.lineTo(getWidth()/2, getHeight()/2);
        c.clipPath(clipPath);

        c.drawBitmap(fgBitmap,null, fullRect,null);

        invalidate();}}
also we can achieved like as seek-bar on touch event of this custom view.
@Override
public boolean onTouchEvent(MotionEvent event) {
int touchX = (int) event.getX();
int touchY = (int) event.getY();

if (outerCircle == null) {
 return true; // ignore all events until the canvas is drawn
}
float x1 = bgBitmap.getWidth(), x2 = bgBitmap.getHeight(), y1 = bgBitmap
    .getWidth(), y2 = bgBitmap.getHeight();
if ((touchX <= x1 && touchX <= x2)
  && (touchY <= y1 && touchY <= y2)) {
int angle = pointToAngle(touchX, touchY);
// model.rotate(Integer.valueOf(""+Math.round((angle / 3.6))));
angle = 360 + angle - startAngle;
int angleX2 = angle * 2;
angleX2 = roundToNearest15(angleX2);
if (angleX2 > 720) {
 angleX2 = angleX2 - 720; // avoid mod because we prefer 720 over
 }
 
 setMinutes(angleX2);
model.rotate(Integer.valueOf("" + Math.round((angleX2 / 7.2))));
 return true;
} else {
 return false;
 }
}


Viewing latest article 7
Browse Latest Browse All 18

Trending Articles