Styles, Themes, Material Theming, Oh My!

Link to the talk:
https://youtu.be/oSSi50Qv9DE

Here are the links mentioned in the slides :

https://issuetracker.google.com/issues?q=componentid:439535 status:open
https://www.material.io/develop/android/docs/theming-guide/
https://github.com/material-components
https://material.io/tools/theme-editor/
https://medium.com/androiddevhttps://speakerdeck.com/cyrilmottier/themes-styles-and-more-from-zero-to-hero?slide=103elopers/whats-your-text-s-appearance-f3a1729192d
https://www.youtube.com/watch?v=TIHXGwRTMWI
https://medium.com/over-engineering/setting-up-a-material-components-theme-for-android-fbf7774da739
https://www.youtube.com/watch?v=DPH3F0v1jB0

Abstract:

You want to style the title of dialogs throughout your app and you think it should be simple enough. However, once you dive into it, you might start asking questions - should I use alertDialogTheme or alertDialogStyle? Should I use dialogTitle, windowTitle or textAppearanceLarge? It is no secret that the styling and theming system in Android is complex, but I promise there is some method to the madness! We can avoid writing custom components just to achieve pixel perfection if we know how tame to the beast.

In this talk, we will learn about the difference between themes and styles, the hierarchy of different styling techniques and how to use them effectively. We will also discuss migrating to the newest app theme in town - the Material Components Theme and using the new attributes that come with it, like “colorOnSurface”.

At the end of this talk, you will know how to style your app like a pro with the correct use of Styles, Themes, TextAppearance and sensible defaults while specifying color, shape and typography through Material Theming.

Talk given at Berlindroid March 26th, 2019, Droidcon Italy April 5th, 2019.

Transcript

1. Styles,
 Themes,
 Material Theming, 
 Oh My! Anita Singh @anitas3791
2. Styles,
 Themes,
 Material Theming, 
 Oh My! Anita Singh @anitas3791
3. The problem Style Theme TextAppearance ThemeOverlay Material Theming? Default Style? …and they all use the style tag!
4. Style
5. Key-value store, where the key is an attribute What?
6. Specifies the look of a single view What?
7. Example <style name=“WhiteTextButtonWidget" parent=“Widget.MaterialComponents.Button"> <item name="android:textColor">@color/white</item> <item name="android:fontFamily">@font/cera_pro_bold</item> </style>
8. Example <style name=“WhiteTextButtonWidget" parent=“Widget.MaterialComponents.Button"> <item name="android:textColor">@color/white</item> <item name="android:fontFamily">@font/cera_pro_bold</item> </style>
9. Example <style name=“WhiteTextButtonWidget" parent=“Widget.MaterialComponents.Button"> <item name="android:textColor">@color/white</item> <item name="android:fontFamily">@font/cera_pro_bold</item> </style>
10. Example <Button .. style=“@style/WhiteTextButtonWidget" .. /> <style name=“WhiteTextButtonWidget" parent=“Widget.MaterialComponents.Button"> <item name="android:textColor">@color/white</item> <item name="android:fontFamily">@font/cera_pro_bold</item> </style>
11. When? Applies to >1 logically related components
12. TextAppearance
13. Text specific styling, works at the character level What?
14. Example <style name="RaspberryTextAppearance"> <item name=“android:textColor”>@color/raspberry</item> <item name=“android:fontFamily”>@font/cera_pro</item> </style>
15. Example <style name="RaspberryTextAppearance"> <item name=“android:textColor”>@color/raspberry</item> <item name=“android:fontFamily”>@font/cera_pro</item> </style> <EditText … android:textAppearance="@style/RaspberryTextAppearance" />
16. When? • You have a bloated style with text attributes • You are only styling text at the character level
17. Theme
18. A type of style applied to an app or activity (or view) What?
19. context.setTheme(resId) What?
20. Example <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/white</item> <item name=“colorPrimaryVariant">@color/midnight</item> <item name="colorSecondary">@color/blinkist_green</item> <item name="colorControlNormal">@color/midnight</item> <item name=“cardViewStyle”>@style/RoundCardViewStyle</item> … </style>
21. Example Default Style Attribute <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/white</item> <item name=“colorPrimaryVariant">@color/midnight</item> <item name="colorSecondary">@color/blinkist_green</item> <item name="colorControlNormal">@color/midnight</item> <item name=“cardViewStyle”>@style/RoundCardViewStyle</item> … </style>
22. Example <application android:theme=“@style/AppTheme" … /> <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/white</item> <item name="colorPrimaryDark">@color/midnight</item> <item name="colorAccent">@color/blinkist_green</item> <item name="colorControlNormal">@color/midnight</item> <item name=“cardViewStyle”>@style/RoundCardViewStyle</item> … </style>
23. Theme attributes everywhere! <selector> <item android:color=“?attr/colorSecondary" android:state_enabled="true"/> <item android:alpha="0.6" android:color=“?attr/colorSecondary"/> </selector>
24. Theme attributes everywhere! <selector> <item android:color=“?attr/colorSecondary" android:state_enabled="true"/> <item android:alpha="0.6" android:color=“?attr/colorSecondary"/> </selector>
25. When? • Style child views • Implement a robust design system

