Using styles and themes without going crazy

Slide 1

Slide 1 text

Using styles and themes without going crazy Dan Lew

Slide 2

Slide 2 text

• No style • Style     <item name="android:background">#FF0000</item> 

Slide 3

Slide 3 text

When to style • Semantically identical Views • All styled Views should change at once

Slide 4

Slide 4 text

When NOT to style • Single-use styles • Coincidentally using the same attributes    

Slide 5

Slide 5 text

When NOT to style • Single-use styles • Coincidentally using the same attributes    

Slide 6

Slide 6 text

When NOT to style • Single-use styles • Coincidentally using the same attributes    

Slide 7

Slide 7 text

static final int NUM_COLUMNS = 3;    static final int NUM_RETRIES = 3; static final int NUM_THREE = 3;

Slide 8

Slide 8 text

// static final int NUM_COLUMNS = 3;    // static final int NUM_RETRIES = 3;  static final int NUM_THREE = 3;

Slide 9

Slide 9 text

No style? No problem!

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Inheritance

Slide 13

Slide 13 text

• Parent • Explicit child • Implicit child

Slide 14

Slide 14 text

Custody Battle     • Who gets the child? • Choices: • Both • Implicit • Explicit

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Avoid mixing implicit and explicit parenting

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

• Explicit parent -> dotless child • Fake it!    

Slide 20

Slide 20 text

Multiple Styles

Slide 21

Slide 21 text

IMPOSSIBLE …except for TextAppearance! Image source: https://goo.gl/meSNFL

Slide 22

Slide 22 text

TextAppearance Attributes • textColor • textColorHighlight • textColorHint • textColorLink • textSize • textStyle • fontFamily • typeface • textAllCaps • shadowColor • shadowDx • shadowDy • shadowRadius • elegantTextHeight • letterSpacing • fontFeatureSettings

Slide 23

Slide 23 text

TextAppearance • In action • Always inherit TextAppearance!   <item name="android:textColor">#F00</item> 

Slide 24

Slide 24 text

Themes! • Write a whole lot of UX code at once! • Setup defaults for everything! • Activity-level theming! • Conﬁgure system-created Views! • Theme swapping!

Slide 25

Slide 25 text

Themes vs. Styles • Same thing!   <item name="android:background">#FF0000</item>    <item name="android:statusBarColor">@color/blue_200</item>  • Different scope • Different attributes

Slide 26

Slide 26 text

Do not mix up styles and themes

Slide 27

Slide 27 text

Themes in Manifest • Application • Activity

Slide 28

Slide 28 text

Applying to View

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Use AppCompat

Slide 31

Slide 31 text

Use AppCompat • Material on all devices • Baseline themes/styles • Enables View theming pre-Lollipop • …And more!

Slide 32

Slide 32 text

Window Attributes   <item name="android:windowBackground">@color/background</item>  <item name="android:statusBarColor">@color/blue_200</item>  <item name="android:windowFullscreen">true</item> 

Slide 33

Slide 33 text

Color Attributes   <item name="colorPrimary">#F00</item>  <item name="colorPrimaryDark">#0F0</item>  <item name="colorControlNormal">#00F</item> 

Slide 34

Slide 34 text

Default Styles   <item name="buttonStyle">@style/MyButton</item>  <item name="android:spinnerItemStyle">@style/MySpinnerItem</item>    <item name="android:textAppearance">@style/MyText</item>  <item name="android:textAppearanceInverse">@style/MyTextInverse</item> 

Slide 35

Slide 35 text

Resource Attributes   <item name="selectableItemBackground">@drawable/bg</item>   

Slide 36

Slide 36 text

Resource Attributes   <item name="selectableItemBackground">@drawable/bg</item>   

Slide 37

Slide 37 text

Namespacing • Ofﬁcial attributes   <item name="android:colorPrimary">#000</item>  • Custom attributes   <item name="colorPrimary">#000</item>  v21 only appcompat magic

Slide 38

Slide 38 text

Finding Attributes • Most difﬁcult part of themes • Anyone can create attributes • Anything can use attributes

Slide 39

Slide 39 text

Attributes in XML • Look for ?attr or ?android:attr

Slide 40

Slide 40 text

Individual Attributes • Look for resolveAttribute() context.getTheme().resolveAttribute(R.attr.dialogTheme, outValue, true); attribute

Slide 41

Slide 41 text

View Style Attributes • Look for obtainStyledAttributes() TypedArray a = context.obtainStyledAttributes(attrs,  com.android.internal.R.styleable.ImageView, defStyleAttr, defStyleRes); • Investigate TypedArray usage int alpha = a.getInt(com.android.internal.R.styleable.ImageView_drawableAlpha, 255); attribute default

Slide 42

Slide 42 text

What color is what?

Slide 43

Slide 43 text

Debug Color Theme

Slide 44

Slide 44 text

Color By Numbers https://goo.gl/BPNhp1

Slide 45

Slide 45 text

HierarchyViewer

Slide 46

Slide 46 text

Dump Theme

Slide 47

Slide 47 text

Recipe for Sanity • Use AppCompat • Modify theme ﬁrst • Reference theme attributes • Apply themes to Views when necessary • Use styles wisely

Slide 48

Slide 48 text

Resource Qualiﬁers

Slide 49

Slide 49 text

  <item name="android:windowBackground">@color/bg_window</item>    #FF0000      #0000FF

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Qualifier Triangle values/Theme values-v21/Theme Theme.Used qualifier modifications what is actually used

Slide 52

Slide 52 text

Qualifier Diamond values/Theme.Platform values-v21/Theme.Platform Theme.Platform.Used values/Theme attributes for everyone what is actually used qualifier modifications

Slide 53

Slide 53 text

Custom Attributes           <item name="myAttribute">4dp</item>          <item name="android:padding">?attr/myAttribute</item> 

Slide 54

Slide 54 text

Custom Attributes           <item name="myAttribute">4dp</item>          <item name="android:padding">?attr/myAttribute</item> 

Slide 55

Slide 55 text

Custom Attributes           <item name="myAttribute">4dp</item>          <item name="android:padding">?attr/myAttribute</item> 

Slide 56

Slide 56 text

Dynamic Text Appearance myTextView.setTextAppearance(context, R.style.TextAppearance_AppCompat);

Slide 57

Slide 57 text

Dynamic Styles public View(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) themed context layout attributes default style (v21+) default style attribute (from theme, e.g. buttonStyle)

Slide 58

Slide 58 text

Dynamic Styles • Context carries theme • ContextThemeWrapper replaces parts of theme Context themedContext = new ContextThemeWrapper(baseContext, R.style.MyTheme);    // Use in LayoutInflater  View view = LayoutInflater.from(themedContext) .inflate(R.layout.my_layout, null);    // Use in View constructor  View view = new View(themedContext);

Slide 59

Slide 59 text

Dynamic Theming • setTheme() • Call before setContentView() • Otherwise, restart Activity

Slide 60

Slide 60 text

Thank You! • @danlew42 • +DanielLew • http://danlew.net • Color debug theme: https://goo.gl/BPNhp1