Mastering Android's App Resources

Sep 25-26
#dcnyc17
Aug 24-25
#androidsummit

Transcript

1. Mastering
   Android’s App Resources
   Yash Prabhu
   

   View Slide

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

   View Slide

3. Resources
   @yashvprabhu
   

   View Slide

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

   View Slide

5. Resource Types
   @yashvprabhu
   

   View Slide

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

   View Slide

7. @yashvprabhu
   Drawable
   
   android:state_pressed="true"
   android:drawable="@drawable/button_pressed"/>
   
   
   

   View Slide

8. @yashvprabhu
   Layout
   ...
   android:layout_width="match_parent"
   android:layout_height="match_parent">
   ...
   
   

   View Slide

9. @yashvprabhu
   Mipmap
   

   View Slide

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

    View Slide

11. What are we learning today?
    @yashvprabhu
    

    View Slide

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

    View Slide

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

    View Slide

14. Pixel XL
    @yashvprabhu
    

    View Slide

15. Accessing Resources in xml
    ➢ view_grid_item.xml
    android:layout_gravity="center"
    style="@style/Rectangle"
    android:id="@+id/rectangle"
    android:background="@color/blue"/>
    @yashvprabhu
    

    View Slide

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

    View Slide

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

    View Slide

18. 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
    

    View Slide

19. Pixel XL
    @yashvprabhu
    

    View Slide

20. 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
    

    View Slide

21. @yashvprabhu
    Image Credit
    

    View Slide

22. 24000
    devices
    Open Signal Aug 2015 report
    @yashvprabhu
    

    View Slide

23. 24000
    devices
    Open Signal Aug 2015 report
    #minSdkVersion21
    @yashvprabhu
    

    View Slide

24. 23%
    Android Dashboard
    

    View Slide

25. 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
    

    View Slide

26. Multiple screen support
    using qualifiers
    

    View Slide

27. 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
    

    View Slide

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

    View Slide

29. Material Design - Responsive UI
    @yashvprabhu
    

    View Slide

30. Material Design - Responsive UI
    @yashvprabhu
    

    View Slide

31. material.io/devices
    @yashvprabhu
    

    View Slide

32. material.io/devices
    @yashvprabhu
    

    View Slide

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

    View Slide

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

    View Slide

35. Pixel XL - w600dp breakpoint
    @yashvprabhu
    

    View Slide

36. Pixel XL - sw600dp breakpoint
    @yashvprabhu
    

    View Slide

37. 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
    

    View Slide

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

    View Slide

39. //integers.xml (h720dp)
    
    name="grid_number_of_columns">3
    
    
    @yashvprabhu
    

    View Slide

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

    View Slide

41. Locales
    

    View Slide

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

    View Slide

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

    View Slide

44. View Slide

45. Layout Preview
    @yashvprabhu
    

    View Slide

46. Finding the best match
    

    View Slide

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

    View Slide

48. 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
    

    View Slide

49. 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
    

    View Slide

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

    View Slide

51. 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
    

    View Slide

52. 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
    

    View Slide

53. 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
    

    View Slide

54. 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
    

    View Slide

55. 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
    

    View Slide

56. 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
    

    View Slide

57. 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
    

    View Slide

58. 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
    

    View Slide

59. Identify your breakpoints
    

    View Slide

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

    View Slide

61. Breakpoints - default
    @yashvprabhu
    

    View Slide

62. Breakpoints - 600
    @yashvprabhu
    

    View Slide

63. Breakpoints - 1024
    @yashvprabhu
    

    View Slide

64. Supporting multiple screens!
    

    View Slide

65. What’s new in Android O
    

    View Slide

66. Fonts in Xml
    

    View Slide

67. Create new resource directory
    @yashvprabhu
    

    View Slide

68. 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
    

    View Slide

69. raleway.xml
    xmlns:app="http://schemas.android.com/apk/res-auto">
    android:fontStyle="medium"
    android:fontWeight="400" android:font="@font/raleway_medium"
    app:fontStyle="medium"
    app:fontWeight="400" app:font="@font/raleway_medium"/>
    android:fontStyle="italic" .../>
    
    @yashvprabhu
    

    View Slide

70. Add font to xml
    android:fontFamily="@font/raleway"
    android:text="@string/lorem_ipsum"
    android:textColor="@android:color/black"
    android:textSize="48sp" />
    @yashvprabhu
    

    View Slide

71. Add font to style
    parent="@android:style/TextAppearance.Small">
    @font/raleway
    
    @yashvprabhu
    

    View Slide

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

    View Slide

73. @yashvprabhu
    

    View Slide

74. Downloadable Fonts
    

    View Slide

75. Downloadable Fonts
    

    View Slide

76. AutoSizing TextViews
    

    View Slide

77. 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
    

    View Slide

78. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

84. Fin
    

    View Slide