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?

1. Bust the Android
Fragmentation Myth
Chiu-Ki Chan
@chiuki

2. So many devices!
@chiuki

3. Infinite screen sizes!
@chiuki

4. Responsive
+
Progressive
@chiuki

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. (x,y)
@chiuki

17. (x,y)
@chiuki

18. Center
@chiuki

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

20. @chiuki

21. 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>
@chiuki

22. @chiuki

23. Divider
@chiuki

24. 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>
@chiuki

25. 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>
@chiuki

26. dp
@chiuki

27. dp
Density-independent pixel
@chiuki

28. @chiuki

29. @chiuki

30. 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>
@chiuki

31. @chiuki

32. Resource Folders

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

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

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

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

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

38. res/drawable/splash.xml
@chiuki

39. res/drawable/splash.xml
@chiuki

40. XML drawable

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

42. Gradient
@chiuki

43. Gradient
@chiuki

44. Pattern
@chiuki

45. Tiles
@chiuki

46. Tiles
@chiuki

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

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

49. Tiling background
<bitmap
android:src="@drawable/tile"
android:tileMode="repeat"
android:dither="true" />
res/drawable/background.xml
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background" />
res/layout/activity_main.xml
@chiuki

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

51. GridView
@chiuki

52. 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" />
@chiuki

53. 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" />
@chiuki

54. 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" />
@chiuki

55. dimen
<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
<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
@chiuki

56. 7-inch
@chiuki

57. Phone
@chiuki

58. Progressive

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

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

61. Toggle button
@chiuki

62. layout-v14
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
res/layout/compound_button.xml
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
res/layout-v14/compound_button.xml
@chiuki

63. Include
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<include
android:id="@+id/turbo"
layout="@layout/compound_button" />
<include
android:id="@+id/reset"
layout="@layout/compound_button" />
</LinearLayout>
@chiuki

64. Cast to superclass
CompoundButton turbo = (CompoundButton) findViewById(R.id.turbo);
if (!turbo.isChecked()) {
// Slow down the computer
}
@chiuki

65. API level
@chiuki

66. Detect API level
android.os.Build.VERSION.SDK
String, available from API level 1
android.os.Build.VERSION.SDK_INT
int, available from API level 4
@chiuki

67. Progressive
// Default value
int heapSize = 16;
// Detect OS version
int sdk = Integer.parseInt(Build.VERSION.SDK);
// Progressive enhancement for newer devices
if (sdk >= Build.VERSION_CODES_ECLAIR) {
// Static helper for API level 4 and below
heapSize = HeapSizeGetter.getHeapSize(this);
}
@chiuki

68. Static helper
public abstract class HeapSizeGetter {
public static int getHeapSize(Context context) {
ActivityManager activityManager = (ActivityManager)
context.getSystemService(Context.ACTIVITY_SERVICE);
return activityManager.getMemoryClass();
}
}
@chiuki

69. Progressive
// Default value
int heapSize = 16;
// Detect OS version
int sdk = Integer.parseInt(Build.VERSION.SDK);
// Progressive enhancement for newer devices
if (sdk >= Build.VERSION_CODES_ECLAIR) {
// Static helper for API level 4 and below
heapSize = HeapSizeGetter.getHeapSize(this);
}
@chiuki

70. Support libraries
Ship new functionality with your app!
@chiuki

71. Official Support Library
Fragment
ViewPager
SlidingPaneLayout
DrawerLayout
Loader
LruCache
TaskStackBuilder
@chiuki

72. Community Support Libraries
•
•
•
•
Action Bar Sherlock
View Pager Indicator
Nine Old Android
Holo Everywhere
@chiuki

73. View Pager Indicator
@chiuki

74. Summary

75. Summary
Responsive layout
Declarative layout
Density-independent pixels (dp)
Resource folders
XML drawables
Progressive functionality
Resource folders
Version check
Support libraries
@chiuki

76. Thank you!
Learn more
http://pluralsight.com/courses/android-layout-fundamentals
http://is.gd/FluidAndroidLayouts
http://is.gd/BeautifulAndroid
Stay in touch
http://eepurl.com/lR5uD
http://blog.sqisland.com
http://twitter.com/chiuki
@chiuki