Developing Themes with Style

The Android Theming system is powerful but easy to misuse. Proper use of it can make themes and styles easier to maintain, make branding updates less scary and make it straightforward to support dark modes.

This talk will start with a crash course in themes and styles. We’ll cover the platform, AppCompat and MaterialComponents functionality that you should know about and build upon. We’ll look at how to support both light and dark modes without going crazy. We’ll show how and when to create your own theme attributes, how to tint drawables, how to theme sub-sections of your screen and how to isolate your theme dependant resources to make them maintainable.

Transcript

1. Developing·Themes· with·Style¬
2. @crafty @chrisbanes
3. <style name="Widget.MyStyle"> <item name="key">value!"item> !"style>
4. <style name="Widget.MyStyle"> <item name="key">value!"item> !"style> Untyped
5. Understanding themes & styles
6. <style name="Widget.MyStyle"> <item name="key">value!"item> !"style>
7. <style name="Widget.MyStyle"> <item name="key">value!"item> !"style>
8. styles themes vs
9. styles themes Map<view attribute, value> Map<theme attribute, value>
10. <style name="Widget.Plaid.InlineActionButton" parent="…"> <item name="android:gravity">center_horizontal!"item> <item name="android:textAppearance">@style/TextAppearance.CommentAuthor!"item> <item name="android:drawablePadding">@dimen/spacing_micro!"item> !"style> styles
11. styles View Attributes <style name="Widget.Plaid.InlineActionButton" parent="…"> <item name="android:gravity">center_horizontal!"item> <item name="android:textAppearance">@style/TextAppearance.CommentAuthor!"item> <item name="android:drawablePadding">@dimen/spacing_micro!"item> !"style>
12. styles Resources <style name="Widget.Plaid.InlineActionButton" parent="…"> <item name="android:gravity">center_horizontal!"item> <item name="android:textAppearance">@style/TextAppearance.CommentAuthor!"item> <item name="android:drawablePadding">@dimen/spacing_micro!"item> !"style>
13. <style name="Widget.Plaid.InlineActionButton" parent="…"> <item name="android:gravity">center_horizontal!"item> <item name="android:textAppearance">@style/TextAppearance.CommentAuthor!"item> <item name="android:drawablePadding">@dimen/spacing_micro!"item> !"style> styles Attribute Boolean Color Dimension Drawable Float Font Fraction String Resources
14. <style name="Plaid" parent="…"> <item name="colorPrimary">@color/teal_500!"item> <item name="colorSecondary">@color/pink_200!"item> <item name="android:windowBackground">@color/background!"item> !"style> themes
15. themes Theme Attributes <style name="Plaid" parent="…"> <item name=" z colorPrimary ">@color/teal_500!"item> <item name="colorSecondary">@color/pink_200!"item> <item name="android:windowBackground">@color/background!"item> !"style>
16. <resources> <attr name=" colorPrimary " format="color"!# <attr name="actionBarSize" format="dimension"!# !"resources> themes attributes
17. <style name="Widget.MaterialComponents.Toolbar.Primary"> <item name="android:elevation">@dimen/design_appbar_elevation!"item> <item name="android:background">?attr/ colorPrimary !"item> <item name="titleTextColor">?attr/colorOnPrimary!"item> !"style> themes attributes
18. <style name="Widget.MaterialComponents.Toolbar.Primary"> <item name="android:elevation">@dimen/design_appbar_elevation!"item> <item name="android:background">?attr/ colorPrimary !"item> <item name="titleTextColor">?attr/colorOnPrimary!"item> !"style> themes attributes Value for current theme
19. :library ?attr/colorPrimary
20. :library ?attr/colorPrimary colorPrimary = !!" :app
21. :library ?attr/colorPrimary colorPrimary = !!" :app colorPrimary = !!" Theme.App Theme.App.Pro
22. :library ?attr/colorPrimary colorPrimary :app Theme.App Theme.App.Pro colorPrimary colorPrimary colorPrimary
23. Widget.RadioButton Widget.RadioButton.Dark Widget.RadioButton.Pro Widget.RadioButton.Pro.Dark Widget.CheckBox Widget.CheckBox.Dark Widget.CheckBox.Pro Widget.CheckBox.Pro.Dark Widget.Switch Widget.Switch.Dark Widget.Switch.Pro Widget.Switch.Pro.Dark Widget.Button Widget.Button.Dark Widget.Button.Pro Widget.Button.Pro.Dark
24. Widget.Button Widget.Button.Dark Widget.Button.Pro Widget.Button.Pro.Dark Widget.Switch Widget.Switch.Dark Widget.Switch.Pro Widget.Switch.Pro.Dark Widget.CheckBox Widget.CheckBox.Dark Widget.CheckBox.Pro Widget.CheckBox.Pro.Dark Widget.RadioButton Widget.RadioButton.Dark Widget.RadioButton.Pro Widget.RadioButton.Pro.Dark
25. view attributes theme attributes Configuration specific to a single view Semantic variables: provided/varied by theme May be used widely
26. styles themes Map<view attribute, value> Map<theme attribute, value>
27. styles themes Map<view attribute, value> Associated with & applied to single view Map<theme attribute, value> Associated with a Context Applied to a hierarchy Overlays ancestors
28. styles Activity ViewGroup ViewGroup View View View
29. styles Activity ViewGroup View View View ViewGroup <View !!$ style="@style/MyStyle" !#
30. themes Activity ViewGroup View View View ViewGroup <View !!$ android:theme="@style/MyTheme" !#
31. themes Activity ViewGroup View View View ViewGroup <activity !!$ android:theme="@style/Theme.App.Foo"!# <View !!$ android:theme="@style/MyTheme" !#
32. themes Activity ViewGroup View View View ViewGroup
33. themes Activity ViewGroup View View View ViewGroup
34. <ViewGroup !!$ android:theme="@style/ Theme.Owl.Pink "> !!$ <ViewGroup !!$ android:theme="@style/Theme.Owl.Blue"> !!$ themes
35. Theme.Owl.Pink themes <style> <item name="colorPrimary"… <item name="colorSecondary"… !!$
36. Theme.MaterialComponents.Light - Theme.Owl.Pink themes <style> <item name="colorPrimary"… <item name="colorSecondary"… <item name="toolbarStyle"… <item name="materialButtonStyle"… !!$
37. Theme.AppCompat.Light - Theme.MaterialComponents.Light !% Theme.Owl.Pink themes <style> <item name="colorPrimary"… <item name="colorSecondary"… <item name="toolbarStyle"… <item name="materialButtonStyle"… <item name="buttonStyle"… <item name="selectableItemBackground"… !!$
38. Theme.Material.Light - Theme.AppCompat.Light !% Theme.MaterialComponents.Light !!& Theme.Owl.Pink themes <style> <item name="colorPrimary"… <item name="colorSecondary"… <item name="toolbarStyle"… <item name="materialButtonStyle"… <item name="buttonStyle"… <item name="selectableItemBackground"… <item name="textCursorDrawable"… !!$
39. eme.Material.Light Theme.AppCompat.Light Theme.MaterialComponents.Light & Theme.Owl.Pink themes Theme.Material.Light - Theme.AppCompat.Light !% Theme.MaterialComponents.Light !!& Theme.Owl.Blue tyle> <item name="colorPrimary"… <item name="colorSecondary"… <item name="toolbarStyle"… <item name="materialButtonStyle"… <item name="buttonStyle"… <item name="selectableItemBackground"… <item name="textCursorDrawable"… !!$ <style> <item name="colorPrimary"… <item name="colorSecondary"… <item name="toolbarStyle"… <item name="materialButtonStyle"… <item name="buttonStyle"… <item name="selectableItemBackground <item name="textCursorDrawable"… !"style>
40. eme.Material.Light Theme.AppCompat.Light Theme.MaterialComponents.Light & Theme.Owl.Pink themes Theme.Material.Light - Theme.AppCompat.Light !% Theme.MaterialComponents.Light !!& Theme.Owl.Blue tyle> <item name="colorPrimary"… <item name="colorSecondary"… <item name="toolbarStyle"… <item name="materialButtonStyle"… <item name="buttonStyle"… <item name="selectableItemBackground"… <item name="textCursorDrawable"… !!$ <style> <item name="colorPrimary"… <item name="colorSecondary"… <item name="toolbarStyle"… <item name="materialButtonStyle"… <item name="buttonStyle"… <item name="selectableItemBackground <item name="textCursorDrawable"… !"style>
41. themes <style name="ThemeOverlay.Owl.Blue" parent=""> <item name="colorPrimary"… <item name="colorSecondary"… !"style>
42. themes <style name="ThemeOverlay.Owl.Blue" parent=""> <item name="colorPrimary"… <item name="colorSecondary"… !"style> No Parent
43. themes <style name="ThemeOverlay.Owl.Blue" parent=""> <item name="colorPrimary"… <item name="colorSecondary"… !"style>
44. Theme.Material.Light - Theme.AppCompat.Light !% Theme.MaterialComponents.Light !!& Theme.Owl.Pink themes ThemeOverlay.Owl.Blue <style> <item name="colorPrimary"… <item name="colorSecondary"… <item name="toolbarStyle"… <item name="materialButtonStyle"… <item name="buttonStyle"… <item name="selectableItemBackground"… <item name="textCursorDrawable"… !"style> <style name="ThemeOverlay.Owl.Blue" parent=""> <item name="colorPrimary"… <item name="colorSecondary"… !"style>
45. <View !!$ android:theme="@style/ThemeOverlay.MaterialComponents.Dark"!# C R A F T Y T I P
46. val color = ContextCompat.getColor( fragmentContext, R.color.foo ) C R A F T Y T I P
47. val color = ContextCompat.getColor( fragmentContext, R.color.foo ) C R A F T Y T I P
48. val color = ContextCompat.getColor( closestView.context, R.color.foo ) C R A F T Y T I P
49. @ColorInt fun Context.getThemeColor( @AttrRes themeAttrId: Int ): Int { return obtainStyledAttributes( intArrayOf(themeAttrId) ).use { it.getColor(0, Color.MAGENTA) } } C R A F T Y T I P
50. val themedContext = ContextThemeWrapper( context, R.style.ThemeOverlay_Owl_Blue ) val inflater = LayoutInflater.from(themedContext) val view = inflater.inflate(!!$) C R A F T Y T I P
51. styles themes Map<view attribute, value> Associated with & applied to single view Map<theme attribute, value> Associated with a Context Applied to a hierarchy Overlays ancestors
52. styles themes Map<view attribute, value> Associated with & applied to single view Part of view attribute resolution Map<theme attribute, value> Associated with a Context Applied to a hierarchy Overlays ancestors
53. styles <View !!$ android:background="@color/green" style="@style/MyStyle" !# <style name="MyStyle"> <item name="android:background">@color/blue!"item> !"style>
54. styles <View !!$ android:background="@color/green" style="@style/MyStyle" !# <style name="MyStyle"> <item name="android:background">@color/blue!"item> !"style>
55. val ta = context.obtainStyledAttributes(!!$)
56. val ta = context.obtainStyledAttributes(!!$) View Style
57. View Style Default Style
58. BUTTON
59. public Button(Context context, AttributeSet attrs) { this(context, attrs, android.R.attr.buttonStyle); } BUTTON
60. public Button(Context context, AttributeSet attrs) { this(context, attrs, android.R.attr.buttonStyle); } BUTTON
61. public Button(Context context, AttributeSet attrs) { this(context, attrs, android.R.attr.buttonStyle); } BUTTON <item name="buttonStyle">@style/Widget.Material.Light.Button!"item>
62. C R A F T Y T I P <style name="Theme.App"> <item name="toolbarStyle">@style/Widget.App.Toolbar!"item> !!$ Make styling opt out
63. C R A F T Y T I P class MyTextView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, @AttrRes defStyleAttr: Int = 0, @StyleRes defStyleRes: Int = 0 ) : AppCompatTextView(context, attrs, defStyleAttr)
64. C R A F T Y T I P class MyTextView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, @AttrRes defStyleAttr: Int = 0, @StyleRes defStyleRes: Int = 0 ) : AppCompatTextView(context, attrs, defStyleAttr)
65. C R A F T Y T I P class MyTextView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, @AttrRes defStyleAttr: Int = 0, @StyleRes defStyleRes: Int = 0 ) : AppCompatTextView(context, attrs, defStyleAttr)
66. C R A F T Y T I P class MyTextView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, @AttrRes defStyleAttr: Int = android.R.attr.textViewStyle, @StyleRes defStyleRes: Int = 0 ) : AppCompatTextView(context, attrs, defStyleAttr)
67. View Style Default Style
68. View Style Default Style Theme
69. styles themes Map<view attribute, value> Map<theme attribute, value> Lies!
70. View Style Default Style Theme <style name="Theme.App"> <item name="android: background">#ff00ff !"item> !!$
71. View Style Default Style Theme <style name="Theme.App"> <item name="android: forceDarkAllowed">true !"item> !!$ C R A F T Y T I P
72. View Style Default Style Theme
74. Green Style Red Style
75. Green Style Red Style ✓ colorPrimary
76. <Button !!$ style="@style/BluePrimary" !# <style name="BluePrimary"> <item name="colorPrimary">@color/blue!"item> !"style>
77. <Button !!$ app:colorPrimary="@color/blue" !#
78. <Button !!$ android:theme="@style/ThemeOverlay.Blue" !#
79. “Don't bring a style to a theme fight” —@crafty
80. styles themes Map<view attribute, value> Associated with & applied to single view Part of view attribute resolution Map<theme attribute, value> Associated with a Context Applied to a hierarchy Overlays ancestors
81. styles themes <style name="Widget.App.Foo"> <item name="android:background"> ?attr/colorSurface !"item> !!$ <style!# <style name="Theme.App"> <item name="toolbarStyle"> @style/Widget.App.Toolbar !"item> !!$ <style!#
82. Using themes & styles
84. Colors Color tag <resources> <color name="brand_blue">#01579B</color> </resources>
85. <resources> <color name="brand_blue">#01579B</color> </resources> R G B Color tag Colors
86. <resources> <color name="brand_blue">#8001579B</color> </resources> A R G B Color tag Colors
87. <resources> <color name="brand_blue">#01579B</color> </resources> Color tag Colors Easily change the alpha in %
88. <resources> <color name="brand_blue">#01579B</color> </resources> Color tag Colors Modify the color in HSB
89. <resources> <color name="brand_blue">#01579B</color> </resources> Color tag Colors Select a color from the Material palette
90. <resources> <color name="brand_blue">#01579B</color> </resources> Color tag Colors Use the built-in color picker
91. <resources> <color name="brand_blue">#01579B</color> <color name="main_brand_color">
 @color/brand_blue
 </color> </resources> Doesn't need to be in same file Color tag Colors
