Learn about various custom drawing capabilities available to developers on Android, and how you can use them to build complex designs quickly without needing specialized assets from designers.

1. Make your designers
love (working with) you!
Vinay Shenoy
Software Engineer
HomeLane.com

2. • Static Assets exported by designer
1. Reexport for every supported density
2. More assets -> more time
3. Who loves Nine-Patches?
• Sharing and organising assets
1. Designer has their own naming and organising
preference
2. Developer has to reorganise and rename according
to Android format
• Iteration is terribly inefficient for image assets
1. Tiniest change in design requires re-export of asset
2. Rename, Restructure, Rebuild
3. Rinse, Repeat

3. Unnecessary work is bad!
1. Backgrounds and Borders using Shape Drawables
2. Textured Backgrounds and Shapes using Bitmap
Shaders
3. Custom views

4. Shape Drawables
• Single XML file to represent
the drawable, scales across
densities
• Supports multiple basic
shapes
• Supports solid/stroked
shapes
• Has basic gradient support
• Very useful for border and
backgrounds

5. Backgrounds

6. <solid color=“”/>
<corners radius=“”/>
<stroke width=“”/>

7. • Solids and Strokes are NOT mutually exclusive.
Strokes are drawn on top of the solid
• The Size tag in the drawable is not a fixed size. The
drawable will expand to fill the View
• Can be used in StateListDrawables for visual
feedback

8. Borders

9. <stroke width=“”/>
<dashWidth=“”/>
<dashGap=“”/>

10. Gradients

11. startColor
centerColor
endColor
centerX & centerY
angle=45
angle=90

12. Image Drawing
• Images(especially avatars)
often need to be drawn in
different shapes
• Drawing images of
arbitrary shapes can be
achieved using Paths and
Bitmap Shaders

13. Paths
• A collection of geometric constructs(Circles, Rectangles,
Lines) that are encapsulated in the Path class
• Can be used for drawing and clipping
• Can also be used for drawing text
• Canvas#drawPath(path, paint) will draw the
constructed path with a particular paint object
• Path provides shape, paint provides colour

14. Bitmap Shaders
• By itself, a Paint object supports a single colour only
• A shader can be used to provide spans of colours instead
of a single colour when drawing anything on a Canvas
• The android framework provides multiple shaders, like
LinearGradient which is used in gradient shape which we
saw earlier
• Bitmap shader allows you to provide colour spans from
an image

16. BitmapShader Tile Modes
• Control how a Bitmap Shader selects a colour for a pixel
if the source bitmap is smaller than the area to be drawn
• Three tile modes are available
1. Clamp - The edge colour of the Bitmap is repeated
2. Mirror - The source Bitmap is mirrored
3. Repeat - The source Bitmap is repeated

17. Clamp Repeat Mirror
Tile Modes

18. Textured Backgrounds
• Full size textured backgrounds will
not work because the image will
scale on different resolutions and
aspect ratios
• Creating multiple full size
backgrounds adds extra size to the
APK and is still not guaranteed to
scale well across the entire device
spectrum
• Bitmap Shaders are extremely
helpful to handle this case

19. Textured Backgrounds
• All you need is a texture that is created
in a specific way, called a seamless,
repeatable texture
• A seamless, repeatable texture is one
that can be placed next to itself and it
will appear to be a complete image
• A seamless texture + a bitmap shader
with Repeat tile mode will handle
everything

20. Practical Applications
• Rounded corners, so
needs multiple densities
• Has to accommodate
dynamic content so has to
be nine-patch
• IF we were going the static
asset route

21. Custom Drawing
• Use a seamless, repeatable texture for the
background
• Use a Path to create the shape
• Use a BitmapShader to draw the path, with the
background texture

22. Creating the Shape
• We create a Path with two components - The
Rounded rectangle and the little triangle in the
corner
• We also need to set the dimensions of the View, for
which we need to know how large the content is
• StaticLayout is great for measuring and drawing
text

26. You Have The
Power!