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!

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 ?
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