Theming In Android

This deck was originally presented at JavaCloud 2019 and it is all about theming your Android app using Google's Material Design.
Topics Covered:
- Color
- Typography
- Themes
- Styles

Transcript

1. THEMING IN ANDROID Using Material
2. Pabi Moloi @pabiforbes peckishpabi.co.za Android Engineer, DVT
3. Theming In Android Color Typography Style Theme
4. What is theming and why is it important?
5. • A theme is a unifying idea and theming is designing or bringing that idea to life to an object or space • Create a holistic look and feel
6. Why is it important? • Create a memorable and meaningful experience • Create reusable set of attributes to apply to your entire app
7. DeSiGn iS fOr Ui DeSiGnErS, aS lOnG aS iT wOrKs!
8. Consistency With regard to mobile apps, consistency is: • Visual Consistency • Functional Consistency • External Consistency -Smashing Magazine
9. Visual Consistency “Typefaces, buttons, and labels need to be consistent across the app” -Smashing Magazine
10. Material Components "com.google.android.material:material:$material_version
11. Theming In Android Color Typography Style Theme
12. Theming In Android Blog Theming In Android Blog
13. Theming In Android Blog Theming In Android Blog
14. Theming In Android Blog
15. Theming In Android Blog
16. So how should we ideally name our colors?
17. Well, colours have names...
18. Parmesan
21. Material Color Tool
24. <!--?xml version="1.0" encoding="UTF-8"?--> <resources> <color name="primaryColor">#f9a825</color> <color name="primaryLightColor">#ffd95a</color> <color name="primaryDarkColor">#c17900</color> <color name="secondaryColor">#ffffff</color> <color name="secondaryLightColor">#ffffff</color> <color name="secondaryDarkColor">#25cccccc</color> <color name="primaryTextColor">#ffffff</color> <color name="secondaryTextColor">#000000</color> </resources>
25. <!--?xml version="1.0" encoding="UTF-8"?--> <resources> <color name="primaryColor">#f9a825</color> <color name="primaryLightColor">#ffd95a</color> <color name="primaryDarkColor">#c17900</color> <color name="secondaryColor">#ffffff</color> <color name="secondaryLightColor">#ffffff</color> <color name="secondaryDarkColor">#25cccccc</color> <color name="primaryTextColor">#ffffff</color> <color name="secondaryTextColor">#000000</color> </resources>
27. Give colors their names...
28. <!--?xml version="1.0" encoding="UTF-8"?--> <resources> <color name="red">#d32f2f</color> <color name="mustard">#F9A825</color> <color name="yellow">#ffd95a</color> <color name="dark_mustard">#c17900</color> <color name="white">#ffffff</color> <color name="light_grey">#25CCCCCC</color> <color name="black">#000000</color> </resources>
29. <style name="..." parent="..."> <item name="colorPrimary">@color/mustard</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryVariant">@color/dark_mustard</item> <item name="colorAccent">@color/red</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item> </style>
30. “On” Colours
31. colorOnPrimary colorOnSecondary colorOnError colorOnBackground
32. UpLabs
33. Recap • Give colors names, which helps in the reduction of duplication. • “On” colours are usually used for iconography, text, and strokes
34. Theming In Android Color Typography Style Theme
35. Typography • Headline • Subtitle • Body • Caption • Button • Overline
36. Typography Attributes Headline : • textAppearanceHeadline1 • textAppearanceHeadline2 • textAppearanceHeadline3 • textAppearanceHeadline4 • textAppearanceHeadline5 • textAppearanceHeadline6
37. Typography Headline :
38. Typography Attributes Subtitle : • textAppearanceSubtitle1 • textAppearanceSubtitle2
39. Typography Subtitle :
40. Typography Attributes Body : • textAppearanceBody1 • textAppearanceBody2
41. Typography Body :
42. Typography Attributes Button : • textAppearanceButton
43. Typography Attributes Caption : • textAppearanceCaption
44. Typography Attributes Overline : • textAppearanceOverline
46. <style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> ... </style>
47. <style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> ... </style>
48. <style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> ... </style>
49. <style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> ... </style>
50. <style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> <item name="android:textStyle">normal</item> </style>
51. Recap • Typography is not just about choosing a typeface • Material Design type scale has a range of styles for you to use • Google Fonts is an awesome place to find open source fonts
52. Theming In Android Color Typography Style Theme
54. Font Color Font Size Background Colour Padding MinHeight MinWidth ...
59. <style name="body" parent="TextAppearance.MaterialComponents.Body1"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">14sp</item> <item name="android:textStyle">normal</item> </style>
60. <style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> <item name="android:textStyle">normal</item> </style>
61. <TextView android:id="@+id/textViewMealName" style="@style/headline3" . . . />
63. <style name="FloatingActionButtonStyle" parent="Widget.MaterialComponents.FloatingActionButton"> . . . </style>
64. <style name="FloatingActionButtonStyle" parent="Widget.MaterialComponents.FloatingActionButton"> <item name="backgroundTint">@color/mustard</item> <item name="tint">@color/white</item> <item name="rippleColor">@color/white</item> </style>
65. <com.google.android.material.floatingactionbutton.Floating ActionButton android:id="@+id/floatingActionButtonShuffle" style="@style/FloatingActionButtonStyle" ... />
66. Recap • To customize a look of a view, create a style, and apply that style to it • Refer to documentation to see what attributes are available to style a particular view
67. Theming In Android Color Typography Style Theme
68. ...is a type of style that is applied to: • The entire application • Activity • View Hierarchy
69. <style name="NoActionBarTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/mustard</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryVariant">@color/yellow</item> <item name="colorAccent">@color/red</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item> <item name="android:windowBackground">@color/white</item> </style
70. <style name="BlueGreenTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar"> <item name="colorPrimary">@color/blue</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryVariant">@color/light_blue</item> <item name="colorAccent">@color/green</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item> . . . </style>
71. Recap • Avoid hardcoding values • Create a theme for styles that are consistent throughout the app
72. Dark Theme
73. • Uses dark grey as the primary surface color for components ◦ Helps in reducing eye strain • Elevated surfaces are illuminated ◦ The higher the elevation, the lighter the surface • “On” colours on a dark theme are white and black
74. Dark Theme Benefits • Power usage reduction • Makes it easier to use your device in a low light environment • Improves visibility for users with low vision
75. Dark Theme - Parmesan
76. <style name="NoActionBarTheme" parent= "Theme.MaterialComponents.Light.NoActionBar"> ... </style>
77. <style name="NoActionBarTheme" parent= "Theme.MaterialComponents.DayNight.NoActionBar"> ... </style>
78. AppCompatDelegate.setDefaultNightMode (AppCompatDelegate.MODE)
79. Modes: • MODE_NIGHT_FOLLOW_SYSTEM • MODE_NIGHT_YES • MODE_NIGHT_NO • MODE_NIGHT_AUTO_BATTERY
80. Honourable Mention: • MODE_NIGHT_AUTO_TIME • MODE_NIGHT_AUTO
81. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) AppCompatDelegate.setDefaultNightMode( AppCompatDelegate.MODE_NIGHT_YES) setContentView(R.layout.activity_home) }
82. Recap • DayNight can be applied to both AppCompat and MaterialComponents • Do not hardcode values • Dark theme uses grey instead of black • Keep accessibility in mind
83. What to keep at the back of your mind: Android’s Style Hierarchy
84. Android’s Style Hierarchy 1. Applying character- or paragraph-level styling via text spans to textview-derived classes 2. Applying attributes programmatically 3. Applying individual attributes directly to a View 4. Applying a style to a View
85. Android’s Style Hierarchy 5. Default styling 6. Applying a theme to a collection of Views, an activity, or your entire app 7. Applying certain View-specific styling, such as setting a textappearance on a textview
86. Thank You!
87. Resources • Material Design ◦ https://material.io/ • Android Developer Guide User Interface ◦ https://developer.android.com/guide/topics/ui • Smashing Magazine ◦ https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile -app-design/