92. Colors Color state lists Stateful wrapper around colors Use same state system as drawables BUTTON
93. BUTTON Colors Color state lists Stateful wrapper around colors Use same state system as drawables state_pressed = true
94. Colors Color state lists Stateful wrapper around colors Use same state system as drawables BUTTON state_enabled = false
95. Colors Color state lists <selector> <item android:color="@color/brand_color_bright" android:state_checked="true" /> <item android:color="@color/brand_color" /> </selector> res/color/csl_brand_checked.xml
96. Colors Color state lists <selector> <item android:color="@color/brand_color_bright" android:state_checked="true" /> <item android:color="@color/brand_color" /> </selector>
97. Colors Color state lists <selector> <item android:color="@color/brand_color_bright" android:state_checked="true" /> <item android:color="@color/brand_color" /> </selector> Default color
98. Colors Color state lists Tip: order the items from most-specific to least-specific CSL selects the first item which matches the state
99. Colors Color state lists Tip: order the items from most-specific to least-specific CSL selects the first item which matches the state <selector> <item android:color="@color/brand_color_bright" android:state_checked="true" /> <item android:color="@color/brand_color" /> </selector>
100. Colors Color state lists Tip: order the items from most-specific to least-specific CSL selects the first item which matches the state <selector> <item android:color="@color/brand_color" /> <item android:color="@color/brand_color_bright" android:state_checked="true" /> </selector> Will always be selected as it matches all states
101. So why are colors so important?
102. So why are colors so important? They're the basis of (good) styling on Android
105. <style name="Theme.App" parent="…"> <item name="colorPrimary">@color/brand_color</item> <item name="colorPrimaryVariant">@color/brand_color_dark</item> <item name="colorSecondary">@color/hot_pink</item> </style> How does this magic work?
106. <item name="colorAccent">@color/hot_pink</item> BUTTON <Button style="Widget.AppCompat.Button.Colored" />
107. BUTTON <item name="colorAccent">@color/green</item> <Button style="Widget.AppCompat.Button.Colored" />
108. BUTTON <item name="colorAccent">@color/red</item> <Button style="Widget.AppCompat.Button.Colored" />
109. BUTTON <item name="colorAccent">@color/red</item> <Button android:enabled="false" style="Widget.AppCompat.Button.Colored" />
110. <shape android:shape="rectangle" android:tint="@color/btn_colored_background_material"> <corners android:radius="?attr/buttonCornerRadius" /> <solid android:color="@color/white" /> <padding android:left="@dimen/button_padding_horizontal_material" android:top="@dimen/button_padding_vertical_material" android:right="@dimen/button_padding_horizontal_material" android:bottom="@dimen/button_padding_vertical_material" /> </shape>
111. <shape android:shape="rectangle" android:tint="@color/btn_colored_background_material"> <solid android:color="@color/white" /> </shape>
112. <shape android:shape="rectangle" android:tint="@color/btn_colored_background_material"> <solid android:color="@color/white" /> </shape>
113. Drawable tinting Added in API 21 (Lollipop) Tints a solid color using a specified blending mode Can be stateful if using a ColorStateList Supported < API 21 in VectorDrawableCompat and DrawableCompat
114. <shape android:shape="rectangle" android:tint="@color/btn_colored_background_material"> <solid android:color="@color/white" /> </shape> Why fill and tint?
115. Fill != Tint
116. Fill != Tint SRC_IN
117. Fill != Tint Fill (dst) Tint (src) Result #FFFFFFFF SRC_IN #FFFFFFFF null
118. Fill != Tint Fill (dst) Tint (src) Result #FFFFFFFF #FF5384EC SRC_IN #FF5384EC
119. Fill != Tint Fill (dst) Tint (src) Result #FFFF00FF #FF5384EC SRC_IN #FF5384EC
120. Fill != Tint Fill (dst) Tint (src) Result #80FF00FF #FF5384EC SRC_IN #805384EC
121. Fill != Tint Fill (dst) Tint (src) Result #FFFF00FF #805384EC SRC_IN #805384EC
122. Fill != Tint Fill (dst) Tint (src) Result #805384EC SRC_IN #405384EC #80FF00FF
123. Fill != Tint Fill (dst) Tint (src) Result ?attr/colorControlNormal
 #B3FFFFFF SRC_IN #B3FFFFFF #FFFFFF
