Consistent UI Across Android Devices
Download as PPTX, PDF5 likes726 views
The document discusses building a consistent user experience across Android devices by leveraging XML resources, styles, themes, and layouts that adapt to different screen sizes. It emphasizes using density-independent pixels (dp) and scale-independent pixels (sp), providing alternate resources for different configurations using qualifiers, and employing the Android support libraries to ensure backwards compatibility. The document also recommends evaluating open source libraries to implement Material Design components not fully supported by the official libraries and frameworks.
Consistent UI Across Android Devices
- 1. Building a Consistent User Experience Across a Range of Android Devices Irene Duke Senior Android Engineer Prolific Interactive Feb. 3, 2015
- 2. Agenda • Why is consistent UI important? • Learn about xml resources such as dimens, drawables, colors, styles, and themes • Learn to use the Android support libraries for backwards compatibility • Learn to create layouts that adapt to different screen sizes • Learn to leverage open source solutions when the Android support libraries fall short • Learn to create re-usable UI components and custom views
- 3. Why is this important?
- 5. Screen Size and Density Fragmentation Source: Google
- 8. XML Resources • layouts • themes, styles • dimens • drawables • colors • anim, animator, strings, selectors, and more
- 9. Resource Qualifiers • Qualifiers allow us to provide alternate resources for different devices and/or configurations • Create a new directory in res/ named in the form <resources_name>-<qualifier> • <resources_name> is the directory name of the corresponding default resources • <qualifier> is a name that specifies an individual configuration for which these resources are to be used
- 10. Resource Qualifiers • Can be chained with a dash between qualifiers • Android system finds the “Best Matching” resource at runtime based on the qualifiers
- 11. Resource Qualifiers • screen resolution (dpi): -mdpi, -ldpi, -hdpi, -xhdpi, - xxhdpi, -xxxhdpi (launcher icons only), -tvdpi • orientation: -land • screen size: -small, -large, -sw600dp, -w720dp, - h720dp • SDK version: -v21
- 13. Colors • Use these in other xml resources by referring to them as @color/color_primary • Use them in code using getResources().getColor(R.color.color_primary)
- 14. DRY (Don’t Repeat Yourself) • Define all colors you want to use in colors.xml • Reference the definition • Use code completion • Less possibility for errors
- 15. dimens.xml • density independent pixels (dp or dip) • scale independent pixels (sp) • never use absolute pixels (px)
- 16. Density Independent Pixels • The Android system scales these at runtime based on the device screen density (pixels per inch) • On an mdpi (~160dpi) screen, 8dp = 8px • ldpi : mdpi : hdpi : xhdpi : xxhdpi 3 : 4 : 6 : 8 : 12
- 17. Scale Independent Pixels • Used for text • The Android system scales these for the current screen density and the user’s system-wide scaling factor for text selected in the Settings app
- 18. dimens.xml in the res/values folder
- 19. dimens.xml in the res/values-w820dp folder
- 20. Dimens • Use these in other xml resources by referring to them as @dimen/text_size_small • Use them in code using getResources() .getDimensionPixelSize(R.dimen.padding_small)
- 21. XML Drawables in the res/drawables folder
- 22. PNG Drawables • Android groups all actual screen densities into six generalized densities: ldpi, mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi • Provide .png assets for each density you want to target to prevent Android scaling images at runtime • If apk size is a concern, provide xxhdpi and mdpi only and let the Android system scale drawables for other devices
- 23. Styles • A collection of properties that customise the way a view should be drawn • Set properties such as padding, font size, background color, and much more
- 24. styles.xml in the res/values folder
- 25. Applying Styles Apply the style in layouts or in themes.xml
- 26. DRY (Don’t Repeat Yourself) • Define styles for common components • Reference the definition • Use code completion • Less possibility for errors
- 27. Themes • Styles that are applied on an application or activity level, usually in the AndroidManifest • You shouldn’t have a ton of themes. Most activities should use a consistent theme. • For backwards compatibility, extend from AppCompat themes in the support libraries
- 29. themes.xml in the res/values folder
- 32. Evolution of Android • Pre-Android 4.0 - Base themes are fully customisable by the device manufacturer • Android 4.0 - Holo Light and Holo Dark themes are available on all devices that have the Google Play store. AppCompat theme available in support library to bring Holo theme to pre-Android 4.0 devices • Android 5.0 - Material Light and Material Dark themes are available on all devices that have the Google Play store. AppCompat theme in support library is updated to Material design
- 33. Support libraries • Released by Google to provide backwards compatibility for some themes, styles, and SDK features • Use them whenever possible to make your app look the same across SDK versions and manufacturers
- 34. Using the support libraries in build.gradle
- 35. Use AppCompat • All Activities should extend from ActionBarActivity • All themes must inherit from Theme.AppCompat • use ActionBar, Toolbar, DrawerLayout, NotificationCompat, MenuItemCompat, Fragment and other APIs from the support library (make sure the import is correct)
- 36. Only in Lollipop • Elevation (z-ordering and shadows) • Ripple effect • New activity transitions like explode and shared element transitions
- 37. Graceful Fallbacks add tools:ignore=“NewApi" in xml or
- 38. Layouts
- 39. Preview Pane • Allows you to see how your layout will adapt to different configurations • It’s your friend (but sometimes it has bugs)
- 40. Design Time Layout Attributes (Tools Namespace) • No runtime overhead • All attributes you define in the tools namespace are stripped during the build process
- 41. Using the Tools Namespace
- 42. Layouts that Adapt • FrameLayout • LinearLayout • RelativeLayout • Never use AbsoluteLayout
- 43. Width and Height • Must be specified for all views and layouts • Use dp, wrap_content, match_parent, and gravity • Never use px
- 44. Gravity • gravity - sets the gravity of the content within the view (or layout) its used on • layout_gravity - sets the gravity of the view (or layout) within its parent • This can be tricky (remember the preview pane is your friend)
- 45. FrameLayout • Views are layered in a frame • Views can be centered or aligned with the edges of the frame using layout_gravity • Let’s take a look at some code
- 46. LinearLayout • Views are drawn one after another, either horizontally or vertically • Weights can be used to change how much space a view gets • Let’s take a look at some code
- 47. LinearLayout • Using weight with LinearLayout causes views to be measured twice during layout. • When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increase exponentially. • Use 0dp instead of wrap_content or match_parent in the direction this view should grow • Flatten the hierarchy with RelativeLayout
- 48. RelativeLayout • Most flexible layout • Views can be positioned in relation to other views • Let’s take a look at some code
- 50. Material Design • Android L is missing implementations for some components like floating action buttons, snackbars, and more. • Support libraries are missing backwards compatibility for styling of some components like alert dialogs, date and time pickers, progress spinners, and more.
- 51. Open Source • Don’t re-invent the wheel • Many Android developers have released open source solutions for the missing or imperfect components • Floating Action Button • Snackbar • Alert Dialog • Edit Text
- 52. What to Look for in an Open Source Library • Lots of stars • Recent activity/releases • Documentation, customisability • Open source license like MIT or Apache • Availability on maven central or other central repository • Doesn’t throw warnings or cause crashes
- 53. Gradle A build system that makes it easy to leverage open source solutions
- 54. Calligraphy • A library to help with fonts • https://github.com/chrisjenx/Calligraphy
- 55. Material Dialog • AlertDialog is styled differently on different platform versions • https://github.com/afollestad/material-dialogs
- 56. Material EditText • EditText is styled differently on different platform versions • https://github.com/afollestad/material-dialogs
- 57. Floating Action Button • Floating action buttons aren’t built in to Android • https://github.com/makovkastar/FloatingActionButto n
- 58. Snackbar • Snackbars aren’t built in to Android • https://github.com/nispok/snackbar
- 59. Re-Usable UI and Custom Views
- 60. Custom Views • Let’s take a look at some code