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.

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?

4. SDK Fragmentation
Source: Google

5. Screen Size and Density
Fragmentation
Source: Google

6. Device Manufacturer
Fragmentation

7. XML Resources and
Qualifiers

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

12. Colors
colors.xml in res/values

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

28. Material (AppCompat)
Theme

29. themes.xml
in the res/values folder

30. themes.xml
in AndroidManifest

31. Backwards
Compatibility

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

49. 3rd Party Libraries

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