Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Multi Screen Hell


Published on

This presentation summarizes multiple screen development difficulties, optimizations for different kinds of devices and screen sizes and gives best practices to handle multi screen problems in Android.

Published in: Technology

Multi Screen Hell

  1. 1. Multi Screen Hell DevFest 2013, Ankara Abdullah Cetin CAVDAR / @accavdar
  2. 2. Why Hell?
  3. 3. Manufacturers Acer Asus HTC LG Motorola Samsung Sony ...
  4. 4. Fragmentation
  5. 5. Device Types 11.868 distinct Android devices seen in 2013 Open Signal Fragmentation Report 2013
  6. 6. Phones
  7. 7. Tablets
  8. 8. Laptops
  9. 9. TV
  10. 10. Set-Top-Box
  11. 11. Consoles
  12. 12. Everywhere Internet of Things (IoT)? Behind the 'Internet of Things' Is Android and It's Everywhere
  13. 13. Size & Resolution 2.8 in, 3.2 in, 3.5 in, 3.6 in, 3.7 in, 4.0 in, 4.3 in, 4.5 in, 4.7 in, 4.8 in, 5.0 in, 6.4 in, 7.0, 9.7 in, 10.1 in, ... 320x240 QVGA, 480x320 HVGA, 800x480 WVGA, 960x540 qHD, 1280x768 WXGA, 1280x720 HD, 1920x1080 HD, ...
  14. 14. API Versions Android Dashboards
  15. 15. Orientation Landscape or Portrait?
  16. 16. Keep Calm and Çare Drogba
  17. 17. Supporting Multiple Screens
  18. 18. Range of Screens Supported sizes: small, normal, large, and xlarge densities: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high)
  19. 19. Size and Density Group
  20. 20. Density-independent Pixel (dp) A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way. The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen (medium density)
  21. 21. Conversion px = dp * (dpi / 160) Ex: on a 240 dpi screen, 1 dp equals 1.5 physical pixels
  22. 22. Density Independence It preserves the physical size of user interface elements when displayed on screens with different densities The system scales dp units as appropriate for the current screen density The system scales drawable resources to the appropriate size, based on the current screen density, if necessary
  23. 23. Bad Good
  24. 24. How to Support Multiple Screens?
  25. 25. Use <supports-screen> Explicitly declare in the manifest which screen sizes your application supports
  26. 26. Provide different layouts for different screen sizes Provide size-specific resources: small, normal, large, and xlarge Ex: layout-xlarge/ Use the sw<N>dp configuration qualifier to define the smallest available width (beginning API 13) Ex: layout-sw600dp/ (at least 600dp screen width)
  27. 27. Provide different bitmaps By default, Android scales drawables (.png, .jpg, .gif and .9.png files) Include alternative versions at different resolutions for different screen densities Density-specific resources are ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high) Ex: drawable-hdpi/
  28. 28. Configuration Qualifiers Usage: <resources_name>-<qualifier> <resources_name> is the standard resource name (such as drawable or layout) <qualifier> is a configuration qualifier (such as hdpi or xlarge)
  29. 29. Layouts & Drawables
  30. 30. Alternative Drawables You only need to provide density-specific drawables (.png, .jpg, .gif or .9.png) Follow the 3:4:6:8 scaling ratio between the four generalized densities 36x36 for low-density 48x48 for medium-density 72x72 for high-density 96x96 for extra high-density See Icon Design Guideline
  31. 31. Relative Sizes
  32. 32. Tablet Layouts for Android 3.2 Android 3.2 introduces a new way to specify resources for more discrete screen sizes
  33. 33. New Size Qualifiers smallestWidth: sw<N>dp Ex: sw600dp Available screen width: w<N>dp Ex: w1024dp Available screen height: h<N>dp Ex: h720dp
  34. 34. Configuration Examples
  35. 35. Best Practises
  36. 36. 1. Use wrap_content, match_parent, or the dp unit for layout dimensions Using wrap_content, match_parent or dp units guarantees that the view is given an appropriate size on the current device screen PS: Use sp for font sizes
  37. 37. 2. Do not use hard-coded pixel values in your application code
  38. 38. 3. Use RelativeLayout It uses relative positioning to lay out its child views For instance, you can specify that a button widget should appear "to the right of" a text widget
  39. 39. 4. Use size and density-specific resources PS: To avoid pre-scaling, put the resource in a resource directory with the nodpi configuration qualifier
  40. 40. 5. Use Nine-patch Bitmaps They are specially formatted PNG files that indicate which areas can and cannot be stretched
  41. 41. Tablets & Handsets
  42. 42. Basic Guideline
  43. 43. 1. Build your activity designs based on Fragments
  44. 44. Fragment Introduced in Android 3.0 (API Level 11) It allows you to separate distinct behavioral components of your UI into separate parts Provides modular UI development PS: Use Android Support Libraries to use fragments in older Android versions
  45. 45. Multiple Fragments, Multiple Activities
  46. 46. Handsets res/layout/main.xml
  47. 47. Tablets res/layout-large/main.xml PS: You should also use the new minimum width size qualifiers in order to more precisely control the screen size
  48. 48. How does it work? If Fragment B is in the layout, Activity A notifies Fragment B to update itself If Fragment B is not in the layout, Activity A starts Activity B (which hosts Fragment B) Important Note: Define a callback interface in each fragment class to communicate with host activity
  49. 49. 2. Use the Action Bar The action bar is a window feature that Action Baridentifies the user location, and Action Barprovides user actions and Action Barnavigation modes Introduced in Android 3.0 (API Level 11). However, you can use t using Android Support Libraries
  50. 50. Why Action Bar? Android system does all the work to gracefully adapt the action bar for different screen sizes
  51. 51. Tips for creating Action Bar
  52. 52. 1. Avoid using the always value Forcing too many action items into the action bar can create a cluttered UI Action items may overlap with other action bar elements such as the title or navigation items Use ifRoom for the android:showAsAction attribute
  53. 53. 2. Provide an Icon Always provide an icon for the action items Use showAsAction="ifRoom|withText"
  54. 54. 3. Provide a Title Always provide a title Users view the title as a tooltip on long-click It is critical for accessibility: Screen readers read aloud the item title even when not visisble
  55. 55. 4. Avoid using custom navigation modes when possible Use the built-in tab and drop-down navigation modes when possible System can adapt their presentation to different screen sizes automatically Ex: stacked action bar in handsets
  56. 56. Split Action Bar Available in Android 4.0 (API level 14) and higher Add uiOptions="splitActionBarWhenNarrow" to your <activity> or <application> manifest element Call setDisplayShowHomeEnabled(false) to disable the application icon in the action bar
  57. 57. Testing
  58. 58. Use Emulator with different configs emulator -avd <avd_name> -scale 96dpi
  59. 59. Android Studio Built in device previews (landscape and portrait modes)
  60. 60. Compatibility Most important characteristic of a compatible device is the ability to install and correctly run an Android .apk file
  61. 61. Apps Availability <uses-feature> in manifest file <uses-feature android:name="android.hardware.bluetooth" /> <uses-feature android:name="" /> The other filters for apps availability in Google Play: <supports-gl-texture> <uses-configuration> <uses-library> <uses-permission> <uses-sdk>
  62. 62. Package Manager Check feature availabilities at runtime PackageManager packageManager = this.getPackageManager(); if (packageManager.hasSystemFeature(PackageManager.FEATURE_NFC)) { Log.d(TAG, "Oh yeah, NFC is available. :)"); } else { Log.d(TAG, "Shit, no NFC. :("); }
  63. 63. Business Reasons List the countries an app is available in Select which carrier’s users are able to access the app
  64. 64. Slides
  65. 65. Questions?
  66. 66. THE END by Abdullah Cetin CAVDAR / @accavdar