26. ThemeOverlay
27. View-level theming
 minSdk 14+ What?
28. ContextThemeWrapper What?
29. Example <Button .. style="@style/Widget.AppCompat.Button.Colored" android:theme=“@style/GreenButtonThemeOverlay” />
30. Example <style name=“GreenButtonThemeOverlay"> <item name=“colorPrimary">@color/blinkist_green</item> </style> <Button .. style="@style/Widget.AppCompat.Button.Colored" android:theme=“@style/GreenButtonThemeOverlay” />
31. Example <style name="ThemeOverlay.MaterialComponents"/> <style name="ThemeOverlay.MaterialComponents.ActionBar"/> <style name="ThemeOverlay.MaterialComponents.Dark"/> <style name="ThemeOverlay.MaterialComponents.Dark.ActionBar"/> <style name="ThemeOverlay.MaterialComponents.Dialog"/> <style name="ThemeOverlay.MaterialComponents.Dialog.Alert"/> <style name="ThemeOverlay.MaterialComponents.TextInputEditText"/>
32. When? • Overlay an existing theme by changing only what you need • Invert the theme for a view or view hierarchy
33. Order of Precedence
34. Example Default Style Attribute <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/white</item> <item name=“colorPrimaryVariant">@color/midnight</item> <item name="colorSecondary">@color/blinkist_green</item> <item name="colorControlNormal">@color/midnight</item> <item name=“cardViewStyle”>@style/RoundCardViewStyle</item> … </style>
35. How? public CardView(@NonNull Context context, @Nullable AttributeSet attrs) { this(context, attrs, R.attr.cardViewStyle); } public CardView(@NonNull Context context, @Nullable AttributeSet attrs, 
 int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CardView, defStyleAttr, R.style.CardView);
 …
36. How? public CardView(@NonNull Context context, @Nullable AttributeSet attrs) { this(context, attrs, R.attr.cardViewStyle); } public CardView(@NonNull Context context, @Nullable AttributeSet attrs, 
 int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CardView, defStyleAttr, R.style.CardView);
 …
