Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Styles, Themes, Material Theming, Oh My!

Anita
March 27, 2019

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.

Anita

March 27, 2019
Tweet

More Decks by Anita

Other Decks in Technology

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