Downloaded 24 times
Uploaded byIrene Duke
Consistent UI Across Android Devices
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 ConsistentUser Experience Across a Range of Android Devices Irene Duke Senior Android Engineer Prolific Interactive Feb. 3, 2015
- 2. Agenda • Why isconsistent 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 thisimportant?
- 4.
- 5. Screen Size andDensity Fragmentation Source: Google
- 6.
- 7.
- 8. XML Resources • layouts •themes, styles • dimens • drawables • colors • anim, animator, strings, selectors, and more
- 9. Resource Qualifiers • Qualifiersallow 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 • Canbe chained with a dash between qualifiers • Android system finds the “Best Matching” resource at runtime based on the qualifiers
- 11. Resource Qualifiers • screenresolution (dpi): -mdpi, -ldpi, -hdpi, -xhdpi, - xxhdpi, -xxxhdpi (launcher icons only), -tvdpi • orientation: -land • screen size: -small, -large, -sw600dp, -w720dp, - h720dp • SDK version: -v21
- 12.
- 13. Colors • Use thesein 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 independentpixels (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.
- 19.
- 20. Dimens • Use thesein 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 theres/drawables folder
- 22. PNG Drawables • Androidgroups 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 collectionof properties that customise the way a view should be drawn • Set properties such as padding, font size, background color, and much more
- 24.
- 25. Applying Styles Apply thestyle 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 thatare 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
- 28.
- 29.
- 30.
- 31.
- 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 • Releasedby 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 supportlibraries in build.gradle
- 35. Use AppCompat • AllActivities 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.
- 38.
- 39. Preview Pane • Allowsyou to see how your layout will adapt to different configurations • It’s your friend (but sometimes it has bugs)
- 40. Design Time LayoutAttributes (Tools Namespace) • No runtime overhead • All attributes you define in the tools namespace are stripped during the build process
- 41. Using the ToolsNamespace
- 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 arelayered 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 aredrawn 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 weightwith 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 flexiblelayout • Views can be positioned in relation to other views • Let’s take a look at some code
- 49.
- 50. Material Design • AndroidL 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’tre-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 Lookfor 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 systemthat makes it easy to leverage open source solutions
- 54. Calligraphy • A libraryto help with fonts • https://github.com/chrisjenx/Calligraphy
- 55. Material Dialog • AlertDialogis styled differently on different platform versions • https://github.com/afollestad/material-dialogs
- 56. Material EditText • EditTextis 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’tbuilt in to Android • https://github.com/nispok/snackbar
- 59.
- 60. Custom Views • Let’stake a look at some code