Make your designers love (working with) you

Presentation for a talk I gave for Blrdroid GDG Devfest 2017

Transcript

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. How much of this can I do myself? Me
4. Why should I do this? • Free up your designers to do what they love • (Almost) instant iteration • Gradle builds faster • Your APK is smaller
5. 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
7. <solid color=“”/> <corners radius=“”/> <stroke width=“”/>
8. • 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
9. Borders
10. <stroke width=“”/> <dashWidth=“”/> <dashGap=“”/>
11. Gradients
12. startColor centerColor endColor centerX & centerY angle=45 angle=90
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. 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
15. 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
17. 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
18. Clamp Repeat Mirror Tile Modes
19. 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
20. 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
21. Practical Example! • 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
22. 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
23. 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
27. - https://github.com/vinaysshenoy/Devfest17Sample - vinaysshenoy@gmail.com Links & Contact
28. You Have The Power! Don’t dress like this to work. Or anywhere, for that matter.