Video: https://www.youtube.com/watch?v=zImbxlqptBQ Designers and developers have been afraid of the variety of Android flavors for way too long. Android borrows a lot of concept from the web, and we can use the same techniques to cater to the different OS versions and form factors. Be responsive. Forget about absolute coordinates. Embrace the relative, use resource folders to differentiate among screen sizes, much like CSS media queries. Be progressive. Take advantage of the latest Android functionalities, but gracefully fall back to the basics when you are on older OS versions. Remember the days when not all browsers have javascript? Best of all, you don’t need a huge team to do this. I run a one-person company, and I will show you how I applied these techniques to my app Monkey Write.

1. Supporting Multiple
Android Device Definitions
Chiu-Ki Chan
@chiuki
bit.ly/muland

2. @chiuki@chiuki
So many devices!

3. @chiuki@chiuki
Infinite screen sizes!

4. @chiuki@chiuki
Responsive
+
Progressive

5. Hello World

6. @chiuki

7. @chiuki

8. @chiuki

9. @chiuki

10. @chiuki

11. @chiuki

12. @chiuki

13. Declarative Layout

14. @chiuki

15. @chiuki

16. @chiuki
(x,y)

17. @chiuki
(x,y)

18. @chiuki
Center

19. @chiuki@chiuki
Center
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/start" />

20. @chiuki

21. @chiuki@chiuki
Proportional Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/image1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView
android:id="@+id/image2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

22. @chiuki

23. @chiuki
Divider

24. @chiuki@chiuki
Divider
<LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/black" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

25. @chiuki@chiuki
Divider
<LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@android:color/black" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

26. @chiuki
dp

27. @chiuki
dpDensity-independent pixel

28. @chiuki

29. @chiuki

30. @chiuki@chiuki
res/layout-land
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="@+id/image1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:id="@+id/image2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>

31. @chiuki

32. Resource Folders

33. @chiuki@chiuki
Resource Folders
Type Variation
layout
values
drawable
menu
Language & Region: en, fr, fr-rCA
Screen size: small, large, xlarge, sw320dp, h720dp
Screen orientation: port, land
Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi
Platform version: v4, v11, v14, v21
UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html

34. @chiuki@chiuki
Resource Folders
Type Variation
layout
values
drawable
menu
Language & Region: en, fr, fr-rCA
Screen size: small, large, xlarge, sw320dp, h720dp
Screen orientation: port, land
Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi
Platform version: v4, v11, v14, v21
UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html
res/layout-land/activity_main.xml

35. @chiuki@chiuki
Resource Folders
Type Variation
layout
values
drawable
menu
Language & Region: en, fr, fr-rCA
Screen size: small, large, xlarge, sw320dp, h720dp
Screen orientation: port, land
Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi
Platform version: v4, v11, v14, v21
UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html
res/drawable-hdpi/ic_launcher.png

36. @chiuki@chiuki
Resource Folders
Type Variation
layout
values
drawable
menu
Language & Region: en, fr, fr-rCA
Screen size: small, large, xlarge, sw320dp, h720dp
Screen orientation: port, land
Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi
Platform version: v4, v11, v14, v21
UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html
res/drawable-large-land/splash.png

37. @chiuki
res/drawable-large-land/splash.png

38. @chiuki
res/drawable/splash.xml

39. @chiuki
res/drawable/splash.xml

40. XML drawable

41. @chiuki@chiuki
XML shape
<shape android:shape="rectangle" >
<gradient
android:startColor="#063"
android:endColor="#030"
android:angle="270" />
</shape>

42. @chiuki@chiuki
Gradient

43. @chiuki@chiuki
Gradient

44. @chiuki@chiuki
Pattern

45. @chiuki@chiuki
Tiles

46. @chiuki@chiuki
Tiles

47. @chiuki@chiuki
Tiling background
<bitmap
android:src="@drawable/tile"
android:tileMode="repeat"
android:dither="true" />
res/drawable/background.xml

48. @chiuki@chiuki
<bitmap
android:src="@drawable/tile"
android:tileMode="repeat"
android:dither="true" />
res/drawable/background.xml
tile.png
Tiling background

49. @chiuki@chiuki
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background" />
res/layout/activity_main.xml
res/drawable/background.xml
Tiling background

50. @chiuki@chiuki
Tile mode
clamp
Replicates the edge color
repeat
Repeats the bitmap in both direction
mirror
Repeats with alternating mirror images

51. @chiuki@chiuki
GridView

52. @chiuki@chiuki
Auto fit columns
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="auto_fit"
android:columnWidth="@dimen/workbook_column_width"
android:padding="@dimen/workbook_padding"
android:horizontalSpacing="@dimen/workbook_spacing"
android:verticalSpacing="@dimen/workbook_spacing"
android:scrollbarStyle="outsideOverlay" />

