Android Themes & Styles demystified (Google IO 16)

Themes and styles are the bedrock of styling your Android UI, but do you know how they work? This talk will dive deeper into everything you have ever wanted to know about how styles and themes work together, what attributes really are, and how you can use them to make your styles more manageable.

Transcript

1. Themes & Styles demystified +ChrisBanes @chrisbanes +AlanViverette @alanviverette
2. Quiz time!
3. In what Android version did Theme.Holo appear in? 1. Android Eclair (2.1) 2. Android Honeycomb (3.0) 3. Android Ice Cream Sandwich (4.0) #holoyolo
4. In what Android version did Theme.Holo.DarkActionBar appear? 1. Android Honeycomb (3.0) 2. Android Honeycomb MR2 (3.2) 3. Android Ice Cream Sandwich (4.0)
5. How did selectableItemBackground change in KitKat? 1. Changed to a ripple 2. Changed to monochrome 3. Changed shape
6. From what version can you use android:foreground on a View? 1. Android 1.0 2. Android Ice Cream Sandwich (4.0) 3. Android Marshmallow (6.0)
7. What are Themes and Styles?
8. Themes and Styles They’re technically the same thing Both declared using the <style> tag The only difference between them is how they’re used Themes == Styles used in a special way
9. Themes and Styles At their simplest, are just key-value stores <style name="MyStyle"> <item name="android:background"> @color/blue </item> </style> Key Value
10. Attributes The key to the puzzle
11. Attributes They’re just keys They also declare their value’s format type
12. Attributes format types fraction float boolean color string dimension integer flag enum reference Resource types Special types
13. Attributes Declared in resources: <attr name="background" format="reference|color" />
14. Attributes namespaces All attributes provided by the framework are in the android schema <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background=”...”>
15. Custom attributes You can also create attributes You’re probably using libraries which already do so Important to know that non-Android attributes are global within your app
16. Custom attributes Global namespace All custom attributes are in your app’s schema <ImageView xmlns:app="http://schemas.android.com/apk/res app:customAttr=”...”> /<your_pkg_name>" -auto"
17. Themes vs Styles What’s the difference?
18. Themes Tied to your Context void setTheme(int themeResId); Theme getTheme();
19. Themes Don’t really do anything themselves They’re a big configuration store
20. Default widget styles android:editTextStyle Color values android:textColorPrimary Text Appearance styles android:textAppearanceSmall Window configuration values android:windowActionBar Drawables android:selectableItemBackground android:listChoiceIndicatorSingle Themeception android:actionBarTheme android:dialogTheme
21. Styles A set of values which are used to style a View res/layout/main_activity.xml <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="..." android:background="@drawble/my_drawable" />
22. Styles A set of values which are used to style a View res/values/styles.xml <style name="MyStyle"> <item name="android:background"> @drawble/my_drawable </item> </style>
23. <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="..." /> android:background="@drawble/my_drawable" Styles A set of values which are used to style a View res/layout/main_activity.xml
24. <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="..." /> Styles A set of values which are used to style a View res/layout/main_activity.xml style="@style/MyStyle"
25. Styles Pro-tip Android Studio automates this Long press on a View
26. Creating themes and styles
27. Inheritance Themes can inherit from each other Handy for creating derivative styles Styles overlay each other
28. Inheritance Implicit Through dot notation <style name=”Widget.Material.Button.Colored"> Parent
29. Inheritance Explicit Through parent attribute <style name="MyButtonStyle" parent="Widget.Material.Button.Colored"> Parent
30. Inheritance Gotcha Explicit always wins over implicit <style name="Widget.MyTheme.Button" parent="Widget.Material.Button.Colored"> Parent
31. Styles Can reference values from the theme res/values/styles.xml <style name="MyStyle"> <item name="android:background"> </item> </style> @drawble/my_drawable
32. Styles Can reference values from the theme res/values/styles.xml <style name="MyStyle"> <item name="android:background"> </item> </style> ?android:attr/selectableItemBackground
33. ?android:attr/ Styles Can reference values from the theme Denotes that we’re doing a theme lookup selectableItemBackground
34. ?android:attr/ Styles Can reference values from the theme We’re looking up something within the android namespace selectableItemBackground
35. selectableItemBackground ?android:attr/ Styles Can reference values from the theme We’re looking up an attribute
36. selectableItemBackground ?android:attr/ Styles Can reference values from the theme The name of the attribute we’re looking up
37. Styles Can reference values from the theme ?android: selectableItemBackground selectableItemBackground ?android:attr/
38. Theme.Material Hands-on with themes, styles, and attributes
39. Themes Usually specific to Activity appearance Theme.Material Theme.Material.Dialog Theme.Material.Light.DarkActionBar
40. frameworks/.../res/values/themes_material.xml <!-- Material theme (dark version). --> <style name="Theme.Material"> <item name="colorForeground">@color/foreground_material_dark</item> ... <item name="buttonStyle">@style/Widget.Material.Button</item> <item name="editTextStyle">@style/Widget.Material.EditText</item> <item name="seekBarStyle">@style/Widget.Material.SeekBar</item> ... <item name="listPreferredItemHeight">64dp</item> <item name="listPreferredItemHeightSmall">48dp</item> <item name="listPreferredItemHeightLarge">80dp</item> ... </style>
41. Overlay themes Applied to a section of view hierarchy ThemeOverlay.Material.Light ThemeOverlay.Material.Dark ThemeOverlay.Material.Dialog (API 23+)
42. frameworks/.../res/values/themes_material.xml <!-- Theme overlay that replaces colors with their light versions but Preserves the value of colorAccent, colorPrimary and its variants. --> <style name="ThemeOverlay.Material.Light"> <item name="colorForeground">@color/foreground_material_light</item> <item name="colorForegroundInverse">@color/foreground_material_dark</item> ... <item name="textColorPrimary">@color/primary_text_material_light</item> <item name="textColorPrimaryInverse">@color/primary_text_material_dark</item> ... <item name="colorControlNormal">?attr/textColorSecondary</item> <item name="colorControlHighlight">@color/ripple_material_light</item> ... </style>
44. Text appearances TextAppearance.Material.Title TextAppearance.Material.Body1 TextAppearance.Material.Caption TEXTAPPEARANCE.MATERIAL.BUTTON
45. frameworks/.../res/values/styles_material.xml <!-- Material text appearances. --> <style name="TextAppearance.Material"> <item name="textColor">?attr/textColorPrimary</item> <item name="textColorHint">?attr/textColorHint</item> ... </style> <style name="TextAppearance.Material.Button"> <item name="textSize">@dimen/text_size_button_material</item> <item name="fontFamily">@string/font_family_button_material</item> <item name="textAllCaps">true</item> ... </style>
46. Widget styles • Prefixed with Widget • Implement Material spec • Provide default attributes See ApiDemos for examples
47. frameworks/.../res/values/styles_material.xml <!-- User-adjustable seek bar. --> <style name="Widget.Material.SeekBar"> <item name="progressDrawable">@drawable/seekbar_track_material</item> <item name="indeterminateDrawable">@drawable/seekbar_track_material</item> <item name="thumb">@drawable/seekbar_thumb_material_anim</item> <item name="splitTrack">true</item> ... </style> <!-- A seek bar with tick marks at each progress value. --> <style name="Widget.Material.SeekBar.Discrete"> <item name="tickMark">@drawable/seekbar_tick_mark_material</item> </style>
48. frameworks/.../res/values/styles_material.xml ... <style name="Widget.Material.Light.SeekBar" parent="Widget.Material.SeekBar" /> <style name="Widget.Material.Light.RatingBar" parent="Widget.Material.RatingBar" /> <style name="Widget.Material.Light.RatingBar.Indicator" parent="Widget.Material.RatingBar.Indicator" /> ...
49. Theme colors • Defined by the theme • Allow high-level styling • Ensure consistency For example, ?android:attr/colorAccent
50. frameworks/.../res/values/styles_material.xml <!-- Colored bordered ink button --> <style name="Widget.Material.Button.Colored"> <item name="background"> @drawable/btn_colored_material </item> ... </style>
51. frameworks/.../res/drawable/btn_colored_material.xml <ripple android:color="?android:attr/colorControlHighlight"> <item> <shape android:shape="rectangle" android:tint="@color/btn_colored_bg_material"> <solid android:color="@color/white" /> ... </shape> </item> </ripple>
52. frameworks/.../res/colors/btn_colored_bg_material.xml <!-- The background color of a bordered colored button. --> <selector> <item android:state_enabled="false" android:alpha="?android:attr/disabledAlpha" android:color="?android:attr/colorButtonNormal" /> <item android:color="?android:attr/colorAccent" /> </selector>
53. Theme colors colorForeground colorForegroundInverse colorBackground colorBackgroundFloating
55. frameworks/.../res/colors/switch_track_material.xml <!-- The foreground tint of a switch track. --> <selector ...> <item android:state_enabled="false" android:color="?attr/colorForeground" android:alpha="?attr/disabledAlpha" /> <item android:state_checked="true" android:color="?attr/colorControlActivated" /> <item android:color="?attr/colorForeground" /> </selector>
56. Theme colors textColorPrimary textColorPrimaryInverse textColorSecondary textColorSecondaryInverse
57. Theme colors colorAccent colorPrimary colorPrimaryDark colorControlNormal (defaults to textColorSecondary) colorControlActivated (defaults to colorAccent)
59. Styling resources Theming and tinting
60. Drawables Support ColorStateList and theme attributes since API 21 <ripple android:color="?android:attr/colorControlHighlight"/> <shape android:shape="..."> <solid android:color="@color/selectorWithFocusedState"/> </shape>
61. ColorStateLists Support theme attributes since API 22 <selector> <item android:state_enabled="false" android:color="?attr/colorControlActivated" android:alpha="?android:attr/disabledAlpha"/> <item android:color="?attr/colorControlActivated"/> </selector>
62. ColorStateLists AppCompat also supports this in v24.0 AppCompatResources.getColorStateList()
63. View tinting Since API 21, most views support tinting drawables from layout XML or at run-time
64. View tinting: Switch android:thumbTint android:thumbTintMode android:trackTint android:trackTintMode Switch.setThumbTintList(ColorStateList) Switch.setThumbTintMode(PorterDuff.Mode)
65. TextView Style using TextAppearance Encapsulates text styling android:textAppearance TextView.setTextAppearance(int)
66. Day + Night
67. -night qualifier Resource qualifier like -land or -sw720dp Set when device is in Night mode Simplifies swapping light & dark resources
68. res/values-night/styles.xml <style name=”DayNightTheme” parent=”Theme.Material” /> res/values/styles.xml <style name="DayNightTheme" parent="Theme.Material.Light" />
69. res/values-night/colors.xml <item name="hardcoded_fg">#ffffffff</item> res/values/colors.xml <item name="hardcoded_fg">#ff000000</item>
71. Theme overlays (aka Themeception)
72. Theme.Material Theme.AppCompat
73. Theme.Material.Light Theme.AppCompat.Light
74. ? Dark Light
75. android:textColor="#FFFFFF" Dark Light Theme.Material.Light Theme.AppCompat.Light
76. Dark Light Theme.Material.Light.DarkActionBar Theme.AppCompat.Light.DarkActionBar
77. Overlay themes Applied to a section of view hierarchy ThemeOverlay.Material.Light ThemeOverlay.Material.Dark ThemeOverlay.Material.Dialog (API 23+) FLASHBACK TO EARLIER...
78. android:theme Allows override theming on a View Theme is applied to that view and any children* Implemented using ContextThemeWrapper * When inflated as XML child or against View.getContext()
79. frameworks/.../android/view/LayoutInflater.java // Apply a theme wrapper, if specified. TypedArray t = context.obtainStyledAttributes( attrs, new int[] { R.attr.theme }); int themeResId = ta.getResourceId(0, 0); if (themeResId != 0) { context = new ContextThemeWrapper( context, themeResId); } t.recycle();
80. (overlay on top of activity theme) ThemeOverlay.Material.Dark Dark Light (base activity theme) Theme.Material.Light
81. frameworks/.../res/layout/screen_action_bar.xml <!-- Layout for a screen with the Action Bar enabled. --> <com.android.internal.widget.ActionBarOverlayLayout android:id="@+id/decor_content_parent" ... android:theme="?attr/actionBarTheme"> <com.android.internal.widget.ActionBarContainer android:id="@+id/action_bar_container" android:layout_width="match_parent" ...
82. frameworks/.../res/values/themes_material.xml <!-- Light theme with a dark action bar. --> <style name="Theme.Material.Light.DarkActionBar"> <item name="actionBarTheme"> @style/ThemeOverlay.Material.Dark.ActionBar </item> <item name="popupTheme"> @style/ThemeOverlay.Material.Light </item> ... </style>
84. android:theme Backwards compatibility Provided through AppCompat: Works back on API 7+ Inheritance of parent theme works on API 11+
85. Common mistakes
86. Incorrect style parent We want to make every EditText use the medium typeface
87. Incorrect style parent <style name="MyEditTextViewStyle"> <item name="android:fontFamily"> sans-serif-medium </item> </style>
88. Incorrect style parent <style name="MyTheme" parent="@andrid:style/Theme.Material"> <!-- Rest of theme --> <item name="android:editTextStyle"> @style/MyEditTextStyle </item> </style>
89. Incorrect style parent Woops, we’ve lost all styling
90. Incorrect style parent <style name="MyEditTextViewStyle" <item name="android:fontFamily"> sans-serif-medium </item> </style> > parent="android:Widget.Material.EditText"> No parent
91. Incorrect style parent Fixed
92. defStyleAttr vs defStyleRes View 4-arg constuctor View(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) obtainStyledAttributes() obtainStyledAttributes (AttributeSet set, int[] attrs, int defStyleAttr, int defStyleRes)
93. defStyleAttr defStyleRes The attr in your theme which points to the default style The resource ID of the default style R.attr.editTextStyle R.style.Widget_Material_EditText
94. Search order when evaluating attribute value: 1. Value in the AttributeSet 2. Value in the explicit style 3. Default style specified in defStyleRes 4. Default style specified in defStyleAttr 5. Base value in this theme Context#obtainStyledAttributes() // values set in layout
95. Search order when evaluating attribute value: 1. Value in the AttributeSet 2. Value in the explicit style 3. Default style specified in defStyleRes 4. Default style specified in defStyleAttr 5. Base value in this theme Context#obtainStyledAttributes() // using style attribute
96. Search order when evaluating attribute value: 1. Value in the AttributeSet 2. Value in the explicit style 3. Default style specified in defStyleRes 4. Default style specified in defStyleAttr 5. Base value in this theme Context#obtainStyledAttributes()
97. Search order when evaluating attribute value: 1. Value in the AttributeSet 2. Value in the explicit style 3. Default style specified in defStyleRes 4. Default style specified in defStyleAttr 5. Base value in this theme Context#obtainStyledAttributes()
98. Search order when evaluating attribute value: 1. Value in the AttributeSet 2. Value in the explicit style 3. Default style specified in defStyleRes 4. Default style specified in defStyleAttr 5. Base value in this theme Context#obtainStyledAttributes() // don’t rely on this
99. View attributes in themes <style name="MyTheme" parent="@style/Theme.AppCompat"> <!-- Yadda --> <item name="android:background">...</item> </style>
100. View attributes in themes <style name="MyTheme" parent="@style/Theme.AppCompat"> <!-- Yadda --> <item name="android:background">...</item> </style> #obtainStyledAttributes() 5. Base value in this theme
101. View attributes in themes Any view which doesn’t have a background set, will use the theme’s value
102. #androidthemesstyles +Chris Banes @chrisbanes +Alan Viverette @alanviverette Thank You!