124. Fill != Tint Fill (dst) Tint (src) Result ?attr/colorControlNormal
 #B3FFFFFF SRC_IN #5AFFFFFF #80FFFFFF
125. Fill != Tint ADD CLEAR DARKEN DST DST_ATOP DST_IN DST_OUT DST_OVER LIGHTEN MULTIPLY OVERLAY SCREEN SRC SRC_ATOP SRC_IN SRC_OUT SRC_OVER XOR
126. Recommendation For drawables with a single color (e.g. icons, backgrounds) 
 
 #1 Fill using a solid color (e.g. black) 
 #2 Tint using your chosen color/attribute
127. <shape android:shape="rectangle" android:tint="@color/btn_colored_background_material"> <solid android:color="@color/white" /> </shape>
128. <shape android:shape="rectangle" android:tint="@color/btn_colored_background_material"> <solid android:color="@color/white" /> </shape> <selector> <item android:state_enabled="false" android:alpha="?attr/disabledAlpha" android:color="?attr/colorButtonNormal" /> <item android:color="?attr/colorAccent" /> </selector>
129. <selector> <item android:state_enabled="false" android:alpha="?attr/disabledAlpha" android:color="?attr/colorButtonNormal" /> <item android:color="?attr/colorAccent" /> </selector>
130. <selector> <item android:state_enabled="false" android:alpha="?attr/disabledAlpha" android:color="?attr/colorButtonNormal" /> <item android:color="?attr/colorAccent" /> </selector> BUTTON @color/red
131. <selector> <item android:state_enabled="false" android:alpha="?attr/disabledAlpha" android:color="?attr/colorButtonNormal" /> <item android:color="?attr/colorAccent" /> </selector> BUTTON 0.26 #D6D7D7 ≈ #43D6D7D7
132. ColorStateList Or use AppCompat: Alpha modulation added in API 21 (android:alpha) Can reference theme attributes from API 23 AppCompatResources.getColorStateList()
133. Single item ColorStateLists Tip <!-- colorOnPrimary * 25% alpha --> <color name="color_on_primary_25">...</color> <!-- colorOnPrimary * 50% alpha --> <color name="color_on_primary_50">...</color> Repeat for any colors you need an alpha variant of
134. Single item ColorStateLists Tip <selector> <item android:alpha="0.25" android:color="?attr/colorOnPrimary" /> </selector> res/color/color_on_primary_25.xml
135. Single item ColorStateLists Tip <selector> <item android:alpha="0.25" android:color="?attr/colorOnPrimary" /> </selector> res/color/color_on_primary_25.xml <selector> <item android:alpha="0.5" android:color="?attr/colorOnPrimary" /> </selector> res/color/color_on_primary_50.xml
136. Drawable tinting
137. Drawable tinting Where do our drawables live?
138. Drawable tinting View Where do our drawables live? s
139. Drawable tinting View tinting
140. View tinting Views can override drawable tints
141. <vector android:tint="?attr/colorControlNormal" android:height="24dp" android:width="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:name="bug" android:fillColor="#FF000000" android:pathData="..." /> </vector> res/drawable/ic_bug.xml
142. View tinting Views can override drawable tints <ImageView app:srcCompat="@drawable/ic_bug" />
143. View tinting Views can override drawable tints <ImageView app:tint="@color/hot_pink" app:srcCompat="@drawable/ic_bug" /> Can also call :
 ImageView.setImageTintList()
