Slide 1

Slide 1 text

THEMING IN ANDROID Using Material

Slide 2

Slide 2 text

Pabi Moloi @pabiforbes peckishpabi.co.za Android Engineer, DVT

Slide 3

Slide 3 text

Theming In Android Color Typography Style Theme

Slide 4

Slide 4 text

What is theming and why is it important?

Slide 5

Slide 5 text

● A theme is a unifying idea and theming is designing or bringing that idea to life to an object or space ● Create a holistic look and feel

Slide 6

Slide 6 text

Why is it important? ● Create a memorable and meaningful experience ● Create reusable set of attributes to apply to your entire app

Slide 7

Slide 7 text

DeSiGn iS fOr Ui DeSiGnErS, aS lOnG aS iT wOrKs!

Slide 8

Slide 8 text

Consistency With regard to mobile apps, consistency is: ● Visual Consistency ● Functional Consistency ● External Consistency -Smashing Magazine

Slide 9

Slide 9 text

Visual Consistency “Typefaces, buttons, and labels need to be consistent across the app” -Smashing Magazine

Slide 10

Slide 10 text

Material Components "com.google.android.material:material:$material_version

Slide 11

Slide 11 text

Theming In Android Color Typography Style Theme

Slide 12

Slide 12 text

Theming In Android Blog Theming In Android Blog

Slide 13

Slide 13 text

Theming In Android Blog Theming In Android Blog

Slide 14

Slide 14 text

Theming In Android Blog

Slide 15

Slide 15 text

Theming In Android Blog

Slide 16

Slide 16 text

So how should we ideally name our colors?

Slide 17

Slide 17 text

Well, colours have names...

Slide 18

Slide 18 text

Parmesan

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Material Color Tool

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

#f9a825 #ffd95a #c17900 #ffffff #ffffff #25cccccc #ffffff #000000

Slide 25

Slide 25 text

#f9a825 #ffd95a #c17900 #ffffff #ffffff #25cccccc #ffffff #000000

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Give colors their names...

Slide 28

Slide 28 text

#d32f2f #F9A825 #ffd95a #c17900 #ffffff #25CCCCCC #000000

Slide 29

Slide 29 text

<item name="colorPrimary">@color/mustard</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryVariant">@color/dark_mustard</item> <item name="colorAccent">@color/red</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item>

Slide 30

Slide 30 text

“On” Colours

Slide 31

Slide 31 text

colorOnPrimary colorOnSecondary colorOnError colorOnBackground

Slide 32

Slide 32 text

UpLabs

Slide 33

Slide 33 text

Recap ● Give colors names, which helps in the reduction of duplication. ● “On” colours are usually used for iconography, text, and strokes

Slide 34

Slide 34 text

Theming In Android Color Typography Style Theme

Slide 35

Slide 35 text

Typography ● Headline ● Subtitle ● Body ● Caption ● Button ● Overline

Slide 36

Slide 36 text

Typography Attributes Headline : ● textAppearanceHeadline1 ● textAppearanceHeadline2 ● textAppearanceHeadline3 ● textAppearanceHeadline4 ● textAppearanceHeadline5 ● textAppearanceHeadline6

Slide 37

Slide 37 text

Typography Headline :

Slide 38

Slide 38 text

Typography Attributes Subtitle : ● textAppearanceSubtitle1 ● textAppearanceSubtitle2

Slide 39

Slide 39 text

Typography Subtitle :

Slide 40

Slide 40 text

Typography Attributes Body : ● textAppearanceBody1 ● textAppearanceBody2

Slide 41

Slide 41 text

Typography Body :

Slide 42

Slide 42 text

Typography Attributes Button : ● textAppearanceButton

Slide 43

Slide 43 text

Typography Attributes Caption : ● textAppearanceCaption

Slide 44

Slide 44 text

Typography Attributes Overline : ● textAppearanceOverline

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

...

Slide 47

Slide 47 text

<item name="android:letterSpacing">0</item> ...

