Android rectangle draw timer with animation

Question

I am trying to create a rectangle for drawing animations:

Any kickstart for this problem would be helpful. Using Views, Canvas.

thanks

Answer 1

Well, here's something for you to get started, this is not a complete solution, but from here you can complete your task.

What I'm doing is dynamically updating my mask according to progress. I just drew a line, but in your case you need to draw four lines that will make the masked rectangle in accordance with the progress. Here the code will tell me if this helps:

public class DrawView extends View implements Runnable { Bitmap mProgressBitmap; Bitmap mMaskProgressBitmap; Bitmap mResultBitmap; Canvas mTempCanvas; Canvas mMaskCanvas; Paint mPaint; Paint mWhitePaint; Handler mHandler = new Handler(); float mProgress = 0; static final long FRAME_TIME = 50; public DrawView(Context context, AttributeSet attrs) { super(context, attrs); InputStream resource = getResources().openRawResource(R.drawable.timer); mProgressBitmap = BitmapFactory.decodeStream(resource); mMaskProgressBitmap = Bitmap.createBitmap(mProgressBitmap.getWidth(), mProgressBitmap.getHeight(), Bitmap.Config.ARGB_8888); mMaskCanvas = new Canvas(mMaskProgressBitmap); mMaskCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); mResultBitmap = Bitmap.createBitmap(mProgressBitmap.getWidth(), mProgressBitmap.getHeight(), Bitmap.Config.ARGB_8888); mTempCanvas = new Canvas(mResultBitmap); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); mPaint.setDither(true); mWhitePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mWhitePaint.setColor(Color.WHITE); mWhitePaint.setStrokeWidth(50); mHandler.postDelayed(this, FRAME_TIME); } @Override public void onDraw(Canvas canvas) { mTempCanvas.drawBitmap(mMaskProgressBitmap, 0, 0, null); mTempCanvas.drawBitmap(mProgressBitmap, 0, 0, mPaint); canvas.drawBitmap(mResultBitmap, 0, 0, null); } @Override public void run() { mProgress += 0.01f; mMaskCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR); mMaskCanvas.drawLine(0, 0, (float)mProgressBitmap.getWidth() * mProgress, 0, mWhitePaint); this.invalidate(); mHandler.postDelayed(this, FRAME_TIME); } } 

Answer 2

I think you can achieve something very simple with AnimationDrawable and create frame-by-frame animation. Obviously, the more frames you use, the smoother it becomes.

 <!-- Animation frames are wheel0.png -- wheel5.png files inside the res/drawable/ folder --> <animation-list android:id="@+id/selected" android:oneshot="false"> <item android:drawable="@drawable/wheel0" android:duration="50" /> <item android:drawable="@drawable/wheel1" android:duration="50" /> ... </animation-list> 

Another option is to use ClipDrawable to mask your rectangle and animate the mask. There is a Customize Your Progress Bar tutorial that uses the same logic for your purpose. I hope so.

Check out this sample . It flashes, but it uses the same clipping technique to achieve a smooth effect.

If I'm not mistaken, Android Canvas contains several clip methods to mask your graphics: clipPath , clipRect and clipRegion . But I'm not sure if it can be animated or not. Check them out.