144. View tinting Views can override drawable tints <ImageView app:tint="?attr/colorAccent" app:srcCompat="@drawable/ic_bug" /> Can also call :
 ImageView.setImageTintList()
145. Using colors as backgrounds Gotcha <color name="purple_200">...</color> <ImageView android:background="@color/purple_200" /> Internally, the color is wrapped into a ColorDrawable
146. Gotcha <selector> <item android:alpha="0.25" android:color="?attr/colorOnPrimary" /> </selector> <ImageView android:background="@color/on_primary_25" /> res/color/on_primary_25.xml <ImageView android:background="@color/on_primary_25" /> Crash Using colors as backgrounds
147. <selector> <item android:alpha="0.25" android:color="?attr/colorOnPrimary" /> </selector> <ImageView android:background="@drawable/rectangle" app:backgroundTint="@color/on_primary_25" /> res/color/on_primary_25.xml res/drawable/rectangle.xml <shape> <solid android:color="#FFFFFF" /> </shape> Using colors as backgrounds Gotcha
148. BUTTON
149. ACCEPT REJECT Reset Settings This will reset your device to factory settings.
153. T H E M E S & S T Y L E S Organisation
154. T H E M E S & S T Y L E S Organisation Chris' opinionated rules on:
155. Rule #1 Use literal names for resources
156. <resources> <color name="color_primary">...</color> <color name="color_primary_dark">...</color> <color name="color_accent">...</color> </style>
157. <resources> <color name="color_primary">...</color> <color name="color_primary_dark">...</color> <color name="color_accent">...</color> </style> <style name="Theme.App" parent="…"> <item name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryDark">@color/color_primary_dark</item> <item name="colorAccent">@color/color_accent</item> </style> Nein
158. <resources> <color name="color_primary">...</color> <color name="color_primary_dark">...</color> <color name="color_accent">...</color> </resources> Giving semantic meaning to hardcoded values
159. <resources> <color name="brand_blue">...</color> <color name="brand_blue_dark">...</color> <color name="brand_pink">...</color> </resources> Use literal names, relevant to the value
160. <resources> <color name="material_blue_500">...</color> <color name="material_blue_700">...</color> <color name="material_pink_a200">...</color> </resources> Use literal names, relevant to the value
161. Interface vs
 Implementation Resources Colors, Dimensions, etc Themes
