Theming In Android++

In this talk, I spoke about some of the mistakes I made with theming and how I overcame them.

Transcript

1. Pabi Moloi @pabiforbes www.peckishpabi.co.za Android Engineer
2. Theming In Android Color Typography Style Theme
3. What is theming, and why is it important?
4. Material Components implementation "com.google.android.material:material:$material_version"
5. Theming In Android Color Typography Style Theme
6. Theming In Android Blog
10. So how should we ideally name our colors?
11. Colors have names :)
12. Parmesan
13. Material Color Tool
14. <!--?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>
15. <!--?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>
16. Give colors their names!
17. <?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>
18. <style name="..." parent="..."> <item name="colorPrimary">@color/mustard</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryDark">@color/dark_mustard</item> <item name="colorAccent">@color/red</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item> </style>
19. Recap - Color - Give colors names, which helps in the reduction of duplication. - “On” colours are usually used for iconography, text, and strokes
20. Theming In Android Color Typography Style Theme
21. Typography
22. Attributes • textAppearanceHeadline1 - textAppearanceHeadline6 • textAppearanceSubtitle1 - textAppearanceSubtitle2 • textAppearanceBody1 - textAppearanceBody2 • textAppearanceCaption • textAppearanceButton • textAppearanceOverline
24. <style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> ... </style>
25. <style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> ... </style>
26. <style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> ... </style>
27. <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>
28. <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>
30. Theming In Android Color Typography Style Theme
31. Style
32. Font Color Font Size Background Colour Padding MinHeight MinWidth ...
33. <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>
35. <style name="FloatingActionButtonStyle" parent="Widget.MaterialComponents.FloatingActionButton"> ... </style>
36. <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>
37. <com.google.android.material.floatingactionbutton.FloatingActi onButton ... style="@style/FloatingActionButtonStyle"/>
38. Theming In Android Color Typography Style Theme
39. Theme
40. ...is a type of style that is applied to: • The entire application • Activity • View Hierarchy
41. <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="colorPrimaryDark">@color/dark_mustard</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>
42. Dark Theme
44. <style name="NoActionBarTheme" parent= "Theme.MaterialComponents.Light.NoActionBar"> ... </style>
45. <style name="NoActionBarTheme" parent= "Theme.MaterialComponents.DayNight.NoActionBar"> ... </style>
46. AppCompatDelegate.setDefaultNightMode (AppCompatDelegate.MODE)
47. Modes: • MODE_NIGHT_FOLLOW_SYSTEM • MODE_NIGHT_YES • MODE_NIGHT_NO • MODE_NIGHT_AUTO_BATTERY
48. Honourable Mention: • MODE_NIGHT_AUTO_TIME • MODE_NIGHT_AUTO
49. What to keep at the back of your mind: Android’s Style Hierarchy
50. View Specific Styling Theme Default Styling Applying a style to a view Setting individual attributes
51. Programmatically applying attributes Character/Paragraph styling