@Override protected void onDraw(Canvas canvas){
  super.onDraw(canvas);
  if (mBitmapShader == null)   return;
  canvas.drawCircle(mCenterX,mCenterY,mCoverRadius,mCoverPaint);
  canvas.drawCircle(mCenterX,mCenterY,mCoverRadius,mCoverFrontPaint);
  mDurationText=secondsToTime(mDurationSecondsCurrent);
  mDurationPaint.getTextBounds(mDurationText,0,mDurationText.length(),mRectDuration);
  canvas.drawText(mDurationText,(mCenterX - (mRectDuration.width() / 2.0f)),(mCenterY + (mRectDuration.height() / 2.0f)),mDurationPaint);
  if (mBitmapUnselectedAction1 != null && mBitmapSelectedAction1 != null) {
    canvas.drawBitmap(isAction1Selected ? mBitmapSelectedAction1 : mBitmapUnselectedAction1,(mCenterX - (5 * (mCenterX / 13.0f))),mCenterY + (mCenterY / 3.0f) - (mCenterY / 13.0f),mActionPaint);
  }
  if (mBitmapUnselectedAction2 != null && mBitmapSelectedAction2 != null) {
    canvas.drawBitmap(isAction2Selected ? mBitmapSelectedAction2 : mBitmapUnselectedAction2,mCenterX - (mCenterX / 13.0f),mCenterY + (mCenterY / 3.0f) - (mCenterY / 13.0f),mActionPaint);
  }
  if (mBitmapUnselectedAction3 != null && mBitmapSelectedAction3 != null) {
    canvas.drawBitmap(isAction3Selected ? mBitmapSelectedAction3 : mBitmapUnselectedAction3,(int)(mCenterX + (3 * (mCenterX / 13.0f))),mCenterY + (mCenterY / 3.0f) - (mCenterY / 13.0f),mActionPaint);
  }
  canvas.drawArc(mProgressRectF,0,360,false,mPaintEmptyProgress);
  canvas.drawArc(mProgressRectF,270,calculatePastProgress(),false,mPaintLoadedProgress);
  canvas.drawCircle((float)(mCenterX + ((mCenterX - 20.0f) * Math.cos(Math.toRadians(calculatePastProgress() - 90)))),(float)(mCenterY + ((mCenterX - 20.0f) * Math.sin(Math.toRadians(calculatePastProgress() - 90)))),mRadiusToggle,mPaintProgressToggle);
}

@ Override protected void onDraw ( Canvas canvas ) { super . onDraw ( canvas ) ; if ( mBitmapShader == null ) return ; canvas . drawCircle ( mCenterX , mCenterY , mCoverRadius , mCoverPaint ) ; canvas . drawCircle ( mCenterX , mCenterY , mCoverRadius , mCoverFrontPaint ) ; mDurationText = secondsToTime ( mDurationSecondsCurrent ) ; mDurationPaint . getTextBounds ( mDurationText , 0 , mDurationText . length ( ) , mRectDuration ) ; canvas . drawText ( mDurationText , ( mCenterX - ( mRectDuration . width ( ) / 2.0f ) ) , ( mCenterY + ( mRectDuration . height ( ) / 2.0f ) ) , mDurationPaint ) ; if ( mBitmapUnselectedAction1 != null && mBitmapSelectedAction1 != null ) { canvas . drawBitmap ( isAction1Selected ? mBitmapSelectedAction1 : mBitmapUnselectedAction1 , ( mCenterX - ( 5 * ( mCenterX / 13.0f ) ) ) , mCenterY + ( mCenterY / 3.0f ) - ( mCenterY / 13.0f ) , mActionPaint ) ; } if ( mBitmapUnselectedAction2 != null && mBitmapSelectedAction2 != null ) { canvas . drawBitmap ( isAction2Selected ? mBitmapSelectedAction2 : mBitmapUnselectedAction2 , mCenterX - ( mCenterX / 13.0f ) , mCenterY + ( mCenterY / 3.0f ) - ( mCenterY / 13.0f ) , mActionPaint ) ; } if ( mBitmapUnselectedAction3 != null && mBitmapSelectedAction3 != null ) { canvas . drawBitmap ( isAction3Selected ? mBitmapSelectedAction3 : mBitmapUnselectedAction3 , ( int ) ( mCenterX + ( 3 * ( mCenterX / 13.0f ) ) ) , mCenterY + ( mCenterY / 3.0f ) - ( mCenterY / 13.0f ) , mActionPaint ) ; } canvas . drawArc ( mProgressRectF , 0 , 360 , false , mPaintEmptyProgress ) ; canvas . drawArc ( mProgressRectF , 270 , calculatePastProgress ( ) , false , mPaintLoadedProgress ) ; canvas . drawCircle ( ( float ) ( mCenterX + ( ( mCenterX - 20.0f ) * Math . cos ( Math . toRadians ( calculatePastProgress ( ) - 90 ) ) ) ) , ( float ) ( mCenterY + ( ( mCenterX - 20.0f ) * Math . sin ( Math . toRadians ( calculatePastProgress ( ) - 90 ) ) ) ) , mRadiusToggle , mPaintProgressToggle ) ; }
what magic happens . 1 - draw image cover in circle 2 - draw black shadow on it to make seconds and icons more visible 3 - draw duration center of image . 4 - put icon / s on it 5 - draw progress
