Learn to build a consistent user experience across a range of 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?

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