Your SlideShare is downloading. ×
0
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
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

Top Tips for Android UIs - Getting the Magic on Tablets

6,937

Published on

For more information about developing Android application for the MOTOROLA XOOM go to http://developer.motorola.com

For more information about developing Android application for the MOTOROLA XOOM go to http://developer.motorola.com

Published in: Technology
2 Comments
18 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,937
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
18
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. Suzanne AlexandraMotorola<br />Top Tips for Android UIsGetting the Magic on Tablets<br />
  • 2. @suzalex<br />developer.motorola.com<br />#AnDevCon<br />Presentation Title Version 1.0 02.24.09<br />
  • 3. Video here<br />
  • 4. We're in a whole new place.<br />Bring the right stuff aboard.<br />Space Chipshttp://moto.ly/spacechips<br />
  • 5. Get the magic<br />01 KEEP ERGONOMICS THOUGHTFUL<br />02 ENGAGE THE SENSES<br />03 USE COOL AESTHETICS<br />04 MAKE IT OBVIOUS<br />
  • 6. Get the magic<br />01 KEEP ERGONOMICS THOUGHTFUL<br /> Landscape layouts<br /> Rich notifications<br /> Text sizes<br />02 ENGAGE THE SENSESImagesTouchability<br />03 USE COOL AESTHETICSThemes, themes, themes<br />04 MAKE IT OBVIOUSAction barsFragments<br />
  • 7. Assume your users are using landscape.<br />
  • 8. Landscape layouts<br />Landscape often needs specialized layouts, on any device<br />
  • 9. Landscape layouts<br />Look what happens on the tablet<br />
  • 10. alignParentLeft<br />Landscape layouts<br />What went wrong?<br />alignParentRight<br />Small image<br />Nothing in the center<br />
  • 11. Landscape layouts<br />Design for screen size AND orientation<br />
  • 12. Landscape layouts<br />The winning layout<br />id="@+id/photo"centerHorizontal="true"<br />layout_alignLeft="@id/photo"<br /><RelativeLayout>layout_alignRight="@id/photo"<br />
  • 13. Landscape layouts<br />Optimize the user experience for wide screens<br />
  • 14. Landscapelayouts<br />Avoid the wide, wide ocean effect<br />
  • 15. Text sizes<br />Small text (like images) probably won't work<br />
  • 16. Text sizes<br />Best practices<br />Scale with sp<br />18 spand up<br />Be sure text is readable to real users<br />
  • 17. Your app notification<br />Rich notifications<br />A key benefit of Android over other mobile platforms<br />
  • 18. Rich notifications<br />Examples of when to use rich notifications<br />When new content arrives<br />When media is playing<br />
  • 19. Rich notifications<br />On Honeycomb, two notification displays<br />Tray<br />Popup<br />
  • 20. Rich notifications<br />Use the Notification.Builder class<br />Notification.Builder builder = new Notification.Builder( this );<br />Like AlertDialog.Builder<br />
  • 21. Rich notifications<br />Build the notification you want<br />builder.setSmallIcon(R.drawable.icon)<br /> .setContentTitle(title)<br /> .setContentText(text)<br /> .setContentIntent(pintent) // A pending intent<br /> .setLargeIcon(myBitmap)<br />;<br />
  • 22. Rich notifications<br />A few moving parts<br />setLargeIcon()<br />setSmallIcon()<br />setContentTitle()<br />setContentText()<br />
  • 23. Rich notifications<br />Get some magic - create a clickable button<br />RemoteViews layout = new RemoteViews(<br /> getPackageName(), R.layout.notification);<br />layout.setTextViewText(R.id.notification_title, getString(R.string.app_name));<br /> layout.setOnClickPendingIntent(R.id.notification_button,<br /> getDialogPendingIntent("Tapped") );<br />builder.setContent(layout);<br />
  • 24. Rich notifications<br />Strategy for backward compatibility<br />private static boolean isHoneycomb =<br />android.os.Build.VERSION.SDK_INT > 10;<br />if (!isHoneycomb)      // start one activity intentelse     // start another<br />
  • 25. Get the magic<br />01 KEEP ERGONOMICS THOUGHTFUL<br />02 ENGAGE THE SENSESImagesTouchability<br />03 USE COOL AESTHETICS<br />04 MAKE IT OBVIOUS<br />
  • 26. Vision trumps all other senses.<br />Brain Rules<br />Dr. John Medina<br />
  • 27. Images<br />Express it visually, for appeal<br />
  • 28. Images<br />Sizing images for XOOM<br />
  • 29. Images<br />Use scaleType to autoscale<br /><ImageView<br /> android:id="@+id/photo2" <br /> android:layout_height="match_parent" <br /> android:layout_width="match_parent" <br /> android:src="@drawable/clover"<br />android:scaleType="centerCrop" /><br />
  • 30. Images<br />Choose an image strategy<br /><ul><li>One set of images and let Android autoscale?
  • 31. Custom resource sets for different sizes and densities?
  • 32. Target the most commonly used density?
  • 33. Retrieve images dynamically at runtime and scale for the device?</li></li></ul><li>Images<br />Memory vs file size – an example<br />Autoscaling 32 MBmemory<br /> 324 KB size<br /> Resource sets 23 MBmemory<br />728 KB size<br />
  • 34. Autoscaling uses memory.<br />Custom image sets increase file size.<br />
  • 35. Images<br />Screens for different devices need different image sizes<br />
  • 36. Images<br />Tip: Sample large images at runtime to save memory<br />BitmapFactory.Options options = new BitmapFactory.Options();<br /> options.inJustDecodeBounds = false;<br />options.inSampleSize = 4;<br /> options.inScaled = true;<br /> options.inTargetDensity = screenDensity;<br /> Bitmap bitmap = BitmapFactory.decodeResource(<br /> getResources(),<br /> R.drawable.clover, options);<br />
  • 37. High resolution icons<br />Images<br />Where to place images and icons<br />Default, auto-scaled<br />Prescaled for density<br />Match 3.0 styling<br />For xlarge screens<br />
  • 38. Touchability<br />Tablets are designed for touch<br />
  • 39. Touchability<br />Make sure all targets are tappable<br />
  • 40. Touchability<br />Make sure all targets are tappable<br />public View getView( int position, View convertView, ViewGroup parent) {<br /> ImageView i = new ImageView(mContext);<br /> i.setImageResource(mImageIds[position]);<br />i.setLayoutParams(new Gallery.LayoutParams( 300, 200));<br /> i.setScaleType(ImageView.ScaleType.FIT_XY);<br /> i.setBackgroundResource(<br /> mGalleryItemBackground);<br /> return i;<br />}<br />
  • 41. Touchability<br />Use your old friends, events that handle touch<br />onTouch()onClick()onItemClick()<br />
  • 42. Get the magic<br />01 KEEP ERGONOMICS THOUGHTFUL<br />02 ENGAGE THE SENSES<br />03 USE COOL AESTHETICSThemes, themes, themes<br />04 MAKE IT OBVIOUS<br />
  • 43. Themes<br />Fit in with the device, or stand out<br />
  • 44. Themes<br />Honeycomb has two new holographic themes<br />Theme.Holo<br />Theme.Holo.Light<br />
  • 45. Themes<br />But they require hardware acceleration<br /><application android:icon="@drawable/icon" <br /> android:label="@string/app_name"<br />android:hardwareAccelerated="true" ><br />Only available with Honeycomb<br />
  • 46. Themes<br />But you might be targeting multiple Android versions<br /><uses-sdk android:minSdkVersion="8"<br />android:targetSdkVersion="11" /><br />
  • 47. Themes<br />Create multiple themes for Android versions<br /><style … parent= "@android:style/Theme"><br /><style … parent= "@android:style/Theme.Holo"><br />
  • 48. Be sure all API calls you use work for all API versions you support.<br />
  • 49. Get the magic<br />01 KEEP ERGONOMICS THOUGHTFUL<br />02 ENGAGE THE SENSES<br />03 USE COOL AESTHETICS<br />04 MAKE IT OBVIOUSAction barsFragments<br />
  • 50. Action bars<br />Make your app features readily available<br />App icon<br />Drop-down dialog<br />Action view<br />Action items<br />
  • 51. Action bars<br />Coding is similar to options menus<br /><menu> <item> …<br />onCreateOptionsMenu()<br />android:actionLayoutandroid:actionViewClass<br />onOptionsItemSelected()<br />
  • 52. Action bars<br />But there's a new twist<br /><menu xmlns:android= "http://schemas.android.com/apk/res/android"><br /> <item android:id="@+id/favorite"<br /> android:title="@string/favorite" android:icon="@drawable/ic_menu_star" <br />android:showAsAction="ifRoom"|"withText" /><br /></menu><br />
  • 53. Action bars<br />Handle options selection as usual<br />@Override<br /> public boolean onOptionsItemSelected(MenuItem item) {<br /> switch (item.getItemId()) {<br />case R.id.favorite:<br /> // do something<br /> return true;<br /> …<br />}<br />
  • 54. Action bars<br />Get some magic, style it<br /><style name="MyTheme" parent="android:style/Theme.Holo" ><br />   <item name="android:actionBarStyle"><br />@style/ActionBar</item></style><br /><style name="ActionBar" <br />parent="android:style/Widget.Holo.ActionBar">   <item name="android:background"><br />@drawable/my_background</item></style><br />
  • 55. Action bars<br />Get some magic, add a dialog<br />Use AlertDialog.BuilderCreate a custom dialog in XMLUse a DialogFragment<br />
  • 56. Action bars<br />But do Honeycomb stuff only on Honeycomb<br />private static boolean isHoneycomb =<br />android.os.Build.VERSION.SDK_INT > 10;<br />if (isHoneycomb) {<br />// build custom dialog here<br />}<br />
  • 57. Fragments<br />Use to display more content and features, more fluidly<br />
  • 58. Fragments<br />You can use many patterns<br />
  • 59. Fragments<br />Have their own lifecycle but exist within an activity<br />Fragment<br />Activity<br />
  • 60. Fragments<br />Example: List-Detail pattern on smart phone<br />
  • 61. Fragments<br />On tablets, List and Detail can be in fragments<br />
  • 62. Fragments<br />Coding<br /><FrameLayout>, extends Fragment<br /><fragment>, extends ListFragment<br />
  • 63. Fragments<br />Get some magic – animate fragment display #1<br /><set><objectAnimator <br /> xmlns:android=<br /> http://schemas.android.com/apk/res/android<br /> <br />   android:propertyName="x"     android:valueType="floatType"    android:valueFrom="-1280"    android:valueTo="0"     android:duration="500" /><br /></set><br />
  • 64. Fragments<br />Get some magic – animate fragment display #2<br />FragmentTransaction ft = getFragmentManager().beginTransaction();<br />ft.setCustomAnimations( R.anim.slide_in_left, R.anim.slide_out_right );<br />…<br />Android fragments and animation<br />Reto Meier<br />
  • 65. Fragments<br />Strategy: maintain two sets of activities<br />private static boolean fragmentsSupported = false;<br /> private static void checkFragmentsSupported() throws NoClassDefFoundError {<br />fragmentsSupported = <br /> android.app.Fragment.class != null;<br /> }<br />
  • 66. Questions?<br />@suzalex<br />developer.motorola.com<br />
  • 67. MOTOROLA MOBILITY DEVELOPER NETWORK<br />Detailed product specs<br />Practical advice, technical articles, and documentation<br />Expert support via forums<br />Community interaction via blogs, podcasts, and social media<br />Global news, events, and training <br />Web: developer.motorola.com<br />Twitter: @motodev<br />
  • 68. GET STARTED NOW!<br />Test Your Apps on the MOTODEV App Validatorhttp://moto.ly/appvalidator<br />Join the MOTODEV CommunityAsk questions, read our blogs, and networkhttp://moto.ly/joinmotodev<br />Join our live chat with technical experts at the MOTODEV Office Hours March 16 2pm PSTDetails at http://moto.ly/officehours<br />Twitter: @motodev<br />#andevcon<br />
  • 69. thank you<br />
  • 70. BSD LICENSE<br />Except when otherwise noted, sample source code is provided under the following terms.<br /> Copyright (c) 2011, Motorola Mobility, Inc. All  rights reserved.<br /> Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:<br /> Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.<br /> Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.<br /> Neither the name of the Motorola, Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.<br /> THIS  SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY  EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED  WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE  DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE  FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL  DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR  SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER  CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,  OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE  OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH  DAMAGE.<br />
  • 71. APACHE 2 LICENSE<br />Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.<br /> Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.<br />

×