×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Pabi Moloi @pabiforbes www.peckishpabi.co.za Android Engineer
Slide 2
Slide 2 text
Theming In Android Color Typography Style Theme
Slide 3
Slide 3 text
What is theming, and why is it important?
Slide 4
Slide 4 text
Material Components implementation "com.google.android.material:material:$material_version"
Slide 5
Slide 5 text
Theming In Android Color Typography Style Theme
Slide 6
Slide 6 text
Theming In Android Blog
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
So how should we ideally name our colors?
Slide 11
Slide 11 text
Colors have names :)
Slide 12
Slide 12 text
Parmesan
Slide 13
Slide 13 text
Material Color Tool
Slide 14
Slide 14 text
#f9a825 #ffd95a #c17900 #ffffff #ffffff #25cccccc #ffffff #000000
Slide 15
Slide 15 text
#f9a825 #ffd95a #c17900 #ffffff #ffffff #25cccccc #ffffff #000000
Slide 16
Slide 16 text
Give colors their names!
Slide 17
Slide 17 text
#d32f2f #F9A825 #ffd95a #c17900 #ffffff #25CCCCCC #000000
Slide 18
Slide 18 text
<item name="colorPrimary">@color/mustard</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryDark">@color/dark_mustard</item> <item name="colorAccent">@color/red</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item>
Slide 19
Slide 19 text
Recap - Color - Give colors names, which helps in the reduction of duplication. - “On” colours are usually used for iconography, text, and strokes
Slide 20
Slide 20 text
Theming In Android Color Typography Style Theme
Slide 21
Slide 21 text
Typography
Slide 22
Slide 22 text
Attributes ● textAppearanceHeadline1 - textAppearanceHeadline6 ● textAppearanceSubtitle1 - textAppearanceSubtitle2 ● textAppearanceBody1 - textAppearanceBody2 ● textAppearanceCaption ● textAppearanceButton ● textAppearanceOverline
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
...
Slide 25
Slide 25 text
<item name="android:letterSpacing">0</item> ...
Slide 26
Slide 26 text
<item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> ...
Slide 27
Slide 27 text
<item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> ...
Slide 28
Slide 28 text
<item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> <item name="android:textStyle">normal</item>
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Theming In Android Color Typography Style Theme
Slide 31
Slide 31 text
Style
Slide 32
Slide 32 text
Font Color Font Size Background Colour Padding MinHeight MinWidth ...
Slide 33
Slide 33 text
<item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> <item name="android:textStyle">normal</item>
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
...
Slide 36
Slide 36 text
<item name="backgroundTint">@color/mustard</item> <item name="tint">@color/white</item> <item name="rippleColor">@color/white</item>
Slide 37
Slide 37 text
Slide 38
Slide 38 text
Theming In Android Color Typography Style Theme
Slide 39
Slide 39 text
Theme
Slide 40
Slide 40 text
...is a type of style that is applied to: ● The entire application ● Activity ● View Hierarchy
Slide 41
Slide 41 text
<item name="colorPrimary">@color/mustard</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryVariant">@color/yellow</item> <item name="colorPrimaryDark">@color/dark_mustard</item> <item name="colorAccent">@color/red</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item> <item name="android:windowBackground">@color/white</item>
Slide 42
Slide 42 text
Dark Theme
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
...
Slide 45
Slide 45 text
...
Slide 46
Slide 46 text
AppCompatDelegate.setDefaultNightMode (AppCompatDelegate.MODE)
Slide 47
Slide 47 text
Modes: ● MODE_NIGHT_FOLLOW_SYSTEM ● MODE_NIGHT_YES ● MODE_NIGHT_NO ● MODE_NIGHT_AUTO_BATTERY
Slide 48
Slide 48 text
Honourable Mention: ● MODE_NIGHT_AUTO_TIME ● MODE_NIGHT_AUTO
Slide 49
Slide 49 text
What to keep at the back of your mind: Android’s Style Hierarchy
Slide 50
Slide 50 text
View Specific Styling Theme Default Styling Applying a style to a view Setting individual attributes
Slide 51
Slide 51 text
Programmatically applying attributes Character/Paragraph styling