Android Canvas Magic

2e31903e37e8566e7cce070a04a37e7a?s=47 Andrei Verdes
February 04, 2016

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

2e31903e37e8566e7cce070a04a37e7a?s=128

Andrei Verdes

February 04, 2016
Tweet

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?