Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make your designers love (working with) you

Make your designers love (working with) you

Presentation for a talk I gave for Blrdroid GDG Devfest 2017


Vinay S Shenoy

October 07, 2017

More Decks by Vinay S Shenoy

Other Decks in Programming


  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
  6. None
  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
  16. None
  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
  24. None
  25. None
  26. None
  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.