$30 off During Our Annual Pro Sale. View Details »

Mastering Android's App Resources

Mastering Android's App Resources

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

Yash Prabhu

August 24, 2017
Tweet

More Decks by Yash Prabhu

Other Decks in Technology

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