53. @chiuki@chiuki
Auto fit columns
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="auto_fit"
android:columnWidth="@dimen/workbook_column_width"
android:padding="@dimen/workbook_padding"
android:horizontalSpacing="@dimen/workbook_spacing"
android:verticalSpacing="@dimen/workbook_spacing"
android:scrollbarStyle="outsideOverlay" />

54. @chiuki@chiuki
Auto fit columns
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="auto_fit"
android:columnWidth="@dimen/workbook_column_width"
android:padding="@dimen/workbook_padding"
android:horizontalSpacing="@dimen/workbook_spacing"
android:verticalSpacing="@dimen/workbook_spacing"
android:scrollbarStyle="outsideOverlay" />

55. @chiuki@chiuki
<resources>
<dimen name="workbook_padding">8dp</dimen>
<dimen name="workbook_spacing">12dp</dimen>
<dimen name="workbook_column_width">120dp</dimen>
<resources>
res/values/dimens.xml
values/dimen.xml

56. @chiuki@chiuki
values-large/dimen.xml
<resources>
<dimen name="workbook_padding">32dp</dimen>
<dimen name="workbook_spacing">18dp</dimen>
<dimen name="workbook_column_width">180dp</dimen>
<resources>
res/values-large/dimens.xml

57. @chiuki@chiuki
7-inch

58. @chiuki@chiuki
Phone

59. @chiuki@chiuki
Fragments
github.com/codepath/android-master-detail-demo

60. Progressive

61. @chiuki@chiuki
Resource Folders
Type Variation
layout
values
drawable
menu
Language & Region: en, fr, fr-rCA
Screen size: small, large, xlarge, sw320dp, h720dp
Screen orientation: port, land
Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi
Platform version: v4, v11, v14, v21
UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html

62. @chiuki@chiuki
Resource Folders
Type Variation
layout
values
drawable
menu
Language & Region: en, fr, fr-rCA
Screen size: small, large, xlarge, sw320dp, h720dp
Screen orientation: port, land
Screen density: ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi
Platform version: v4, v11, v14, v21
UI mode: car, desk, television, appliance
http://developer.android.com/guide/topics/resources/providing-resources.html

63. @chiuki@chiuki
Ripples

64. @chiuki@chiuki
Ripples

65. @chiuki@chiuki
drawable-v21
<ripple android:color="@color/colorAccent">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorPrimary" />
</shape>
</item>
</ripple>
res/drawable-v21/background.xml

66. @chiuki@chiuki
drawable as default
<selector>
<item android:state_pressed="true"
android:drawable="@color/colorAccent" />
<item android:drawable="@color/colorPrimary" />
</selector>
res/drawable/background.xml

67. @chiuki@chiuki
android:background
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="drawable/background"
android:text="@string/click_me" />

68. @chiuki@chiuki
Progressive

69. @chiuki@chiuki
API level

70. @chiuki@chiuki
Detect API level
android.os.Build.VERSION.SDK_INT

71. @chiuki@chiuki
// Default value
int heapSize = 16;
// Detect OS version
int sdk = Integer.parseInt(Build.VERSION.SDK_INT);
// Progressive enhancement for newer devices
if (sdk >= Build.VERSION_CODES_ECLAIR) {
heapSize = getHeapSize(this);
}
Progressive

72. @chiuki@chiuki
getHeapSize
public int getHeapSize() {
ActivityManager activityManager = (ActivityManager)
getSystemService(Context.ACTIVITY_SERVICE);
return activityManager.getMemoryClass();
}

73. @chiuki@chiuki
Ship new functionality with your app!
Support Library

74. @chiuki
Support Library
Fragment
TaskStackBuilder
LruCache
ViewPager
DrawerLayout
SlidingPaneLayout
Loader
AppCompat
VectorDrawable
RecyclerView

75. @chiuki
AppCompat
Material Design

76. @chiuki
Support library only
RecyclerView

77. Summary

78. @chiuki@chiuki
Summary
Responsive layout
Declarative layout
Density-independent pixels (dp)
Resource folders
XML drawables
Progressive functionality
Resource folders
Version check
Support library
Slides
bit.ly/muland

79. @chiuki@chiuki
Thank you!
Learn more
developer.android.com/training/multiscreen
is.gd/FluidAndroidLayouts
is.gd/BeautifulAndroid
pluralsight.com/authors/chiuki-chan
Stay in touch
tinyletter.com/sqisland
blog.sqisland.com
twitter.com/chiuki
Slides
bit.ly/muland

80. @chiuki@chiuki

81. @chiuki@chiuki
360|AnDev Core Track
• Activities in the Wild: Exploring the Activity
Lifecycle
• Fragments: What are they good for
• Async Task, Threads, Pools and Executors
• Measure, Layout, Draw, Repeat: Custom Views
and ViewGroups
• A Practical Guide to Material Design
implementation for Android Developers
• Libraries I wish I knew about when I started
• Intro to iOS for Android developers

82. @chiuki@chiuki
Discount Code:
DroidCommunity