Slide 48

Slide 48 text

<item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> ...

Slide 49

Slide 49 text

<item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> ...

Slide 50

Slide 50 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 51

Slide 51 text

Recap ● Typography is not just about choosing a typeface ● Material Design type scale has a range of styles for you to use ● Google Fonts is an awesome place to find open source fonts

Slide 52

Slide 52 text

Theming In Android Color Typography Style Theme

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Font Color Font Size Background Colour Padding MinHeight MinWidth ...

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

<item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">14sp</item> <item name="android:textStyle">normal</item>

Slide 60

Slide 60 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 61

Slide 61 text

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

. . .

Slide 64

Slide 64 text

<item name="backgroundTint">@color/mustard</item> <item name="tint">@color/white</item> <item name="rippleColor">@color/white</item>

Slide 65

Slide 65 text

Slide 66

Slide 66 text

Recap ● To customize a look of a view, create a style, and apply that style to it ● Refer to documentation to see what attributes are available to style a particular view

Slide 67

Slide 67 text

Theming In Android Color Typography Style Theme

Slide 68

Slide 68 text

...is a type of style that is applied to: ● The entire application ● Activity ● View Hierarchy

Slide 69

Slide 69 text

<item name="colorPrimary">@color/mustard</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryVariant">@color/yellow</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 70

Slide 70 text

<item name="colorPrimary">@color/blue</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryVariant">@color/light_blue</item> <item name="colorAccent">@color/green</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item> . . .

Slide 71

Slide 71 text

Recap ● Avoid hardcoding values ● Create a theme for styles that are consistent throughout the app

Slide 72

Slide 72 text

Dark Theme

Slide 73

Slide 73 text

● Uses dark grey as the primary surface color for components ○ Helps in reducing eye strain ● Elevated surfaces are illuminated ○ The higher the elevation, the lighter the surface ● “On” colours on a dark theme are white and black

Slide 74

Slide 74 text

Dark Theme Benefits ● Power usage reduction ● Makes it easier to use your device in a low light environment ● Improves visibility for users with low vision

Slide 75

Slide 75 text

Dark Theme - Parmesan

Slide 76

Slide 76 text

...

Slide 77

Slide 77 text

...

Slide 78

Slide 78 text

AppCompatDelegate.setDefaultNightMode (AppCompatDelegate.MODE)

Slide 79

Slide 79 text

Modes: ● MODE_NIGHT_FOLLOW_SYSTEM ● MODE_NIGHT_YES ● MODE_NIGHT_NO ● MODE_NIGHT_AUTO_BATTERY

Slide 80

Slide 80 text

Honourable Mention: ● MODE_NIGHT_AUTO_TIME ● MODE_NIGHT_AUTO

Slide 81

Slide 81 text

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) AppCompatDelegate.setDefaultNightMode( AppCompatDelegate.MODE_NIGHT_YES) setContentView(R.layout.activity_home) }

Slide 82

Slide 82 text

Recap ● DayNight can be applied to both AppCompat and MaterialComponents ● Do not hardcode values ● Dark theme uses grey instead of black ● Keep accessibility in mind

Slide 83

Slide 83 text

What to keep at the back of your mind: Android’s Style Hierarchy

Slide 84

Slide 84 text

Android’s Style Hierarchy 1. Applying character- or paragraph-level styling via text spans to textview-derived classes 2. Applying attributes programmatically 3. Applying individual attributes directly to a View 4. Applying a style to a View

Slide 85

Slide 85 text

Android’s Style Hierarchy 5. Default styling 6. Applying a theme to a collection of Views, an activity, or your entire app 7. Applying certain View-specific styling, such as setting a textappearance on a textview

Slide 86

Slide 86 text

Thank You!

Slide 87

Slide 87 text

Resources ● Material Design ○ https://material.io/ ● Android Developer Guide User Interface ○ https://developer.android.com/guide/topics/ui ● Smashing Magazine ○ https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile -app-design/