Mastering Android's App Resources

Slide 1

Slide 1 text

Mastering Android’s App Resources Yash Prabhu

Slide 2

Slide 2 text

Find me here! @yashvprabhu yprabhu.com github.com/yprabhu speakerdeck.com/yprabhu wbdl.com

Slide 3

Slide 3 text

Resources @yashvprabhu

Slide 4

Slide 4 text

res -- drawable -- layout -- mipmap -- values -- colors.xml -- strings.xml -- styles.xml @yashvprabhu

Slide 5

Slide 5 text

Resource Types @yashvprabhu

Slide 6

Slide 6 text

Plenty of resource types res -- drawable -- layout -- mipmap -- values res -- animator -- anim -- xml -- menu -- raw -- color -- font @yashvprabhu

Slide 7

Slide 7 text

@yashvprabhu Drawable

Slide 8

Slide 8 text

@yashvprabhu Layout ...

Slide 9

Slide 9 text

@yashvprabhu Mipmap

Slide 10

Slide 10 text

Simple values -- values -- colors.xml -- strings.xml -- styles.xml -- dimens.xml -- bools.xml -- integers.xml -- arrays.xml @yashvprabhu #e72743 Log in 12dp false 2

Slide 11

Slide 11 text

What are we learning today? @yashvprabhu

Slide 12

Slide 12 text

Know your resources Design and build for multiple screens Make your UI responsive Communicate with stakeholders Learn by example @yashvprabhu

Slide 13

Slide 13 text

Requirements Scrollable grid of items 2 columns in phone - portrait & landscape @yashvprabhu

Slide 14

Slide 14 text

Pixel XL @yashvprabhu

Slide 15

Slide 15 text

Accessing Resources in xml ➢ view_grid_item.xml @yashvprabhu

Slide 16

Slide 16 text

styles.xml <item name="android:layout_marginStart">@dimen/spacing_normal</item> <item name="android:layout_marginEnd">@dimen/spacing_normal</item> <item name="android:layout_marginTop">@dimen/spacing_medium</item> <item name="android:layout_width">160dp</item> <item name="android:layout_height">160dp</item> @yashvprabhu

Slide 17

Slide 17 text

dimens.xml 2dp 4dp 8dp 16dp @yashvprabhu

Slide 18

Slide 18 text

Accessing Resources in code ➢ Activity setContentView(R.layout.activity_grid); RecyclerView recyclerView = findViewById(R.id.recyclerView); recyclerView.setLayoutManager( new GridLayoutManager(this, GRID_NUM_OF_COLUMNS) ); @yashvprabhu

Slide 19

Slide 19 text

Pixel XL @yashvprabhu

Slide 20

Slide 20 text

Requirements Scrollable grid of items 2 columns in phone - portrait & landscape Different layouts for phablets and tablets in portrait and landscape, support for different locales... @yashvprabhu

Slide 21

Slide 21 text

@yashvprabhu Image Credit

Slide 22

Slide 22 text

24000 devices Open Signal Aug 2015 report @yashvprabhu

Slide 23

Slide 23 text

24000 devices Open Signal Aug 2015 report #minSdkVersion21 @yashvprabhu

Slide 24

Slide 24 text

23% Android Dashboard

Slide 25

Slide 25 text

Requirements Scrollable grid of items 2 columns in phone - portrait & landscape Different layouts for phablets and tablets in portrait and landscape, support for different locales... Different layouts for different breakpoints @yashvprabhu

Slide 26

Slide 26 text

Multiple screen support using qualifiers

Slide 27

Slide 27 text

Orientation - port, land Screen Size - xsmall, small, normal, large, xlarge Resolution - physical pixel (px) Density Independent Pixel - virtual pixel (dp) Screen density - ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi (1:2:3:5:6:8) px = dp * (dpi / 160) 240 dp screen, 1 dp = 1.5 px (hdpi) Terminology @yashvprabhu

Slide 28

Slide 28 text

Terminology Scaled Pixel (sp) - preserves a user’s font settings

Slide 29

Slide 29 text

Material Design - Responsive UI @yashvprabhu

Slide 30

Slide 30 text

Material Design - Responsive UI @yashvprabhu

Slide 31

Slide 31 text

material.io/devices @yashvprabhu

Slide 32

Slide 32 text

material.io/devices @yashvprabhu

Slide 33

Slide 33 text

res -- - -- drawable-hdpi -- layout-port-hdpi -- layout-land Config & Qualifiers Table Configurations & Qualifiers @yashvprabhu

Slide 34

Slide 34 text

res -- layout -- layout-w600dp github.com/yprabhu/AppResources Building Responsive UI on multiple screens @yashvprabhu

Slide 35

Slide 35 text

Pixel XL - w600dp breakpoint @yashvprabhu

Slide 36

Slide 36 text

Pixel XL - sw600dp breakpoint @yashvprabhu

Slide 37

Slide 37 text

wdp - available width, changes on orientation change (port and land) swdp - smallest width regardless of orientation change Pixel XL - 411w x 731h dp When do I use wdp and swdp? @yashvprabhu

Slide 38

Slide 38 text

Nexus 7 with w600dp and h720dp and integers.xml @yashvprabhu

Slide 39

Slide 39 text

//integers.xml (h720dp) 3 @yashvprabhu

Slide 40

Slide 40 text

// Activity recyclerView.setLayoutManager( new GridLayoutManager( this, getResources() .getInteger( R.integer.grid_number_of_columns ))); @yashvprabhu

Slide 41

Slide 41 text

Locales

Slide 42

Slide 42 text

Locales - strings.xml Good news, everyone! Bender, quit destroying the universe! Go to Grid