162. #1 Use literal names for resources Rule #2 Use consistent style names
163. <style name="AppTheme"> ... </style>d
164. <style name="AppTheme"> ... </style>d <style name="BlueAppTheme" parent="AppTheme"> <item name="colorPrimary">...</item> </style>
165. <style name="Theme.AppName"> ... </style>d <style name="Theme.AppName.Blue"> <item name="colorPrimary">...</item> </style> Implicit inheritance
166. <style name="Toolbar"
 parent="Widget.AppCompat.Toolbar"> <item name="contentInsetStart">...</item> </style>
167. <style name="GreenToolbar"
 parent="Widget.AppCompat.Toolbar"> <item name="android:background">...</item> </style> <style name="Toolbar"
 parent="Widget.AppCompat.Toolbar"> <item name="contentInsetStart">...</item> </style>
168. <style name="Widget.AppName.Toolbar.Green">
 <item name="android:background">...</item> </style> <style name="Widget.AppName.Toolbar"
 parent="Widget.AppCompat.Toolbar"> <item name="contentInsetStart">...</item> </style> Implicit inheritance
169. Widget.AppName.Toolbar.Green Theme.AppName.Blue
170. Widget.AppName.Toolbar.Green Theme.AppName.Blue Style type
171. Widget.AppName.Toolbar.Green Theme.AppName.Blue Group name Could be your app name, or module
172. Widget.AppName.Toolbar.Green Theme.AppName.Blue Sub-group name Mostly applicable to widget styles. What widget is this for?
173. Widget.AppName.Toolbar.Green Theme.AppName.Blue Variant name Used to distinguish variants of main styles
174. <View !!$ style="@style/Theme.AppName.Foo"!#
175. <View !!$ style="@style/Theme.AppName.Foo"!#
176. #1 Use literal names for resources #2 Use consistent names Rule #3 Layer your themes for re-use
177. <style name="Theme.AppName"> ... </style> values/themes.xml
178. <style name="Theme.AppName"> ... <!-- Added in API 27 --> <item name="android:windowLightNavigationBar">true</item> </style> values/themes.xml Something something error API level
179. <style name="Theme.AppName"> <!-- Many many attributes --> <!-- Added in API 27 --> <item name="android:windowLightNavigationBar">true</item> </style> <style name="Theme.AppName"> <!-- Many many attributes --> <!-- Added in API 27 --> <item name="android:windowLightNavigationBar">true</item> </style> values/themes.xml
180. values/themes.xml <style name="Theme.AppName"> <!-- Many many attributes --> <!-- Added in API 27 --> <item name="android:windowLightNavigationBar">true</item> </style> values-v27/themes.xml <style name="Theme.AppName"> <!-- Many many attributes --> <!-- Added in API 27 --> <item name="android:windowLightNavigationBar">true</item> </style>
181. <style name="Theme.AppName"> <!-- Many many attributes --> </style> values/themes.xml <style name="Theme.AppName"> <!-- Many many attributes --> <!-- Added in API 27 --> <item name="android:windowLightNavigationBar">true</item> </style> values-v27/themes.xml We now have multiple copies of the same theme
182. We want re-use as much as possible The ideal solution would be something like: @mixin
183. The only tool we really have is inheritance, which means... Layering This is how AppCompat is built We want re-use as much as possible
184. Platform.Theme.MyApp Use only to set API level specific attributes <style name="Platform.Theme.AppName" parent="Platform.V14.Theme.AppName" /> values/themes.xml <style name="Platform.V27.Theme.AppName" parent="Platform.V14.Theme.AppName"> <!-- Attributes specific to v27 --> </style> values-v27/themes.xml <style name="Platform.V14.Theme.AppName" parent="Theme.MaterialComponents" /> <style name="Platform.Theme.AppName" parent="Platform.V27.Theme.AppName" />
185. Platform.Theme.MyApp Use only to set API level specific attributes <style name="Platform.Theme.AppName" parent="Platform.V14.Theme.AppName" /> values/themes.xml <style name="Platform.V27.Theme.AppName" parent="Platform.V14.Theme.AppName"> <!-- Attributes specific to v27 --> </style> values-v27/themes.xml <style name="Platform.V14.Theme.AppName" parent="Theme.MaterialComponents" /> <style name="Platform.Theme.AppName" parent="Platform.V27.Theme.AppName" />
186. Platform.Theme.MyApp Base.Theme.MyApp Everything common across your themes <style name="Base.Theme.AppName" parent="Platform.Theme.AppName"> <!-- Things common across app --> <item name="textAppearanceHeadline1">...</item> <item name="editTextStyle">...</item> </style> values/themes.xml Usually have one of these
187. Platform.Theme.MyApp Base.Theme.MyApp Entry point Can have multiple of these, but KISS Theme.MyApp <style name="Theme.AppName" parent="Base.Theme.AppName" /> values/themes.xml values-night/themes.xml <style name="Theme.AppName" parent="Base.Theme.AppName"> <!-- Overrides for dark theme --> </style>
188. Theme.MyApp Platform Base.Theme.MyApp Platform Platform Theme.MyApp values-night values Platform.V27 Platform.V21 Platform.V14 values values-v21 values-v27
189. #1 Use literal names for resources #2 Use consistent names #3 Layer your themes for re-use Rule #4 Split files based on purpose
190. <resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.MaterialComponents.Light"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/indigo</item> <item name="colorAccent">@color/indigo</item> <item name="colorControlActivated">?colorPrimary</item> <item name="toolbarStyle">@style/Widget.Toolbar</item> <item name="tabStyle">@style/Widget.IOSched.Tabs</item> <item name="android:textViewStyle">@style/Widget.IOSched.TextView</item> <item name="android:windowBackground">@color/white</item> <item name="android:statusBarColor">@color/status_bar</item> <item name="android:windowLightStatusBar" tools:targetApi="m">true</item> <item name="android:navigationBarColor">@color/indigo_dark</item> <item name="android:textColorTertiary">@color/text_color_tertiary</item> <item name="sessionListKeyline">@dimen/session_keyline</item> <item name="eventFilterViewStyle">@style/Widget.IOSched.EventFilters</item> styles.xml
191. <style name="AppTheme.Speaker" parent="AppTheme.LightNav"> <item name="android:windowSharedElementEnterTransition">@transition/speaker_shared_enter <item name="sessionListKeyline">@dimen/margin_normal</item> </style> <style name="AppTheme.PopupTheme" parent="ThemeOverlay.MaterialComponents.Light" /> <style name="Widget.AppBar" parent="@style/Widget.Design.AppBarLayout"> <item name="popupTheme">@style/AppTheme.PopupTheme</item> <item name="android:background">@color/white</item> <item name="android:elevation">8dp</item> <item name="android:orientation">vertical</item> </style> <style name="Widget.Toolbar" parent="Widget.AppCompat.Toolbar"> <item name="titleTextAppearance">@style/TextAppearance.IOSched.ToolbarTitle</item> <item name="popupTheme">@style/AppTheme.PopupTheme</item> </style> <style name="TextAppearance.IOSched.Body" parent="@style/TextAppearance.AppCompat.Body1"> <item name="android:textColor">?android:textColorSecondary</item> </style> <style name="TextAppearance.IOSched.ToolbarTitle" parent="@style/TextAppearance.Widget.AppCo <item name="android:fontFamily">@font/google_sans</item> styles.xml
192. </style> <style name="Widget.Toolbar" parent="Widget.AppCompat.Toolbar"> <item name="titleTextAppearance">@style/TextAppearance.IOSched.ToolbarTitle</item> <item name="popupTheme">@style/AppTheme.PopupTheme</item> </style> <style name="TextAppearance.IOSched.Body" parent="@style/TextAppearance.AppCompat.Body1"> <item name="android:textColor">?android:textColorSecondary</item> </style> <style name="TextAppearance.IOSched.ToolbarTitle" parent="@style/TextAppearance.Widget.AppCo <item name="android:fontFamily">@font/google_sans</item> </style> <style name="TextAppearance.IOSched.SessionTitle" parent="@style/TextAppearance.AppCompat.Su <item name="android:fontFamily">@font/google_sans</item> <item name="android:textStyle">bold</item> </style> <style name="TextAppearance.IOSched.ListSecondary" parent="@style/TextAppearance.AppCompat.B <item name="android:textColor">?android:textColorSecondary</item> </style> <style name="TextAppearance.IOSched.ReservationStatus" parent="@style/TextAppearance.IOSched styles.xml
193. They've stuck to the rule of keeping each resource type in seperate files styles.xml <style> in styles.xml <dimen> in dimens.xml <string> in strings.xml
194. styles.xml They've stuck to the rule of keeping each resource type in seperate files Not a bad idea, but it quickly leads to huge files
195. Split files based on purpose themes.xml Themes and ThemeOverlays type.xml TextAppearances, text size dimensions styles.xml Widget styles. Only. Easy mode dimens.xml colors.xml strings.xml
196. Split files based on purpose Hard mode themes.xml type.xml styles.xml dimens.xml colors.xml strings.xml shape.xml All resources used for shape appearance sys_ui.xml All booleans, colors used to control system-ui
197. Split files based on purpose Really handy when using qualified overrides
198. #1 Use literal names for resources #2 Use consistent names #3 Layer your themes for re-use #4 Split files based on purpose
199. E X A M P L E Material Design Components
201. Typography Shape Color
203. colorPrimary #0336ff
204. colorSecondaryVariant #ffc000 colorPrimaryVariant #0035c9 colorSecondary #ffde03 colorPrimary #0336ff
205. colorSecondaryVariant #ffc000 colorSecondary #ffde03 colorPrimaryVariant #0035c9 colorPrimary #0336ff
206. colorSurface #ffffff colorSecondaryVariant #ffc000 colorSecondary #ffde03 colorPrimaryVariant #0035c9 colorPrimary #0336ff
207. colorOnSurface #000000 colorOnSecondary #000000 colorOnPrimary #ffffff colorError #b00020 colorSurface #ffffff colorSecondaryVariant #ffc000 colorSecondary #ffde03 colorPrimaryVariant #0035c9 colorPrimary #0336ff
208. colorOnSurface #000000 colorSurface #ffffff colorOnSecondary #000000 colorSecondary #ffde03 colorOnPrimary #ffffff colorPrimary #0336ff colorError #b00020 colorSecondaryVariant #ffc000 colorPrimaryVariant #0035c9
209. <style name="Theme.Owl.Blue" parent="Theme.MaterialComponents.Light"> <item name="colorPrimary">@color/owl_blue_700!"item> <item name="colorPrimaryVariant">@color/owl_blue_800!"item> <item name="colorSecondary">@color/owl_yellow_500!"item> <item name="colorSecondaryVariant">@color/owl_yellow_400!"item> !"style>
210. <style name="Theme.Owl.Blue" parent="Theme.MaterialComponents.Light"> <item name="colorPrimary">@color/owl_blue_700!"item> <item name="colorPrimaryVariant">@color/owl_blue_800!"item> <item name="colorSecondary">@color/owl_yellow_500!"item> <item name="colorSecondaryVariant">@color/owl_yellow_400!"item> !"style>
211. <View !!$ android:background="?attr/colorPrimary"!#
212. <selector> <item android:alpha="0.20" android:color="?attr/colorOnSurface"!# !"selector> C R A F T Y T I P
213. <selector> <item android:alpha="0.20" android:color="?attr/colorOnSurface"!# !"selector> C R A F T Y T I P
215. <item name="textAppearanceHeadline1">@style/TextAppearance.Owl.Headline1!"item> <item name="textAppearanceHeadline2">@style/TextAppearance.Owl.Headline2!"item> <item name="textAppearanceHeadline3">@style/TextAppearance.Owl.Headline3!"item> <item name="textAppearanceHeadline4">@style/TextAppearance.Owl.Headline4!"item> <item name="textAppearanceHeadline5">@style/TextAppearance.Owl.Headline5!"item> <item name="textAppearanceHeadline6">@style/TextAppearance.Owl.Headline6!"item> <item name="textAppearanceSubtitle1">@style/TextAppearance.Owl.Subtitle1!"item> <item name="textAppearanceSubtitle2">@style/TextAppearance.Owl.Subtitle2!"item> <item name=" textAppearanceBody1" >@style/TextAppearance.Owl.Body1!"item> <item name="textAppearanceBody2">@style/TextAppearance.Owl.Body2!"item> <item name="textAppearanceButton">@style/TextAppearance.Owl.Button!"item> <item name="textAppearanceCaption">@style/TextAppearance.Owl.Caption!"item> <item name="textAppearanceOverline">@style/TextAppearance.Owl.Overline!"item>
216. <TextView !!$ android:textAppearance="?attr/ textAppearanceBody1 "!#
217. C R A F T Y T I P
220. <style name="ShapeAppearance.Owl.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent"> <item name="cornerFamily">rounded!"item> <item name="cornerSize">0px!"item> <item name="cornerSizeTopLeft">@dimen/small_comp_tl_radius!"item> !"style>
221. <style name="ShapeAppearance.Owl.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent"> <item name="cornerFamily">rounded!"item> <item name="cornerSize">0px!"item> <item name="cornerSizeTopLeft">@dimen/small_comp_tl_radius!"item> !"style> rounded | cut
222. <item name="shapeAppearanceSmallComponent"> @style/ShapeAppearance.Owl.SmallComponent</item> <item name="shapeAppearanceMediumComponent"> @style/ShapeAppearance.Owl.MediumComponent</item> <item name="shapeAppearanceLargeComponent"> @style/ShapeAppearance.Owl.LargeComponent</item>
223. <style name="ShapeAppearanceOverlay.Owl.Cut" parent=""> <item name="cornerFamily">cut!"item> !"style>
224. <style name="ShapeAppearanceOverlay.Owl.Cut" parent=""> <item name="cornerFamily">cut!"item> !"style> <com.google.android.material.card.MaterialCardView !!$ app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Owl.Cut">
225. <style name="Widget.MaterialComponents.BottomSheet" parent="!!$"> <item name="shapeAppearance"> ?attr/shapeAppearanceLargeComponent!"item> <item name="shapeAppearanceOverlay"> @style/ShapeAppearanceOverlay.MaterialComponents.BottomSheet!"item> !"style>
226. <style name="Widget.MaterialComponents.BottomSheet" parent="!!$"> <item name="shapeAppearance"> ?attr/shapeAppearanceLargeComponent!"item> <item name="shapeAppearanceOverlay"> @style/ShapeAppearanceOverlay.MaterialComponents.BottomSheet!"item> !"style>
227. <style name="Widget.MaterialComponents.BottomSheet" parent="!!$"> <item name="shapeAppearance"> ?attr/shapeAppearanceLargeComponent!"item> <item name="shapeAppearanceOverlay"> @style/ShapeAppearanceOverlay.MaterialComponents.BottomSheet!"item> !"style>
228. <style name="Widget.MaterialComponents.BottomSheet" parent="!!$"> <item name="shapeAppearance"> ?attr/shapeAppearanceLargeComponent!"item> <item name="shapeAppearanceOverlay"> @style/ShapeAppearanceOverlay.MaterialComponents.BottomSheet!"item> !"style> <style name="ShapeAppearanceOverlay.MaterialComponents.BottomSheet" parent=""> <item name="cornerSizeBottomRight">0dp!"item> <item name="cornerSizeBottomLeft">0dp!"item> !"style>
229. val sheetBackground = MaterialShapeDrawable( ShapeAppearanceModel( lessonsSheet.context, R.style.ShapeAppearance_Owl_MinimizedSheet, 0 !( no overlay !) ) ) C R A F T Y T I P
230. val sheetBackground = MaterialShapeDrawable( ShapeAppearanceModel( lessonsSheet.context, R.style.ShapeAppearance_Owl_MinimizedSheet, 0 !( no overlay !) ) ) sheetBackground.interpolation = ...
231. val sheetBackground = MaterialShapeDrawable( ShapeAppearanceModel( lessonsSheet.context, R.style.ShapeAppearance_Owl_MinimizedSheet, 0 !( no overlay !) ) ) sheetBackground.interpolation = ...
234. - <item name="colorPrimary">@color/baseline_purple_500!"item> - <item name="colorSecondary">@color/baseline_purple_600!"item> + <item name="colorPrimary">@color/owl_blue_700!"item> + <item name="colorSecondary">@color/owl_yellow_500!"item> - <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance. - <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance - <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance. + <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance. + <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance + <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance. - <item name="textAppearanceHeadline1">@style/TextAppearance.Baselin - <item name="textAppearanceHeadline2">@style/TextAppearance.Baselin
235. - <item name="colorPrimary">@color/baseline_purple_500!"item> - <item name="colorSecondary">@color/baseline_purple_600!"item> + <item name="colorPrimary">@color/owl_blue_700!"item> + <item name="colorSecondary">@color/owl_yellow_500!"item> - <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance. - <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance - <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance. + <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance. + <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance + <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance. - <item name="textAppearanceHeadline1">@style/TextAppearance.Baselin - <item name="textAppearanceHeadline2">@style/TextAppearance.Baselin j.mp/material-theme-builder
236. E X A M P L E Dark Theme
237. DayNight First, tell AppCompat what mode to use Can be done by calling either: AppCompatDelegate.setDefaultNightMode() getDelegate().setLocalNightMode()
238. <style name="MyTheme" parent="Theme.MaterialComponents"> <item name="colorPrimary"> @color/my_primary </item> </style>
239. <style name="MyTheme" parent="Theme.MaterialComponents.DayNight"> <item name="colorPrimary"> @color/my_primary </item> </style>
240. Job done, right?
241. Job done, right? Not usually
242. Title
243. Title
244. <TextView ... textColor= "#000000" />
245. <TextView ... textColor= "?android:attr/textColorPrimary" /> Always prefer theme attributes for colors
249. <style name="MyTheme" parent="Theme.MaterialComponents.DayNight"> <item name="colorPrimary">@color/indigo_500</item> <item name="colorSecondary">@color/pink_a200</item> </style> <color name="indigo_500">...</color> <color name="pink_a200">...</color>
250. Primary color
251. Primary color ~500 tone in light theme
252. Primary color material.io/tools/color Material Color Tool <= 200 tone in dark theme
253. <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight"> <item name="colorPrimary">@color/indigo_500</item> <item name="colorSecondary">@color/pink_a200</item> </style> <color name="indigo_500">...</color> <color name="indigo_200">...</color> <color name="pink_a200">...</color> What do we set?
254. We need something to alias between the colors <color name="color_primary">@color/indigo_500</color> values/colors.xml <color name="color_primary">@color/indigo_200</color> values-night/colors.xml
255. <resources> <color name="color_primary">...</color> <color name="color_primary_dark">...</color> <color name="color_accent">...</color> </resources> Giving semantic meaning to hardcoded values
256. Theme.MyApp Platform Base.Theme.MyApp Platform Platform Theme.MyApp values-night values Platform.V27 Platform.V21 Platform.V14 values values-v21 values-v27
257. values/themes.xml values-night/themes.xml <style name="Theme.MyApp" parent="Base.Theme.MyApp"> <item name="colorPrimary">@color/indigo_500</item> </style> <style name="Theme.MyApp" parent="Base.Theme.MyApp"> <item name="colorPrimary">@color/indigo_200</item> </style>
258. <style name="Theme.MyApp" parent="Base.Theme.MyApp"> <item name="colorPrimary">@color/indigo_500</item> </style> <style name="Theme.MyApp" parent="Base.Theme.MyApp"> <item name="colorPrimary">@color/indigo_200</item> </style> values/themes.xml values-night/themes.xml
260. Don’t use bright colors for large surfaces because they can emit too much brightness. “
262. colorPrimary colorSurface colorPrimarySurface
263. <resources> <attr name="colorPrimarySurface" format="color" /> <attr name="colorOnPrimarySurface" format="color" /> </resources> values/attrs.xml
264. <resources> <attr name="colorPrimarySurface" format="color" /> <attr name="colorOnPrimarySurface" format="color" /> </resources> values/attrs.xml <style name="Theme.MyApp" parent="Base.Theme.MyApp"> <item name="colorPrimarySurface">?attr/colorPrimary</item> <item name="colorOnPrimarySurface">?attr/colorOnPrimary</item> </style> values/themes.xml values-night/themes.xml <style name="Theme.MyApp" parent="Base.Theme.MyApp"> <item name="colorPrimarySurface">?attr/colorSurface</item> <item name="colorOnPrimarySurface">?attr/colorOnSurface</item> </style>
265. <style name="Widget.Owl.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView.Colored"> <item name="android:background">?attr/colorPrimarySurface</item> </style>
266. <style name="Widget.Owl.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView.Colored"> <item name="android:background">?attr/colorPrimarySurface</item> </style> <style name="Base.Theme.Owl" parent="Platform.Theme.Owl"> <!-- Things common across app --> <item name="bottomNavigationStyle"> @style/Widget.Owl.BottomNavigationView
 </item> </style>
268. TL;DR Understand the difference between themes and styles Prefer theme attributes when referencing resources Tint drawables rather than filling Name your resources consistently Layer your themes to easily vary its contents Use Material Theming to express your brand
269. Nick Butcher @crafty @chrisbanes Chris Banes Thanks! Join us at the Google booth for any questions