37. How? TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CardView, defStyleAttr, R.style.CardView); public CardView(@NonNull Context context, @Nullable AttributeSet attrs) { this(context, attrs, R.attr.cardViewStyle); } public CardView(@NonNull Context context, @Nullable AttributeSet attrs, 
 int defStyleAttr) { super(context, attrs, defStyleAttr);
38. How? TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CardView, defStyleAttr, R.style.CardView) public CardView(@NonNull Context context, @Nullable AttributeSet attrs) { this(context, attrs, R.attr.cardViewStyle); } public CardView(@NonNull Context context, @Nullable AttributeSet attrs, 
 int defStyleAttr) { super(context, attrs, defStyleAttr);
39. Where the magic happens getTheme().obtainStyledAttributes( set, attrs, defStyleAttr, defStyleRes);
40. Styling Hierarchy View Style Default Style Theme TextAppearance
41. Material Theming
42. What?
43. A library of components, evolution of Design Support Library Material Components
44. Material Component Theme •Theme.MaterialComponents.* •Built on top of AppCompat •Shiny new attributes! •minSdk 14, compileSdk 28+
45. Color theming
46. Color theming colorPrimaryVariant colorPrimary background colorSurface colorOnPrimary colorOnSurface colorSecondary colorOnSecondary
47. Color theming: new attributes <item name="colorPrimaryVariant">..</item> <item name=“colorOnPrimary">..</item> <item name="colorSecondary">..</item> <item name="colorSecondaryVariant">..</item> <item name="colorOnSecondary">..</item> <item name="colorSurface">..</item> <item name="colorOnSurface">..</item> <item name=“colorOnBackground">..</item> <item name="colorOnError">..</item>
48. Shape theming MaterialShapeDrawable
49. Shape theming
50. New attributes: shape <item name=“shapeAppearanceSmallComponent">..</item> <item name=“shapeAppearanceMediumComponent”>..</item> <item name=“shapeAppearanceLargeComponent”>..</item>
51. New attributes: shape <item name=“shapeAppearanceMediumComponent”>..</item> <item name=“shapeAppearanceLargeComponent”>..</item> <item name=“shapeAppearanceSmallComponent">..</item>
52. New attributes: shape <style ..parent="ShapeAppearance.MaterialComponents.S mallComponent"> <item name="cornerFamilyTopLeft">cut</item> <item name="cornerFamilyTopRight">cut</item> <item name="cornerFamilyBottomLeft">rounded</item> <item name="cornerFamilyBottomRight">rounded</item> <item name="cornerSize">8dp</item> </style> <item name=“shapeAppearanceMediumComponent”>..</item> <item name=“shapeAppearanceLargeComponent”>..</item> <item name=“shapeAppearanceSmallComponent">..</item>
53. New attributes: shape <item name=“shapeAppearanceMediumComponent”>..</item> <item name=“shapeAppearanceLargeComponent”>..</item> <item name=“shapeAppearanceSmallComponent">..</item> <style ..parent="ShapeAppearance.MaterialComponents .SmallComponent"> <item name="cornerFamilyTopLeft">cut</item> <item name="cornerFamilyTopRight">cut</item> <item name="cornerFamilyBottomLeft">rounded</item> <item name="cornerFamilyBottomRight">rounded</item> <item name="cornerSize">8dp</item> </style>
54. Typography theming
55. New attributes: typography <item name="textAppearanceHeadline1"></item> <item name="textAppearanceHeadline2"></item> <item name="textAppearanceHeadline3"></item> <item name="textAppearanceHeadline4"></item> <item name="textAppearanceHeadline5"></item> <item name="textAppearanceHeadline6"></item> <item name="textAppearanceSubtitle1"></item> <item name="textAppearanceSubtitle2"></item> <item name=“textAppearanceBody1”></item> <item name="textAppearanceBody2"></item> <item name="textAppearanceCaption"></item> <item name=“textAppearanceButton"></item> <item name="textAppearanceOverline"></item> …
56. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> to Migrating to Material Component Theme
57. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> to Migrating to Material Component Theme
58. You won’t believe what happened next…
59. You won’t believe what happened next…
60. You won’t believe what happened next…
61. Migrating to Material Component Theme android:background="@color/blinkist_green"
62. <style name="ButtonStyle" parent="Widget.MaterialComponents.Button"> <item name="backgroundTint">@color/button_selector</item> … </style> android:background="@color/blinkist_green" Migrating to Material Component Theme
63. android:background="@color/blinkist_green" Migrating to Material Component Theme <style name="ButtonStyle" parent="Widget.MaterialComponents.Button"> <item name="backgroundTint">@color/button_selector</item> … </style> android:background="@color/blinkist_green"
64. Migrating to Material Component Theme <style name="ButtonStyle" parent="Widget.MaterialComponents.Button"> <item name="backgroundTint">@color/button_selector</item> … </style> … <item name=“materialButtonStyle">@style/ButtonStyle</item> … android:background="@color/blinkist_green"
65. Color of button background = colorPrimary Option 2 : theme overlay set on button! Option 3 : materialThemeOverlay set on default style! Migrating to Material Component Theme
66. <style name="ButtonStyle" parent="Widget.MaterialComponents.Button"> <item name=“materialThemeOverlay”>@style/ MidnightButtonThemeOverlay</item> … </style> …
 <item name=“materialButtonStyle">@style/ButtonStyle</item> … Migrating to Material Component Theme <style name="MidnightButtonThemeOverlay"> <item name="colorPrimary">@color/midnight</item> </style>
67. <style name=“…” parent="Widget.MaterialComponents.Button.Icon"> <item name="backgroundTint">@color/white</item> <item name="icon">@drawable/ic_google</item> <item name="iconTint">@null</item> <item name="android:textColor">@color/mid_grey</item> </style> Migrating to Material Component Theme
68. Migrating to Material Component Theme <style name=“…” parent="Widget.MaterialComponents.Button.Icon"> <item name="backgroundTint">@color/white</item> <item name="icon">@drawable/ic_google</item> <item name="iconTint">@null</item> <item name="android:textColor">@color/mid_grey</item> </style>
69. Migrating to Material Component Theme <style name=“…” parent="Widget.MaterialComponents.Button.Icon"> <item name="backgroundTint">@color/white</item> <item name="icon">@drawable/ic_google</item> <item name="iconTint">@null</item> <item name="android:textColor">@color/mid_grey</item> </style>
70. Migrating to Material Component Theme
71. to <style name="AlertDialogTheme" parent=“Theme.MaterialComponent.Light.Dialog.Alert"> Migrating to Material Component Theme <style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
72. Color of button text = colorPrimary Migrating to Material Component Theme to <style name="AlertDialogTheme" parent=“Theme.MaterialComponent.Light.Dialog.Alert"> <style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
73. Migrating to Material Component Theme .. <item name="textInputStyle">@style/ Widget.MaterialComponents.TextInputLayout.OutlinedBox</item> ..
74. Color of selection = colorPrimary Migrating to Material Component Theme .. <item name="textInputStyle">@style/ Widget.MaterialComponents.TextInputLayout.OutlinedBox</item> ..
75. Bridge Themes Inherits from AppCompat, but defines the new theme attributes
76. Migrating to Material Component Theme <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar.Bridge”> to
77. If something looks funny… • Find the attribute(s) that matter • What is the attribute being applied as – theme? style? • Order of Precedence. What could be overriding it? • Have it extend a MaterialComponent style, if present • There are bugs!
78. Useful Links • Material Theming Guide • Material Components Github • Material Theme Editor • What's Your Text Appearance? • Themes, Styles And More From Zero To Hero • Android Themes & Styles Demystified • Setting Up Material Components Theme For Android • The Components of Material Design
79. Thanks. anitas3791@gmail.com @anitas3791 https:/ /tinyurl.com/styles-material-theming