Making sense of Themes and Styles and Material Design

Presented at DroidCon Zagreb 2016

Abstract:
As material design specs are maturing, Google's support for it on Android is getting better. However, there is still a lot of ways to implement your new material design. This talk will explain the theming and styling part of the process using AppCompat and Design support libraries.

Nowadays, the material design is so popular that there is very little chance that your new app will not implement it. This creates lots of pressure on developers to implement the material design properly. And this is by no means an easy task. Google is trying to help the developers by providing some of the implementation in the support libraries. Even with that, there are many areas where there is room for different interpretations of the guidelines. One of them is theming and styling.
This talk will cover the following:
- Structure of themes in Android
- Implementing a material theme in the app using AppCompat library
- Common theme attributes and their usage
- Overriding themes for part of your application
- Styling of text views
- Styling of buttons
- Styling of common input components
- Styling of dialogs
All of this needs to support pre-Lollipop versions of Android, so this is covered as well.

Transcript

1. MAKING SENSE OF THEMES AND STYLES AND MATERIAL DESIGN
2. SPEAKER Nemanja Nedic Tech Lead @ Levi9 IT Services about.me/nemanjanedic
3. LEVI9 IT SERVICES nearshore delivery model 600 IT professionals, 4 countries, 5 delivery centres MOBILE DEVELOPMENT Different industries: Traffic and transport, Digital marketing, FinTech, E-Retail Consumer apps, PoC, demo, internal apps
4. STYLE A style is a collection of properties that specify the look and format for a View or window.
5. STYLE It enables us to go from this to this
6. STYLE DEFINITION Styles are defined in a style resource file. Item in a style can be any defined attribute (R.attr).
7. THEME A theme is a style applied to an entire Activity or application.
8. THEME Applying a theme to the application and to an activity
9. THEME OF A VIEW android:theme attribute can be specified on a View in a layout file and it will be propagated to all the children declared in the layout.
10. STYLE INHERITANCE A style can inherit another style and thus inherit all the style properties. The child style can redefine properties from the parent style or add additional.
11. STYLE INHERITANCE Using parent attribute or using a dot notation
12. MATERIAL THEME @android:style/Theme.Material @android:style/Theme.Material.Light @android:style/Theme.Material.Light.DarkActionBar
13. MATERIAL THEME Customize the color pallete using these properties
14. THEME OVERLAYS They are special themes that overlay the base theme and redefine some of the properties. They are applied to a specific view. @android:style/ThemeOverlay.Material.Light @android:style/ThemeOverlay.Material.Dark.ActionBar
15. APPCOMPAT THEME It is a backport of the Material theme for the pre-Lollipop versions. @style/Theme.AppCompat @style/Theme.AppCompat.Light @style/Theme.AppCompat.Light.DarkActionBar @style/ThemeOverlay.AppCompat.Light @style/ThemeOverlay.AppCompat.Dark.ActionBar
16. APPCOMPAT THEME Style properties are defined without android: prefix.
17. STYLING TEXT VIEWS In addition to the style attribute, TextView has textAppearance attribute.
18. STYLING TEXT VIEWS Using inline attributes
19. STYLING TEXT VIEWS Using TextAppearance from the current theme
20. STYLING TEXT VIEWS Using custom TextAppearance
21. STYLING TEXT VIEWS Definining custom TextAppearance
22. STYLING BUTTONS In Material design, there are three types of buttons. Flat button Raised button FAB
23. STYLING BUTTONS Flat button
24. STYLING BUTTONS Raised button
25. STYLING BUTTONS Colored button
26. STYLING BUTTONS Floating action button
27. STYLING DIALOGS Styling dialogs is done by creating a custom theme. The key is to find the right theme to inherit.
28. STYLING ALERT DIALOGS A l e r t D i a l o g . B u i l d e r b u i l d e r = n e w A l e r t D i a l o g . B u i l d e r ( g e t A c t i v i t y ( ) , R . s t y l e . C u s t o m D i a l o g T h e m e ) ;
29. STYLING DATE/TIME PICKERS n e w D a t e P i c k e r D i a l o g ( g e t A c t i v i t y ( ) , R . s t y l e . C u s t o m D i a l o g T h e m e , t h i s , y e a r , m o n t h , d a y ) ;
30. CONCLUSIONS Styles and themes are very powerful way to organize your layout markup. The hardest part is to find the appropriate theme to inherit. Practice make perfect!
31. QUESTIONS?
32. THANK YOU!