Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Google Mobile Design Codelab.pdf

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
JasonNi
October 03, 2013
Technology
150
1

Google Mobile Design Codelab.pdf

JasonNi

October 03, 2013

Transcript

139 slides

  1. XYZReader Codelab +Yuichi Araki +Jan-Felix Schmakeit +Android Developers Making Apps

    Beautiful

  2. Developer Resources Find out more: + Android Developers Android Developers

    on YouTube Android Developers Blog http://developer.android.com

  3. DevByte Series: “Making Apps Beautiful” “Making Apps Beautiful” DevBytes series

    on +Android Developers http://bit.ly/14xbcD0

  4. Codelab Format Slides, Worksheet, Code 6 Checkpoints Ask our friendly

    Teaching Assistants Material: http://bit.ly/18EhXuo

  5. EXAMPLE TREATMENT

  6. Our Agenda 0: Get Set up 1: Modernising and ActionBarCompat

    2: Branding 3: Spacing and Typography 4: Tablet UI 5: Bitmap Performance 6: Threading 7: Image Caching

  7. Prerequisites

  8. Required Downloads IDE for Android Development: http://developer.android.com/sdk •ADT Bundle (Eclipse

    + Android SDK) •Bonus: Android Studio Android SDK, API 18 Support Library (already included in codelab archive)

  9. Required Devices Devices or Emulators: >= Android 4.0 Android 2.3.x

    Tablet

  10. Checkpoint 0: Get set up

  11. Checkpoint 0 Worksheet: Checkpoint 0 http://bit.ly/18EhXuo What you will do:

    •Setup IDE and environment •Import Project •Run the app

  12. Checkpoint 1: Modernising, ActionBarCompat

  13. EXAMPLE TREATMENT FOR DEVELOPERS AndroidManifest.xml: android:targetSdkVersion = 18 <?xml version="1.0"

    encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.xyzreader" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="18" /> ... </manifest>

  14. EXAMPLE TREATMENT FOR DEVELOPERS AndroidManifest.xml: android:targetSdkVersion = 18 Set your

    target SDK <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.xyzreader" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="18" /> ... </manifest>

  15. EXAMPLE TREATMENT FOR DEVELOPERS AndroidManifest.xml: android:targetSdkVersion = 18 Set your

    target SDK <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.xyzreader" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="18" /> ... </manifest>

  16. EXAMPLE TREATMENT FOR DEVELOPERS AndroidManifest.xml: android:targetSdkVersion = 18 <?xml version="1.0"

    encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.xyzreader" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="18" /> ... </manifest>

  17. EXAMPLE TREATMENT

  18. EXAMPLE TREATMENT Holo Theme + (compatible) Action Bar

  19. EXAMPLE TREATMENT

  20. EXAMPLE TREATMENT FOR DEVELOPERS ActionBarCompat in Support Library

  21. EXAMPLE TREATMENT FOR DEVELOPERS ActionBarCompat in Support Library Use ActionBarCompat

  22. EXAMPLE TREATMENT FOR DEVELOPERS Extend ActionBarActivity Use ActionBarCompat public class

    ArticleDetailActivity extends ActionBarActivity FragmentActivity { ... } public class ArticleListActivity extends ActionBarActivity FragmentActivity { ... }

  23. EXAMPLE TREATMENT FOR DEVELOPERS ActionBar options in ActionBarCompat: Use support-callbacks

    Use ActionBarCompat @Override public void onCreateSupportOptionsMenu(Menu menu, MenuInflater inflater) { ... } @Override public boolean onSupportOptionsItemSelected(MenuItem item) { ... }

  24. EXAMPLE TREATMENT FOR DEVELOPERS Menus in ActionBarCompat: Need to define

    your own namespace Use ActionBarCompat In your menu.xml, add the following namespace: <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" > <item android:id="@+id/refresh" android:title="@string/refresh" android:icon="@drawable/ic_refresh" app:showAsAction="always|withText" /> <item android:id="@+id/settings" app:showAsAction="never" android:title="@string/settings"/> </menu>

  25. EXAMPLE TREATMENT FOR DEVELOPERS Menus in ActionBarCompat: Need to define

    your own namespace Use ActionBarCompat In your menu.xml, add the following namespace: <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" > <item android:id="@+id/refresh" android:title="@string/refresh" android:icon="@drawable/ic_refresh" app:showAsAction="always|withText" /> <item android:id="@+id/settings" app:showAsAction="never" android:title="@string/settings"/> </menu>

  26. EXAMPLE TREATMENT FOR DEVELOPERS Menus in ActionBarCompat: Need to define

    your own namespace In your menu.xml, add the following namespace: <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" > <item android:id="@+id/refresh" android:title="@string/refresh" android:icon="@drawable/ic_refresh" app:showAsAction="always|withText" /> <item android:id="@+id/settings" app:showAsAction="never" android:title="@string/settings"/> </menu>

  27. EXAMPLE TREATMENT FOR DEVELOPERS android:theme = Theme.Holo.Light.DarkActionBar <resources> <style name="AppBaseTheme"

    parent="Theme.AppCompat.Light.DarkActionBar"> </style> </resources>

  28. EXAMPLE TREATMENT FOR DEVELOPERS android:theme = Theme.Holo.Light.DarkActionBar Holo Theme +

    Action Bar <resources> <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar"> </style> </resources>

  29. EXAMPLE TREATMENT FOR DEVELOPERS android:theme = Theme.Holo.Light.DarkActionBar <resources> <style name="AppBaseTheme"

    parent="Theme.AppCompat.Light.DarkActionBar"> </style> </resources>

  30. EXAMPLE TREATMENT FOR DEVELOPERS Application theme MUST inherit from Theme.AppCompat.*

    Styling your ActionBar <resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="Theme.Styled" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item> <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item> </style> <style name="Widget.Styled.ActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse"> <item name="background">@drawable/bg_striped</item> <item name="android:background">@drawable/bg_striped</item> </style> ... </resources>

  31. EXAMPLE TREATMENT FOR DEVELOPERS Application theme MUST inherit from Theme.AppCompat.*

    Use ActionBarCompat Styling your ActionBar <resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="Theme.Styled" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item> <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item> </style> <style name="Widget.Styled.ActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse"> <item name="background">@drawable/bg_striped</item> <item name="android:background">@drawable/bg_striped</item> </style> ... </resources>

  32. EXAMPLE TREATMENT FOR DEVELOPERS Application theme MUST inherit from Theme.AppCompat.*

    Styling your ActionBar <resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="Theme.Styled" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item> <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item> </style> <style name="Widget.Styled.ActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse"> <item name="background">@drawable/bg_striped</item> <item name="android:background">@drawable/bg_striped</item> </style> ... </resources>

  33. Checkpoint 1 Worksheet: Checkpoint 1 http://bit.ly/18EhXuo What you will do:

    •Set the targetSDK •Add ActionBarCompat

  34. Checkpoint 2: Custom ActionBar Styles

  35. EXAMPLE TREATMENT

  36. EXAMPLE TREATMENT Branded Color Scheme + App Icon

  37. EXAMPLE TREATMENT

  38. EXAMPLE TREATMENT FOR DEVELOPERS Search Google for “Action Bar Style

    Generator”: Android Action Bar Style Generator by Jeff Gilfelt Style Compatibility AppCompat

  39. EXAMPLE TREATMENT Branded Color Scheme + App Icon FOR DEVELOPERS

    Search Google for “Action Bar Style Generator”: Android Action Bar Style Generator by Jeff Gilfelt Style Compatibility AppCompat

  40. EXAMPLE TREATMENT FOR DEVELOPERS Search Google for “Action Bar Style

    Generator”: Android Action Bar Style Generator by Jeff Gilfelt Style Compatibility AppCompat

  41. Blend your visual identity with Holo

  42. Checkpoint 2 Worksheet: Checkpoint 2 http://bit.ly/18EhXuo What you will do:

    •(Generate your own style) •Apply custom theme •Update link color

  43. Checkpoint 3: Design - Whitespace and Typography

  44. EXAMPLE TREATMENT

  45. EXAMPLE TREATMENT Whitespace (Margins + Spacing)

  46. EXAMPLE TREATMENT

  47. EXAMPLE TREATMENT MORE INFO 48dp high elements: better touch targets,

    information density

  48. EXAMPLE TREATMENT 48dp Pattern MORE INFO 48dp high elements: better

    touch targets, information density

  49. EXAMPLE TREATMENT MORE INFO 48dp high elements: better touch targets,

    information density

  50. <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="thumbnail_width">80dp</dimen> <dimen name="thumbnail_height">48dp</dimen> <dimen name="photo_height">200dp</dimen>

    <dimen name="list_item_vert_margin">8dp</dimen> <dimen name="detail_horiz_margin">16dp</dimen> </resources> EXAMPLE TREATMENT FOR DEVELOPERS 48dp Rhythm set margins in dimens.xml dimens.xml

  51. <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="thumbnail_width">80dp</dimen> <dimen name="thumbnail_height">48dp</dimen> <dimen name="photo_height">200dp</dimen>

    <dimen name="list_item_vert_margin">8dp</dimen> <dimen name="detail_horiz_margin">16dp</dimen> </resources> EXAMPLE TREATMENT FOR DEVELOPERS 48dp Rhythm set margins in dimens.xml Whitespace (Margins + Spacing) dimens.xml

  52. <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="thumbnail_width">80dp</dimen> <dimen name="thumbnail_height">48dp</dimen> <dimen name="photo_height">200dp</dimen>

    <dimen name="list_item_vert_margin">8dp</dimen> <dimen name="detail_horiz_margin">16dp</dimen> </resources> EXAMPLE TREATMENT FOR DEVELOPERS 48dp Rhythm set margins in dimens.xml Whitespace (Margins + Spacing) dimens.xml

  53. <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="thumbnail_width">80dp</dimen> <dimen name="thumbnail_height">48dp</dimen> <dimen name="photo_height">200dp</dimen>

    <dimen name="list_item_vert_margin">8dp</dimen> <dimen name="detail_horiz_margin">16dp</dimen> </resources> EXAMPLE TREATMENT FOR DEVELOPERS 48dp Rhythm set margins in dimens.xml dimens.xml

  54. EXAMPLE TREATMENT

  55. EXAMPLE TREATMENT Thumbnail + Photo Treatment

  56. EXAMPLE TREATMENT

  57. EXAMPLE TREATMENT FOR DEVELOPERS android:scaleType = centerCrop <ImageView android:id="@+id/photo" android:layout_width="match_parent"

    android:layout_height="@dimen/photo_height" android:layout_marginLeft="@dimen/detail_horiz_margin" android:layout_marginRight="@dimen/detail_horiz_margin" android:scaleType="centerCrop" />

  58. EXAMPLE TREATMENT FOR DEVELOPERS android:scaleType = centerCrop Thumbnail + Photo

    Treatment <ImageView android:id="@+id/photo" android:layout_width="match_parent" android:layout_height="@dimen/photo_height" android:layout_marginLeft="@dimen/detail_horiz_margin" android:layout_marginRight="@dimen/detail_horiz_margin" android:scaleType="centerCrop" />

  59. EXAMPLE TREATMENT FOR DEVELOPERS android:scaleType = centerCrop Thumbnail + Photo

    Treatment <ImageView android:id="@+id/photo" android:layout_width="match_parent" android:layout_height="@dimen/photo_height" android:layout_marginLeft="@dimen/detail_horiz_margin" android:layout_marginRight="@dimen/detail_horiz_margin" android:scaleType="centerCrop" />

  60. EXAMPLE TREATMENT FOR DEVELOPERS android:scaleType = centerCrop <ImageView android:id="@+id/photo" android:layout_width="match_parent"

    android:layout_height="@dimen/photo_height" android:layout_marginLeft="@dimen/detail_horiz_margin" android:layout_marginRight="@dimen/detail_horiz_margin" android:scaleType="centerCrop" />

  61. EXAMPLE TREATMENT Custom Font More spacing Ellipsized text Limited, Fixed

    number of lines All caps Deemphasized colour for sub headings

  62. EXAMPLE TREATMENT Custom Font More spacing Ellipsized text Limited, Fixed

    number of lines All caps Deemphasized colour for sub headings Typography

  63. EXAMPLE TREATMENT Custom Font More spacing Ellipsized text Limited, Fixed

    number of lines All caps Deemphasized colour for sub headings

  64. EXAMPLE TREATMENT <TextView android:id="@+id/article_title" style="?android:textAppearanceMedium" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#c000" android:fontFamily="sans-serif-condensed" android:textStyle="bold"

    android:ellipsize="end" android:maxLines="2" android:lineSpacingMultiplier="0.85" android:paddingBottom="4dp" /> <TextView android:id="@+id/article_subtitle" style="?android:textAppearanceSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#6000" android:textAllCaps="true" android:maxLines="1" android:singleLine="true" android:ellipsize="end" /> FOR DEVELOPERS android:fontFamily = sans-serif-condensed (or -light) android:lineSpacingMultiplier android:textStyle android:ellipsize = end android:maxLines android:singleLine = true android:textAllCaps = true

  65. EXAMPLE TREATMENT Typography <TextView android:id="@+id/article_title" style="?android:textAppearanceMedium" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#c000" android:fontFamily="sans-serif-condensed"

    android:textStyle="bold" android:ellipsize="end" android:maxLines="2" android:lineSpacingMultiplier="0.85" android:paddingBottom="4dp" /> <TextView android:id="@+id/article_subtitle" style="?android:textAppearanceSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#6000" android:textAllCaps="true" android:maxLines="1" android:singleLine="true" android:ellipsize="end" /> FOR DEVELOPERS android:fontFamily = sans-serif-condensed (or -light) android:lineSpacingMultiplier android:textStyle android:ellipsize = end android:maxLines android:singleLine = true android:textAllCaps = true

  66. EXAMPLE TREATMENT Typography <TextView android:id="@+id/article_title" style="?android:textAppearanceMedium" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#c000" android:fontFamily="sans-serif-condensed"

    android:textStyle="bold" android:ellipsize="end" android:maxLines="2" android:lineSpacingMultiplier="0.85" android:paddingBottom="4dp" /> <TextView android:id="@+id/article_subtitle" style="?android:textAppearanceSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#6000" android:textAllCaps="true" android:maxLines="1" android:singleLine="true" android:ellipsize="end" /> FOR DEVELOPERS android:fontFamily = sans-serif-condensed (or -light) android:lineSpacingMultiplier android:textStyle android:ellipsize = end android:maxLines android:singleLine = true android:textAllCaps = true

  67. EXAMPLE TREATMENT <TextView android:id="@+id/article_title" style="?android:textAppearanceMedium" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#c000" android:fontFamily="sans-serif-condensed" android:textStyle="bold"

    android:ellipsize="end" android:maxLines="2" android:lineSpacingMultiplier="0.85" android:paddingBottom="4dp" /> <TextView android:id="@+id/article_subtitle" style="?android:textAppearanceSmall" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#6000" android:textAllCaps="true" android:maxLines="1" android:singleLine="true" android:ellipsize="end" /> FOR DEVELOPERS android:fontFamily = sans-serif-condensed (or -light) android:lineSpacingMultiplier android:textStyle android:ellipsize = end android:maxLines android:singleLine = true android:textAllCaps = true

  68. EXAMPLE TREATMENT FOR DEVELOPERS New link color, setting color within

    TextView

  69. EXAMPLE TREATMENT FOR DEVELOPERS New link color, setting color within

    TextView Custom Highlight + Font

  70. EXAMPLE TREATMENT FOR DEVELOPERS New link color, setting color within

    TextView

  71. EXAMPLE TREATMENT FOR DEVELOPERS android:textColorLink = @color/bacon Custom code @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_article_detail, container, false); if (mItem != null) { ((TextView) rootView.findViewById(R.id.article_title)) .setText(mItem.title); // Custom highlight the author ((TextView) rootView.findViewById(R.id.article_byline)) .setText(Html.fromHtml(mItem.time.toUpperCase() + " BY <font color='" + getResources().getString(R.string.author_font_color) + "'>" + mItem.author.toUpperCase() + "</a>")); // Use custom font ((TextView) rootView.findViewById(R.id.article_body)) .setTypeface(Typeface.createFromAsset( getResources().getAssets(), "Rosario-Regular.ttf")); ... } return rootView; }

  72. EXAMPLE TREATMENT FOR DEVELOPERS android:textColorLink = @color/bacon Custom code Custom

    Highlight + Font @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_article_detail, container, false); if (mItem != null) { ((TextView) rootView.findViewById(R.id.article_title)) .setText(mItem.title); // Custom highlight the author ((TextView) rootView.findViewById(R.id.article_byline)) .setText(Html.fromHtml(mItem.time.toUpperCase() + " BY <font color='" + getResources().getString(R.string.author_font_color) + "'>" + mItem.author.toUpperCase() + "</a>")); // Use custom font ((TextView) rootView.findViewById(R.id.article_body)) .setTypeface(Typeface.createFromAsset( getResources().getAssets(), "Rosario-Regular.ttf")); ... } return rootView; }

  73. EXAMPLE TREATMENT FOR DEVELOPERS android:textColorLink = @color/bacon Custom code Custom

    Highlight + Font @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_article_detail, container, false); if (mItem != null) { ((TextView) rootView.findViewById(R.id.article_title)) .setText(mItem.title); // Custom highlight the author ((TextView) rootView.findViewById(R.id.article_byline)) .setText(Html.fromHtml(mItem.time.toUpperCase() + " BY <font color='" + getResources().getString(R.string.author_font_color) + "'>" + mItem.author.toUpperCase() + "</a>")); // Use custom font ((TextView) rootView.findViewById(R.id.article_body)) .setTypeface(Typeface.createFromAsset( getResources().getAssets(), "Rosario-Regular.ttf")); ... } return rootView; }

  74. EXAMPLE TREATMENT FOR DEVELOPERS android:textColorLink = @color/bacon Custom code @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_article_detail, container, false); if (mItem != null) { ((TextView) rootView.findViewById(R.id.article_title)) .setText(mItem.title); // Custom highlight the author ((TextView) rootView.findViewById(R.id.article_byline)) .setText(Html.fromHtml(mItem.time.toUpperCase() + " BY <font color='" + getResources().getString(R.string.author_font_color) + "'>" + mItem.author.toUpperCase() + "</a>")); // Use custom font ((TextView) rootView.findViewById(R.id.article_body)) .setTypeface(Typeface.createFromAsset( getResources().getAssets(), "Rosario-Regular.ttf")); ... } return rootView; }

  75. Checkpoint 3 Worksheet: Checkpoint 3 http://bit.ly/18EhXuo What you will do:

    •Update whitespace (padding and margins) •Fix image thumbnails and photos •Update Typography •Custom highlighting and font

  76. Checkpoint 4: Tablet UI

  77. EXAMPLE TREATMENT FOR DEVELOPERS Guides: “Designing for Multiple Screens” and

    “Building a Dynamic UI with Fragments”

  78. EXAMPLE TREATMENT FOR DEVELOPERS Guides: “Designing for Multiple Screens” and

    “Building a Dynamic UI with Fragments” Two-pane UI

  79. EXAMPLE TREATMENT FOR DEVELOPERS Guides: “Designing for Multiple Screens” and

    “Building a Dynamic UI with Fragments”

  80. EXAMPLE TREATMENT FOR DEVELOPERS Landscape tablet resources: values-sw600dp-land Reusable references:

    refs.xml <resources> <!-- For more on layout aliases, see: http://developer.android.com/training/multiscreen/ screensizes.html#TaskUseAliasFilters --> <item name="activity_article_list" type="layout"> @layout/activity_article_twopane </item> </resources> refs.xml

  81. EXAMPLE TREATMENT FOR DEVELOPERS Landscape tablet resources: values-sw600dp-land Reusable references:

    refs.xml Two-pane UI <resources> <!-- For more on layout aliases, see: http://developer.android.com/training/multiscreen/ screensizes.html#TaskUseAliasFilters --> <item name="activity_article_list" type="layout"> @layout/activity_article_twopane </item> </resources> refs.xml

  82. EXAMPLE TREATMENT FOR DEVELOPERS Landscape tablet resources: values-sw600dp-land Reusable references:

    refs.xml <resources> <!-- For more on layout aliases, see: http://developer.android.com/training/multiscreen/ screensizes.html#TaskUseAliasFilters --> <item name="activity_article_list" type="layout"> @layout/activity_article_twopane </item> </resources> refs.xml

  83. EXAMPLE TREATMENT

  84. EXAMPLE TREATMENT Two-pane UI with better spacing

  85. EXAMPLE TREATMENT Two-pane UI with better spacing

  86. EXAMPLE TREATMENT

  87. EXAMPLE TREATMENT <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="thumbnail_width">96dp</dimen> <dimen name="photo_height">400dp</dimen>

    <dimen name="list_item_vert_margin">16dp</dimen> <dimen name="detail_horiz_margin">80dp</dimen> </resources> dimens.xml FOR DEVELOPERS Landscape tablet resources: values-sw600dp-land Tablet-specific dimensions: dimens.xml

  88. EXAMPLE TREATMENT Two-pane UI with better spacing <?xml version="1.0" encoding="utf-8"?>

    <resources> <dimen name="thumbnail_width">96dp</dimen> <dimen name="photo_height">400dp</dimen> <dimen name="list_item_vert_margin">16dp</dimen> <dimen name="detail_horiz_margin">80dp</dimen> </resources> dimens.xml FOR DEVELOPERS Landscape tablet resources: values-sw600dp-land Tablet-specific dimensions: dimens.xml

  89. EXAMPLE TREATMENT Two-pane UI with better spacing <?xml version="1.0" encoding="utf-8"?>

    <resources> <dimen name="thumbnail_width">96dp</dimen> <dimen name="photo_height">400dp</dimen> <dimen name="list_item_vert_margin">16dp</dimen> <dimen name="detail_horiz_margin">80dp</dimen> </resources> dimens.xml FOR DEVELOPERS Landscape tablet resources: values-sw600dp-land Tablet-specific dimensions: dimens.xml

  90. EXAMPLE TREATMENT <?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="thumbnail_width">96dp</dimen> <dimen name="photo_height">400dp</dimen>

    <dimen name="list_item_vert_margin">16dp</dimen> <dimen name="detail_horiz_margin">80dp</dimen> </resources> dimens.xml FOR DEVELOPERS Landscape tablet resources: values-sw600dp-land Tablet-specific dimensions: dimens.xml

  91. Checkpoint 4 Worksheet: Checkpoint 4 http://bit.ly/18EhXuo What you will do:

    •Add tablet layout •Tablet-optimized whitespace

  92. Checkpoint 5: Bitmap Performance

  93. EXAMPLE TREATMENT PROBLEM: OutOfMemoryException on low-end devices

  94. EXAMPLE TREATMENT PROBLEM: OutOfMemoryException on low-end devices Bitmap Performance Tuning

  95. EXAMPLE TREATMENT PROBLEM: OutOfMemoryException on low-end devices

  96. EXAMPLE TREATMENT FOR DEVELOPERS BitmapFactory.Options: options.inSampleSize = 16 (or use

    smaller images) @Override public View getView(int position, View convertView, ViewGroup container) { if (convertView == null) { convertView = LayoutInflater.from(getActivity()) .inflate(R.layout.list_item_article, container, false); } ... BitmapFactory.Options options = new BitmapFactory.Options(); options.inSampleSize = 16; Bitmap b = BitmapFactory.decodeResource(getResources(), item.photoResId, options); ((ImageView) convertView.findViewById(R.id.thumbnail)).setImageBitmap(b); return convertView; }

  97. EXAMPLE TREATMENT FOR DEVELOPERS BitmapFactory.Options: options.inSampleSize = 16 (or use

    smaller images) Bitmap Performance Tuning @Override public View getView(int position, View convertView, ViewGroup container) { if (convertView == null) { convertView = LayoutInflater.from(getActivity()) .inflate(R.layout.list_item_article, container, false); } ... BitmapFactory.Options options = new BitmapFactory.Options(); options.inSampleSize = 16; Bitmap b = BitmapFactory.decodeResource(getResources(), item.photoResId, options); ((ImageView) convertView.findViewById(R.id.thumbnail)).setImageBitmap(b); return convertView; }

  98. EXAMPLE TREATMENT FOR DEVELOPERS BitmapFactory.Options: options.inSampleSize = 16 (or use

    smaller images) Bitmap Performance Tuning @Override public View getView(int position, View convertView, ViewGroup container) { if (convertView == null) { convertView = LayoutInflater.from(getActivity()) .inflate(R.layout.list_item_article, container, false); } ... BitmapFactory.Options options = new BitmapFactory.Options(); options.inSampleSize = 16; Bitmap b = BitmapFactory.decodeResource(getResources(), item.photoResId, options); ((ImageView) convertView.findViewById(R.id.thumbnail)).setImageBitmap(b); return convertView; }

  99. EXAMPLE TREATMENT FOR DEVELOPERS BitmapFactory.Options: options.inSampleSize = 16 (or use

    smaller images) @Override public View getView(int position, View convertView, ViewGroup container) { if (convertView == null) { convertView = LayoutInflater.from(getActivity()) .inflate(R.layout.list_item_article, container, false); } ... BitmapFactory.Options options = new BitmapFactory.Options(); options.inSampleSize = 16; Bitmap b = BitmapFactory.decodeResource(getResources(), item.photoResId, options); ((ImageView) convertView.findViewById(R.id.thumbnail)).setImageBitmap(b); return convertView; }

  100. EXAMPLE TREATMENT

  101. EXAMPLE TREATMENT Dynamically calculate inSampleSize

  102. EXAMPLE TREATMENT

  103. EXAMPLE TREATMENT FOR DEVELOPERS options.inJustDecodeBounds = true; options.inSampleSize = 16

    (or use smaller images) public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId, int reqWidth, int reqHeight) { // First decode with inJustDecodeBounds=true to check dimensions final BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; BitmapFactory.decodeResource(res, resId, options); // Calculate inSampleSize options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight); // Decode bitmap with inSampleSize set options.inJustDecodeBounds = false; return BitmapFactory.decodeResource(res, resId, options); }

  104. EXAMPLE TREATMENT FOR DEVELOPERS options.inJustDecodeBounds = true; options.inSampleSize = 16

    (or use smaller images) Dynamically calculate inSampleSize public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId, int reqWidth, int reqHeight) { // First decode with inJustDecodeBounds=true to check dimensions final BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; BitmapFactory.decodeResource(res, resId, options); // Calculate inSampleSize options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight); // Decode bitmap with inSampleSize set options.inJustDecodeBounds = false; return BitmapFactory.decodeResource(res, resId, options); }

  105. EXAMPLE TREATMENT FOR DEVELOPERS options.inJustDecodeBounds = true; options.inSampleSize = 16

    (or use smaller images) Dynamically calculate inSampleSize public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId, int reqWidth, int reqHeight) { // First decode with inJustDecodeBounds=true to check dimensions final BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; BitmapFactory.decodeResource(res, resId, options); // Calculate inSampleSize options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight); // Decode bitmap with inSampleSize set options.inJustDecodeBounds = false; return BitmapFactory.decodeResource(res, resId, options); }

  106. EXAMPLE TREATMENT FOR DEVELOPERS options.inJustDecodeBounds = true; options.inSampleSize = 16

    (or use smaller images) public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId, int reqWidth, int reqHeight) { // First decode with inJustDecodeBounds=true to check dimensions final BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; BitmapFactory.decodeResource(res, resId, options); // Calculate inSampleSize options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight); // Decode bitmap with inSampleSize set options.inJustDecodeBounds = false; return BitmapFactory.decodeResource(res, resId, options); }

  107. EXAMPLE TREATMENT FOR DEVELOPERS calculate optimal sample size for required

    size public static int calculateInSampleSize( BitmapFactory.Options options, int reqWidth, int reqHeight) { // Raw height and width of image final int height = options.outHeight; final int width = options.outWidth; int inSampleSize = 16; if (reqWidth == 0 || reqHeight == 0) return inSampleSize; if (height > reqHeight || width > reqWidth) { // Calculate ratios of height and width to requested height and width final int heightRatio = Math.round((float) height / (float) reqHeight); final int widthRatio = Math.round((float) width / (float) reqWidth); inSampleSize = heightRatio < widthRatio ? heightRatio : widthRatio; } return inSampleSize; }

  108. EXAMPLE TREATMENT FOR DEVELOPERS calculate optimal sample size for required

    size Dynamically calculate inSampleSize public static int calculateInSampleSize( BitmapFactory.Options options, int reqWidth, int reqHeight) { // Raw height and width of image final int height = options.outHeight; final int width = options.outWidth; int inSampleSize = 16; if (reqWidth == 0 || reqHeight == 0) return inSampleSize; if (height > reqHeight || width > reqWidth) { // Calculate ratios of height and width to requested height and width final int heightRatio = Math.round((float) height / (float) reqHeight); final int widthRatio = Math.round((float) width / (float) reqWidth); inSampleSize = heightRatio < widthRatio ? heightRatio : widthRatio; } return inSampleSize; }

  109. EXAMPLE TREATMENT FOR DEVELOPERS calculate optimal sample size for required

    size public static int calculateInSampleSize( BitmapFactory.Options options, int reqWidth, int reqHeight) { // Raw height and width of image final int height = options.outHeight; final int width = options.outWidth; int inSampleSize = 16; if (reqWidth == 0 || reqHeight == 0) return inSampleSize; if (height > reqHeight || width > reqWidth) { // Calculate ratios of height and width to requested height and width final int heightRatio = Math.round((float) height / (float) reqHeight); final int widthRatio = Math.round((float) width / (float) reqWidth); inSampleSize = heightRatio < widthRatio ? heightRatio : widthRatio; } return inSampleSize; }

  110. Checkpoint 5 Worksheet: Checkpoint 5 http://bit.ly/18EhXuo What you will do:

    •Load bitmaps using ‘sampleSize’ •Set ‘inJustDecodeBounds’ parameter

  111. Checkpoint 6: Image Loading in Background Thread

  112. EXAMPLE TREATMENT Slow Fast

  113. EXAMPLE TREATMENT Load images concurrently off the Main(UI) Thread Slow

    Fast

  114. EXAMPLE TREATMENT Slow Fast

  115. EXAMPLE TREATMENT FOR DEVELOPERS AsyncTask class BitmapWorkerTask extends AsyncTask<Integer, Void,

    Bitmap> { private final WeakReference<ImageView> imageViewReference; private int resId = 0; public BitmapWorkerTask(ImageView imageView) { // Use a WeakReference to ensure the ImageView can // be garbage collected imageViewReference = new WeakReference<ImageView>(imageView); } // Decode image in background. @Override protected Bitmap doInBackground(Integer... params) { resId = params[0]; ImageView thumbnail = imageViewReference.get(); Bitmap bitmap = decodeSampledBitmapFromResource( getResources(), resId, thumbnail.getWidth(), thumbnail.getHeight()); addBitmapToMemoryCache(String.valueOf(params[0]), bitmap); return bitmap; } ...

  116. EXAMPLE TREATMENT FOR DEVELOPERS AsyncTask Load images concurrently off the

    Main(UI) Thread class BitmapWorkerTask extends AsyncTask<Integer, Void, Bitmap> { private final WeakReference<ImageView> imageViewReference; private int resId = 0; public BitmapWorkerTask(ImageView imageView) { // Use a WeakReference to ensure the ImageView can // be garbage collected imageViewReference = new WeakReference<ImageView>(imageView); } // Decode image in background. @Override protected Bitmap doInBackground(Integer... params) { resId = params[0]; ImageView thumbnail = imageViewReference.get(); Bitmap bitmap = decodeSampledBitmapFromResource( getResources(), resId, thumbnail.getWidth(), thumbnail.getHeight()); addBitmapToMemoryCache(String.valueOf(params[0]), bitmap); return bitmap; } ...

  117. EXAMPLE TREATMENT FOR DEVELOPERS AsyncTask Load images concurrently off the

    Main(UI) Thread class BitmapWorkerTask extends AsyncTask<Integer, Void, Bitmap> { private final WeakReference<ImageView> imageViewReference; private int resId = 0; public BitmapWorkerTask(ImageView imageView) { // Use a WeakReference to ensure the ImageView can // be garbage collected imageViewReference = new WeakReference<ImageView>(imageView); } // Decode image in background. @Override protected Bitmap doInBackground(Integer... params) { resId = params[0]; ImageView thumbnail = imageViewReference.get(); Bitmap bitmap = decodeSampledBitmapFromResource( getResources(), resId, thumbnail.getWidth(), thumbnail.getHeight()); addBitmapToMemoryCache(String.valueOf(params[0]), bitmap); return bitmap; } ...

  118. EXAMPLE TREATMENT FOR DEVELOPERS AsyncTask class BitmapWorkerTask extends AsyncTask<Integer, Void,

    Bitmap> { private final WeakReference<ImageView> imageViewReference; private int resId = 0; public BitmapWorkerTask(ImageView imageView) { // Use a WeakReference to ensure the ImageView can // be garbage collected imageViewReference = new WeakReference<ImageView>(imageView); } // Decode image in background. @Override protected Bitmap doInBackground(Integer... params) { resId = params[0]; ImageView thumbnail = imageViewReference.get(); Bitmap bitmap = decodeSampledBitmapFromResource( getResources(), resId, thumbnail.getWidth(), thumbnail.getHeight()); addBitmapToMemoryCache(String.valueOf(params[0]), bitmap); return bitmap; } ...

  119. EXAMPLE TREATMENT FOR DEVELOPERS AsyncTask ... // Once complete, see

    if ImageView is still around and set bitmap. @Override protected void onPostExecute(Bitmap bitmap) { if (isCancelled()) { bitmap = null; } if (imageViewReference != null && bitmap != null) { final ImageView imageView = imageViewReference.get(); final BitmapWorkerTask bitmapWorkerTask = getBitmapWorkerTask(imageView); if (this == bitmapWorkerTask && imageView != null) { imageView.setImageBitmap(bitmap); } } } }

  120. EXAMPLE TREATMENT FOR DEVELOPERS AsyncTask Load images concurrently off the

    Main(UI) Thread ... // Once complete, see if ImageView is still around and set bitmap. @Override protected void onPostExecute(Bitmap bitmap) { if (isCancelled()) { bitmap = null; } if (imageViewReference != null && bitmap != null) { final ImageView imageView = imageViewReference.get(); final BitmapWorkerTask bitmapWorkerTask = getBitmapWorkerTask(imageView); if (this == bitmapWorkerTask && imageView != null) { imageView.setImageBitmap(bitmap); } } } }

  121. EXAMPLE TREATMENT FOR DEVELOPERS AsyncTask ... // Once complete, see

    if ImageView is still around and set bitmap. @Override protected void onPostExecute(Bitmap bitmap) { if (isCancelled()) { bitmap = null; } if (imageViewReference != null && bitmap != null) { final ImageView imageView = imageViewReference.get(); final BitmapWorkerTask bitmapWorkerTask = getBitmapWorkerTask(imageView); if (this == bitmapWorkerTask && imageView != null) { imageView.setImageBitmap(bitmap); } } } }

  122. Checkpoint 6 Worksheet: Checkpoint 6 http://bit.ly/18EhXuo What you will do:

    •Add AsyncTask for loading images

  123. Checkpoint 6: Image Cache

  124. EXAMPLE TREATMENT Faster Fast

  125. EXAMPLE TREATMENT Use Image Cache Faster Fast

  126. EXAMPLE TREATMENT Faster Fast

  127. EXAMPLE TREATMENT FOR DEVELOPERS LruCache private LruCache<String, Bitmap> mMemoryCache; //

    Instantiate in the onCreate() method public void addBitmapToMemoryCache(String key, Bitmap bitmap) { if (getBitmapFromMemCache(key) == null) { mMemoryCache.put(key, bitmap); } } public Bitmap getBitmapFromMemCache(String key) { return mMemoryCache.get(key); }

  128. EXAMPLE TREATMENT FOR DEVELOPERS LruCache Use Image Cache private LruCache<String,

    Bitmap> mMemoryCache; // Instantiate in the onCreate() method public void addBitmapToMemoryCache(String key, Bitmap bitmap) { if (getBitmapFromMemCache(key) == null) { mMemoryCache.put(key, bitmap); } } public Bitmap getBitmapFromMemCache(String key) { return mMemoryCache.get(key); }

  129. EXAMPLE TREATMENT FOR DEVELOPERS LruCache Use Image Cache private LruCache<String,

    Bitmap> mMemoryCache; // Instantiate in the onCreate() method public void addBitmapToMemoryCache(String key, Bitmap bitmap) { if (getBitmapFromMemCache(key) == null) { mMemoryCache.put(key, bitmap); } } public Bitmap getBitmapFromMemCache(String key) { return mMemoryCache.get(key); }

  130. EXAMPLE TREATMENT FOR DEVELOPERS LruCache private LruCache<String, Bitmap> mMemoryCache; //

    Instantiate in the onCreate() method public void addBitmapToMemoryCache(String key, Bitmap bitmap) { if (getBitmapFromMemCache(key) == null) { mMemoryCache.put(key, bitmap); } } public Bitmap getBitmapFromMemCache(String key) { return mMemoryCache.get(key); }

  131. EXAMPLE TREATMENT FOR DEVELOPERS LruCache calculate cache size in sizeOf(..)

    // Get max available VM memory in kilobytes, exceeding this amount // will throw an OutOfMemory exception. final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024); // Use 1/8th of the available memory for this memory cache. final int cacheSize = maxMemory / 8; mMemoryCache = new LruCache<String, Bitmap>(cacheSize) { @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1) @Override protected int sizeOf(String key, Bitmap bitmap) { // The cache size in kilobytes rather than if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB_MR1) { return bitmap.getByteCount() / 1024; } else { return bitmap.getRowBytes() * bitmap.getHeight() / 1024; } } };

  132. EXAMPLE TREATMENT FOR DEVELOPERS LruCache calculate cache size in sizeOf(..)

    Use Image Cache // Get max available VM memory in kilobytes, exceeding this amount // will throw an OutOfMemory exception. final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024); // Use 1/8th of the available memory for this memory cache. final int cacheSize = maxMemory / 8; mMemoryCache = new LruCache<String, Bitmap>(cacheSize) { @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1) @Override protected int sizeOf(String key, Bitmap bitmap) { // The cache size in kilobytes rather than if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB_MR1) { return bitmap.getByteCount() / 1024; } else { return bitmap.getRowBytes() * bitmap.getHeight() / 1024; } } };

  133. EXAMPLE TREATMENT FOR DEVELOPERS LruCache calculate cache size in sizeOf(..)

    Use Image Cache // Get max available VM memory in kilobytes, exceeding this amount // will throw an OutOfMemory exception. final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024); // Use 1/8th of the available memory for this memory cache. final int cacheSize = maxMemory / 8; mMemoryCache = new LruCache<String, Bitmap>(cacheSize) { @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1) @Override protected int sizeOf(String key, Bitmap bitmap) { // The cache size in kilobytes rather than if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB_MR1) { return bitmap.getByteCount() / 1024; } else { return bitmap.getRowBytes() * bitmap.getHeight() / 1024; } } };

  134. EXAMPLE TREATMENT FOR DEVELOPERS LruCache calculate cache size in sizeOf(..)

    // Get max available VM memory in kilobytes, exceeding this amount // will throw an OutOfMemory exception. final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024); // Use 1/8th of the available memory for this memory cache. final int cacheSize = maxMemory / 8; mMemoryCache = new LruCache<String, Bitmap>(cacheSize) { @TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1) @Override protected int sizeOf(String key, Bitmap bitmap) { // The cache size in kilobytes rather than if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB_MR1) { return bitmap.getByteCount() / 1024; } else { return bitmap.getRowBytes() * bitmap.getHeight() / 1024; } } };

  135. Checkpoint 6 Worksheet: Checkpoint 6 http://bit.ly/18EhXuo What you will do:

    •Add LruCache to cache images Faster

  136. Final: XYZReader

  137. EXAMPLE TREATMENT

  138. Thank you! A few simple techniques: Backwards Compatibility using Support

    Library Design, Spacing, Typography Improve app performance Interested to find out more? developer.android.com +Android Developers

  139. +Yuichi Araki +Jan-Felix Schmakeit Thank you! http://plus.google.com/+AndroidDevelopers http://developer.android.com

More Decks by JasonNi

See All by JasonNi
RxDialog
jasonni
3
440
Android UI Design Pattern
jasonni
0
170
Google Mobile Developer Summit Overview
jasonni
1
82
JQuery Plugin Publish
jasonni
1
300

Other Decks in Technology

See All in Technology
Active Directory と Entra ID のむむむな関係
murachiakira
PRO
4
1.8k
顧客合意を取りながら進めるAWSコスト削減の実践
optim
0
170
思考過程から秘密が漏れる:Amazon Bedrock上のKimi K3を5つの方法で攻めたら、25回中22回漏洩した話
yama3133
1
150
Kiro CLI 入門 (ターミナルと CI で使う) | 目指せ Kiro マスター 03
inariku
PRO
2
140
Context != Context: One window, many lifecycles (AI Native DevCon, Nov 2026)
birgitta410
0
120
生成AI時代のIAMのマニアックな話
takuros
6
3.2k
Sonnetだけで業務はまわる？
kintotechdev
1
110
ぼくのClaude Codeの使い方
falken
PRO
3
6.1k
2026-11-11 Tamachi.sre#7 PaCにインフラリソースの命を救われました。 / PaC saves the infra resource life
masasuzu
0
150
令和の今、あらためて IAM を考える。アクセスキーを「無くせない現実」との向き合い方
kazzpapa3
0
680
長い仕事を任せる (Workflows、クラウドセッション、Kiro Web) | 目指せ Kiro マスター 10
inariku
PRO
3
180
ライフワーク「猫でもわかるDirectConnect」
kentapapa
0
330

Featured

See All Featured
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
460
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
680
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
3
1.4k
Optimizing for Happiness
mojombo
378
71k
Build your cross-platform service in a week with App Engine
jlugia
234
19k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
520
We Have a Design System, Now What?
morganepeng
55
8.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
371
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
18k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
1
240
Documentation Writing (for coders)
carmenintech
77
5.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k