Android Canvas Magic

Programmatic backgrounds using Canvas
View masks and rounded images
Extending Drawable class
Discuss about the Android Canvas API
Checkout the code https://github.com/andreiverdes/CanvasMagic

Transcript

1. Android Canvas Magic Andrei Verdeș AndroidIași
2. Ideas on achieving this?
3. Rounded corners
4. Android APIs • Canvas - Supplies the draw methods that paint drawing primitives onto the underlying bitmap • Paint - Also referred to as a “brush,” Paint lets you specify how a primitive is drawn on the bitmap. • Path - A Path object is often used to hold a collection of drawing primitives within a single object. • Bitmap - The surface being drawn on.
5. Android APIs • Canvas - Supplies the draw methods that paint drawing primitives onto the underlying bitmap • Paint - Also referred to as a “brush,” Paint lets you specify how a primitive is drawn on the bitmap. • Path - A Path object is often used to hold a collection of drawing primitives within a single object. • Bitmap - The surface being drawn on.
6. Android APIs • Canvas - Supplies the draw methods that paint drawing primitives onto the underlying bitmap • Paint - Also referred to as a “brush,” Paint lets you specify how a primitive is drawn on the bitmap. • Path - A Path object is often used to hold a collection of drawing primitives within a single object. • Bitmap - The surface being drawn on.
7. Android APIs • Canvas - Supplies the draw methods that paint drawing primitives onto the underlying bitmap • Paint - Also referred to as a “brush,” Paint lets you specify how a primitive is drawn on the bitmap. • Path - A Path object is often used to hold a collection of drawing primitives within a single object. • Bitmap - The surface being drawn on.
8. 1. 9patch mask – DON’T DO IT!
9. Path path = new Path(); int height = getBounds().height(); int width = getBounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); path.addRoundRect(rect, 30f, 30f, Path.Direction.CW); canvas.clipPath(path); canvas.drawBitmap(mBitmap, 0, 0, null); 2. Clip path
10. Path path = new Path() int height = getBounds().height(); int width = getBounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); path.addRoundRect(rect, 30f, 30f, Path.Direction.CW); canvas.clipPath(path); canvas.drawBitmap(mBitmap, 0, 0, null); 2. Clip path
11. Path path = new Path() int height = getBounds().height(); int width = getBounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); path.addRoundRect(rect, 30f, 30f, Path.Direction.CW); canvas.clipPath(path); canvas.drawBitmap(mBitmap, 0, 0, null); 2. Clip path
12. Path path = new Path() int height = getBounds().height(); int width = getBounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); path.addRoundRect(rect, 30f, 30f, Path.Direction.CW); canvas.clipPath(path); canvas.drawBitmap(mBitmap, 0, 0, null); 2. Clip path
13. Path path = new Path() int height = getBounds().height(); int width = getBounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); path.addRoundRect(rect, 30f, 30f, Path.Direction.CW); canvas.clipPath(path); canvas.drawBitmap(mBitmap, 0, 0, null); 2. Clip path
14. 3. RoundRect with AntiAliasing shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); paint = new Paint(); paint.setColor(Color.RED); paint.setAntiAlias(true); paint.setShader(shader); int height = getBounds().height(); int width = getBounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); canvas.drawRoundRect(rect, 30, 30, paint);
15. 3. RoundRect with AntiAliasing shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); paint = new Paint(); paint.setColor(Color.RED); paint.setAntiAlias(true); paint.setShader(shader); int height = getBounds().height(); int width = getBounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); canvas.drawRoundRect(rect, 30, 30, paint);
16. 3. RoundRect with AntiAliasing shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); paint = new Paint(); paint.setColor(Color.RED); paint.setAntiAlias(true); paint.setShader(shader); int height = getBounds().height(); int width = getBounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); canvas.drawRoundRect(rect, 30, 30, paint);
17. 3. RoundRect with AntiAliasing shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); paint = new Paint(); paint.setColor(Color.RED); paint.setAntiAlias(true); paint.setShader(shader); int height = getBounds().height(); int width = getBounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); canvas.drawRoundRect(rect, 30, 30, paint);
18. Rounded corners
19. Clip Path RoundRect Aliased AntiAliased
20. Alpha compositing https://en.wikipedia.org/wiki/Alpha_compositing
21. How about now?
22. CheesyView mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); canvas = new Canvas(mBitmap); RectF rect = new RectF(0.0f, 0.0f, getWidth(), getHeight()); canvas.drawRoundRect(rect, 30, 30, mPaint); mPaint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_OUT) ); … pCanvas.drawCircle(cx, cy, radius, mPaint);
23. CheesyView mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); canvas = new Canvas(mBitmap); RectF rect = new RectF(0.0f, 0.0f, getWidth(), getHeight()); canvas.drawRoundRect(rect, 30, 30, mPaint); mPaint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_OUT) ); … pCanvas.drawCircle(cx, cy, radius, mPaint);
24. CheesyView mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); canvas = new Canvas(mBitmap); RectF rect = new RectF(0.0f, 0.0f, getWidth(), getHeight()); canvas.drawRoundRect(rect, 30, 30, mPaint); mPaint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_OUT) ); … pCanvas.drawCircle(cx, cy, radius, mPaint);
25. CheesyView mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); canvas = new Canvas(mBitmap); RectF rect = new RectF(0.0f, 0.0f, getWidth(), getHeight()); canvas.drawRoundRect(rect, 30, 30, mPaint); mPaint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_OUT) ); … pCanvas.drawCircle(cx, cy, radius, mPaint);
26. CheesyView mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); canvas = new Canvas(mBitmap); RectF rect = new RectF(0.0f, 0.0f, getWidth(), getHeight()); canvas.drawRoundRect(rect, 30, 30, mPaint); mPaint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_OUT) ); … pCanvas.drawCircle(cx, cy, radius, mPaint);
27. CheesyView mBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); canvas = new Canvas(mBitmap); RectF rect = new RectF(0.0f, 0.0f, getWidth(), getHeight()); canvas.drawRoundRect(rect, 30, 30, mPaint); mPaint.setXfermode(new PorterDuffXfermode( PorterDuff.Mode.SRC_OUT) ); … pCanvas.drawCircle(cx, cy, radius, mPaint);
28. Demo & Debug
29. Resources • Professional Android 4 Application Development - Reto Meier (2012) • Taming Android UIs with Eric Burke of Square https://www.youtube.com/watch?v=jF6Ad4GYjRU • Porter/Duff Compositing and Blend Modes http://ssp.impulsetrain.com/porterduff.html • Alpha Compositing https://en.wikipedia.org/wiki/Alpha_compositing • Transparency with JPEGs done right http://www.piwai.info/transparent-jpegs-done-right/ • Android Drawables – Tutorial with Lars Vogel http://www.vogella.com/tutorials/AndroidDrawables/article.html#drawables_custom2 • Android's 2D Canvas Rendering Pipeline http://www.xenomachina.com/2011/05/androids-2d-canvas-rendering-pipeline.html • Canvas and Drawables https://developer.android.com/guide/topics/graphics/2d-graphics.html • Github https://github.com/andreiverdes/CanvasMagic/
30. Thank you! Q&A?