Your SlideShare is downloading. ×
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Bust the Android Fragmentation Myth
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Bust the Android Fragmentation Myth

20,758

Published on

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 …

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?

Published in: Technology, News & Politics
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
20,758
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
141
Comments
0
Likes
15
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×