Slide 43

Slide 43 text

Locales - strings.xml (hi) अ छ खबर है, हर कोई! मांड को न ट करने क को शश करना छोड़ देना Go to Grid

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Layout Preview @yashvprabhu

Slide 46

Slide 46 text

Finding the best match

Slide 47

Slide 47 text

res -- - -- drawable-hdpi -- layout-port-hdpi -- layout-land Config & Qualifiers Table Configurations & Qualifiers @yashvprabhu

Slide 48

Slide 48 text

Configuration Qualifier MCC and MNC mcc310, mcc208-mnc00 Language & Region en, fr, hi, es, en-rUS Layout Direction ldrtl, ldltr Smallest Width swdp (sw720dp, sw1024dp) Available width wdp (w600dp) Available height hdp (h960dp) Screen Size small, normal, large, xlarge Screen Aspect long, notlong Round round, notround Wide Color Gamut widecg, nowidecg High Dynamic Range highdr, lowdr

Slide 49

Slide 49 text

Configuration Qualifier Screen Orientation port, land UI mode car, desk, television, appliance, watch, vrheadset Night mode night, notnight Screen pixel density ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi, anydpi, tvdpi Touchscreen type notouch, finger Keyboard availability keysexposed, keyshidden, keyssoft Primary text input method nokeys, qwerty, 12key Navigation key availability navexposed, navhidden Primary non-touch navigation method nonav, dpad, trackball, wheel Platform version v3, v4, v7

Slide 50

Slide 50 text

res -- - -- drawable-hdpi -- drawable-port-hdpi -- layout-small-h600dp (wrong) -- drawable-rES-rEN (wrong) Qualifier rules

Slide 51

Slide 51 text

How does Android find the best match? ➢ Device specifications Screen orientation - port Screen pixel density - xhdpi Screen size - large Screen aspect - notlong Locale - en-rUS @yashvprabhu

Slide 52

Slide 52 text

1. Eliminate qualifiers that contradict device configuration 2. Identify the next qualifier in the table 4. Eliminate directories that do not include this qualifier YES NO Continue until one directory is left 3. Do any resource directories use this qualifier? @yashvprabhu Best Match

Slide 53

Slide 53 text

How does Android find the best match? ➢ Device specifications Screen orientation - port Screen pixel density - xhdpi Screen size - large Screen aspect - notlong Locale - en-rUS res -- layout -- layout-es-large -- layout-notlong -- layout-port -- layout-w720dp

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Identify your breakpoints

Slide 60

Slide 60 text

Identify your breakpoints layout layout-land layout-w600dp layout-w600dp-land layout-w1024 layout-w1024dp-land material.io/devices, Material Design - Responsive UI

Slide 61

Slide 61 text

Breakpoints - default @yashvprabhu

Slide 62

Slide 62 text

Breakpoints - 600 @yashvprabhu

Slide 63

Slide 63 text

Breakpoints - 1024 @yashvprabhu

Slide 64

Slide 64 text

Supporting multiple screens!

Slide 65

Slide 65 text

What’s new in Android O

Slide 66

Slide 66 text

Fonts in Xml

Slide 67

Slide 67 text

Create new resource directory @yashvprabhu

Slide 68

Slide 68 text

Providing Font Resources Download your .ttf file from github.com/google/fonts Add it to fonts resource directory Create a new font family via New → Font resource file Directly add fonts in xml @yashvprabhu

Slide 69

Slide 69 text

raleway.xml @yashvprabhu

Slide 70

Slide 70 text

Add font to xml @yashvprabhu

Slide 71

Slide 71 text

Add font to style <item name="android:fontFamily">@font/raleway</item> @yashvprabhu

Slide 72

Slide 72 text

Add font to code Typeface typeface = getResources().getFont(R.font.raleway); view.setTypeface(typeface); @yashvprabhu

Slide 73

Slide 73 text

@yashvprabhu

Slide 74

Slide 74 text

Downloadable Fonts

Slide 75

Slide 75 text

Downloadable Fonts

Slide 76

Slide 76 text

AutoSizing TextViews

Slide 77

Slide 77 text

Default ➢ Scales uniformly on horizontal and vertical axes android:autoSizeTextType="uniform" ➢ Support library app:autoSizeTextType="uniform" Default dimensions for uniform scaling are minTextSize = 12sp, maxTextSize = 112sp and granularity = 1px @yashvprabhu

Slide 78

Slide 78 text

Granularity ➢ Beware of wrap_content! android:layout_height="160dp" android:autoSizeMinTextSize="48sp" android:autoSizeMaxTextSize="112sp" android:autoSizeStepGranularity="1sp" app:autoSizeMinTextSize="48sp" app:autoSizeMaxTextSize="112sp" app:autoSizeStepGranularity="1sp" @yashvprabhu

Slide 79

Slide 79 text

Preset android:autoSizePresetSizes="@array/autosize_text_sizes" android:autoSizeTextType="uniform" android:layout_height="160dp"

Slide 80

Slide 80 text

Preset ➢ arrays.xml 48sp 64sp 80sp 96sp 112sp

Slide 81

Slide 81 text

Resources & Resource Types Multiple screen support using qualifiers Finding the best match Identify your breakpoints What’s new in O @yashvprabhu

Slide 82

Slide 82 text

References Android App Resources TextView Autosizing Using Fonts in Android Device metrics Material Design guidelines Downloadable Fonts

Slide 83

Slide 83 text

Q&A @yashvprabhu yprabhu.com github.com/yprabhu speakerdeck.com/yprabhu wbdl.com/careers

Slide 84

Slide 84 text

Fin