Styles, Themes, Material Theming, Oh My!

Slide 1

Slide 1 text

Styles,  Themes,  Material Theming,   Oh My! Anita Singh @anitas3791

Slide 2

Slide 2 text

Styles,  Themes,  Material Theming,   Oh My! Anita Singh @anitas3791

Slide 3

Slide 3 text

The problem Style Theme TextAppearance ThemeOverlay Material Theming? Default Style? …and they all use the style tag!

Slide 4

Slide 4 text

Style

Slide 5

Slide 5 text

Key-value store, where the key is an attribute What?

Slide 6

Slide 6 text

Speciﬁes the look of a single view What?

Slide 7

Slide 7 text

Example <item name="android:textColor">@color/white</item> <item name="android:fontFamily">@font/cera_pro_bold</item>

Slide 8

Slide 8 text

Example <item name="android:textColor">@color/white</item> <item name="android:fontFamily">@font/cera_pro_bold</item>

Slide 9

Slide 9 text

Example <item name="android:textColor">@color/white</item> <item name="android:fontFamily">@font/cera_pro_bold</item>

Slide 10

Slide 10 text

Example <item name="android:textColor">@color/white</item> <item name="android:fontFamily">@font/cera_pro_bold</item>

Slide 11

Slide 11 text

When? Applies to >1 logically related components

Slide 12

Slide 12 text

TextAppearance

Slide 13

Slide 13 text

Text speciﬁc styling, works at the character level What?

Slide 14

Slide 14 text

Example <item name=“android:textColor”>@color/raspberry</item> <item name=“android:fontFamily”>@font/cera_pro</item>

Slide 15

Slide 15 text

Example <item name=“android:textColor”>@color/raspberry</item> <item name=“android:fontFamily”>@font/cera_pro</item>

Slide 16

Slide 16 text

When? • You have a bloated style with text attributes • You are only styling text at the character level

Slide 17

Slide 17 text

Theme

Slide 18

Slide 18 text

A type of style applied to an app or activity (or view) What?

Slide 19

Slide 19 text

context.setTheme(resId) What?

Slide 20

Slide 20 text

Example <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> …

Slide 21

Slide 21 text

Example Default Style Attribute <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> …

Slide 22

Slide 22 text

Example <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> …

Slide 23

Slide 23 text

Theme attributes everywhere!

Slide 24

Slide 24 text

Theme attributes everywhere!

Slide 25

Slide 25 text

When? • Style child views • Implement a robust design system 

Slide 26

Slide 26 text

ThemeOverlay

Slide 27

Slide 27 text

View-level theming  minSdk 14+ What?

Slide 28

Slide 28 text

ContextThemeWrapper What?

Slide 29

Slide 29 text

Example

Slide 30

Slide 30 text

Example <item name=“colorPrimary">@color/blinkist_green</item>

Slide 31

Slide 31 text

Example

Slide 32

Slide 32 text

When? • Overlay an existing theme by changing only what you need • Invert the theme for a view or view hierarchy

Slide 33

Slide 33 text

Order of Precedence

Slide 34

Slide 34 text

Slide 35

Slide 35 text

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);  …

Slide 36

Slide 36 text

Slide 37

Slide 37 text

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);

Slide 38

Slide 38 text

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);

Slide 39

Slide 39 text

Where the magic happens getTheme().obtainStyledAttributes( set, attrs, defStyleAttr, defStyleRes);

Slide 40

Slide 40 text

Styling Hierarchy View Style Default Style Theme TextAppearance

Slide 41

Slide 41 text

Material Theming

Slide 42

Slide 42 text

What?

Slide 43

Slide 43 text

A library of components, evolution of Design Support Library Material Components

Slide 44

Slide 44 text

Material Component Theme •Theme.MaterialComponents.* •Built on top of AppCompat •Shiny new attributes! •minSdk 14, compileSdk 28+

Slide 45

Slide 45 text

Color theming

Slide 46

Slide 46 text

Color theming colorPrimaryVariant colorPrimary background colorSurface colorOnPrimary colorOnSurface colorSecondary colorOnSecondary

Slide 47

Slide 47 text

Color theming: new attributes .. .. .. .. .. .. .. .. ..

Slide 48

Slide 48 text

Shape theming MaterialShapeDrawable

Slide 49

Slide 49 text

Shape theming

Slide 50

Slide 50 text

New attributes: shape .. .. ..

Slide 51

Slide 51 text

New attributes: shape .. .. ..

Slide 52

Slide 52 text

New attributes: shape <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> .. .. ..

Slide 53

Slide 53 text

New attributes: shape .. .. .. <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>

Slide 54

Slide 54 text

Typography theming

Slide 55

Slide 55 text

New attributes: typography …

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

You won’t believe what happened next…

Slide 59

Slide 59 text

You won’t believe what happened next…

Slide 60

Slide 60 text

You won’t believe what happened next…

Slide 61

Slide 61 text

Migrating to Material Component Theme android:background="@color/blinkist_green"

Slide 62

Slide 62 text

<item name="backgroundTint">@color/button_selector</item> … android:background="@color/blinkist_green" Migrating to Material Component Theme

Slide 63

Slide 63 text

android:background="@color/blinkist_green" Migrating to Material Component Theme <item name="backgroundTint">@color/button_selector</item> … android:background="@color/blinkist_green"

Slide 64

Slide 64 text

Migrating to Material Component Theme <item name="backgroundTint">@color/button_selector</item> … … @style/ButtonStyle … android:background="@color/blinkist_green"

Slide 65

Slide 65 text

Color of button background = colorPrimary Option 2 : theme overlay set on button! Option 3 : materialThemeOverlay set on default style! Migrating to Material Component Theme

Slide 66

Slide 66 text

<item name=“materialThemeOverlay”>@style/ MidnightButtonThemeOverlay</item> … …  @style/ButtonStyle … Migrating to Material Component Theme <item name="colorPrimary">@color/midnight</item>

Slide 67

Slide 67 text

<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> Migrating to Material Component Theme

Slide 68

Slide 68 text

Migrating to Material Component Theme <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>

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Migrating to Material Component Theme

Slide 71

Slide 71 text

to Migrating to Material Component Theme <style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">

Slide 72

Slide 72 text

Color of button text = colorPrimary Migrating to Material Component Theme to <style name="AlertDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">

Slide 73

Slide 73 text

Migrating to Material Component Theme .. @style/ Widget.MaterialComponents.TextInputLayout.OutlinedBox ..

Slide 74

Slide 74 text

Color of selection = colorPrimary Migrating to Material Component Theme .. @style/ Widget.MaterialComponents.TextInputLayout.OutlinedBox ..

Slide 75

Slide 75 text

Bridge Themes Inherits from AppCompat, but deﬁnes the new theme attributes

Slide 76

Slide 76 text

Migrating to Material Component Theme <style name="AppTheme" parent=“Theme.MaterialComponents.Light.NoActionBar.Bridge”> to

Slide 77

Slide 77 text

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!

Slide 78

Slide 78 text

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 Demystiﬁed • Setting Up Material Components Theme For Android • The Components of Material Design

Slide 79

Slide 79 text

Thanks. [email protected] @anitas3791 https:/ /tinyurl.com/styles-material-theming