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

The Magic World of Drawables

The Magic World of Drawables

A very useful and powerful feature of android that developers sometimes ignore or use it wrong. The small details of your app is what make it amazing, in this presentation we will talk about how Shapes, Layer-Lists and more can make your UI jump to another level and amaze your users. All that without being a rockstar designer!

Dfd02975cecba29510f6f8464e5bc916?s=128

Marcos Paulo Souza Damasceno

September 21, 2014
Tweet

More Decks by Marcos Paulo Souza Damasceno

Other Decks in Programming

Transcript

  1. The Magic World Of Drawables How to play with drawables

    to achieve a nicer looking app.
  2. 4:10 Marcos Damasceno Android Developer Mirego @marcospaulosd +marcospaulosd Proud Brazilian

    ! Android Developer since 2.3 ! Moved to Canada in 2013 where he was team lead of an enterprise tablet app currently being used by Sony US ! Currently do droid stuff at Mirego Montreal
  3. http://life.mirego.com/

  4. Drawables Overview

  5. Drawables Overview Drawable is a general abstraction for “something that

    can be drawn.” ! Unlike a view, a Drawable does not have any facility to receive events or otherwise interact with a user.
  6. Drawables Overview We will see how we can take advantage

    of drawables so we can reduce the amount of resources in our application. Objective We will go step by step through UI cases where we can apply those concepts. And we will see some code. Finally we will see some more cases where we can apply drawables and custom drawables.
  7. Drawables Overview We will see how we can take advantage

    of drawables so we can reduce the amount of resources in our application. ! Also we will see cases where a drawable could easily replace views, making our app more clean and faster. Objective ShapeDrawable
  8. ShapeDrawable A Drawable object that draws primitive shapes. <shape> <corners.../>

    <gradient.../> <padding.../> <solid.../> <stroke.../> </shape> XML Code ShapeDrawable Paint Paint.Style
  9. ShapeDrawable Shapes Types ArcShape OvalShape PathShape RectShape

  10. ShapeDrawable Shapes Types OvalShape XML Code

  11. ShapeDrawable Shapes Types OvalShape XML Code First UI Case

  12. First UI Case ic_email.png ic_email_rounded.png

  13. Drawables Overview We will see how we can take advantage

    of drawables so we can reduce the amount of resources in our application. ! Also we will see cases where a drawable could easily replace views, making our app more clean and faster. Objective First UI Case ic_email.png ic_email_rounded.png LayerListDrawable
  14. A Drawable that manages an array of other Drawables. !

    These are drawn in array order, so the element with the largest index will be drawn on top LayerListDrawable <layer-list> <item.../> <item.../> <item.../> </layer-list> XML
  15. LayerListDrawable res/drawable/ic_email_rounded.xml

  16. LayerListDrawable res/drawable/ic_email_rounded.xml

  17. LayerListDrawable res/drawable/ic_email_rounded.xml

  18. ShapeDrawable Shapes Types OvalShape XML Code Second UI Case

  19. Second UI Case ic_email.png ic_friends.png ic_flights.png ic_chat.png ic_email_rounded.xml ? ic_friends_rounded.xml

    ? ic_chat_rounded.xml ? ic_flights_rounded.xml ?
  20. None
  21. Second UI Case Let’s code!!!

  22. Second UI Case Let’s code!!!

  23. Second UI Case Let’s code!!!

  24. Second UI Case Let’s code!!!

  25. Second UI Case Let’s code!!!

  26. Second UI Case Let’s code!!! …

  27. Third UI Case

  28. Third UI Case Let’s do some Material Design! Dynamic Color

  29. Third UI Case

  30. Third UI Case Android L is introducing palette and also

    image tinting.
  31. Third UI Case To apply a tint to a bitmap,

    use the setTint method or the android:tint attribute for BitmapDrawable and NinePatchDrawable. But the tint method and attribute are only available on L
  32. Third UI Case But fear not my friends, We’re bringing

    tint to everybody!
  33. Third UI Case It was there all the time. No

    secrets… It’s the ColorFilter!
  34. Third UI Case Why are you creating a new tinted

    bitmap instead of applying color filters to the BimpapDrawable?!
  35. Third UI Case Because the StateListDrawable’s colorFilter overrides the color

    filters of drawables that are added to it. StateListDrawable LayerListDrawable ColorFilter LayerListDrawable ColorFilter ColorFilter default pressed
  36. Third UI Case Going back to buildShapeDrawable

  37. Third UI Case Going back to buildLayerDrawable

  38. Third UI Case Now we build our StateListDrawable

  39. Third UI Case And that’s it:

  40. Third UI Case And that’s it: Bonus Point: Launching your

    android app, the right way.
  41. Launching your android app, the right way. SplashScreens are evil

    A good splash screen is difficult to implement and boring (because they’re not supposed to exist.) 99% of the case they’re not necessary at all.
  42. Instead of using splash screen, preview your content Launching your

    android app, the right way.
  43. Create a drawable with the main components’ colors and shapes

    and set it as windowBackground of your app. ! Your users will be thankful. Launching your android app, the right way.
  44. Bringing L to other versions You can use drawable techniques

    and custom drawables to bring some parts of Android L design to prior Android versions Ripple Effect Cards with shadows Create masks for your pictures. and much more…
  45. Wrap up Drawables are powerful and they can do way

    more than just load your resources. It can in many cases substitute views, even when you want animations, dynamic text and more. It will be your best friend when you’ll think about back porting Android L design to other versions.
  46. Thank you! twitter.com/marcospaulosd plus.google.com/+marcospaulosd marcospaulosd@gmail.com