Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. res -- drawable -- layout -- mipmap -- values --

    colors.xml -- strings.xml -- styles.xml @yashvprabhu
  2. Plenty of resource types res -- drawable -- layout --

    mipmap -- values res -- animator -- anim -- xml -- menu -- raw -- color -- font @yashvprabhu
  3. Simple values -- values -- colors.xml -- strings.xml -- styles.xml

    -- dimens.xml -- bools.xml -- integers.xml -- arrays.xml @yashvprabhu <resources> <color name="color_primary_dark">#e72743 </color> </resources> <string name="log_in">Log in</string> <dimen name="fab_margin_bottom">12dp</dimen> <bool name="is_landscape">false</bool> <integer name="number_columns">2</integer>
  4. Know your resources Design and build for multiple screens Make

    your UI responsive Communicate with stakeholders Learn by example @yashvprabhu
  5. 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
  6. 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
  7. 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
  8. 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
  9. w<N>dp - available width, changes on orientation change (port and

    land) sw<N>dp - smallest width regardless of orientation change Pixel XL - 411w x 731h dp When do I use w<N>dp and sw<N>dp? @yashvprabhu
  10. Locales - strings.xml <resources> <string name="professor">Good news, everyone!</string> <string name="leela">

    Bender, quit destroying the universe! </string> <string name="go_to_grid">Go to Grid</string> </resources>
  11. Locales - strings.xml (hi) <string name="professor">अ छ खबर है, हर

    कोई!</string> <string name="leela"> मांड को न ट करने क को शश करना छोड़ देना </string> <string name="go_to_grid" translatable="false"> Go to Grid </string>
  12. Configuration Qualifier MCC and MNC mcc310, mcc208-mnc00 Language & Region

    en, fr, hi, es, en-rUS Layout Direction ldrtl, ldltr Smallest Width sw<N>dp (sw720dp, sw1024dp) Available width w<N>dp (w600dp) Available height h<N>dp (h960dp) Screen Size small, normal, large, xlarge Screen Aspect long, notlong Round round, notround Wide Color Gamut widecg, nowidecg High Dynamic Range highdr, lowdr
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. Resources & Resource Types Multiple screen support using qualifiers Finding

    the best match Identify your breakpoints What’s new in O @yashvprabhu
  25. References Android App Resources TextView Autosizing Using Fonts in Android

    Device metrics Material Design guidelines Downloadable Fonts
  26. Fin