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

1. Suzanne Alexandra
Android Technology Evangelist
Motorola Mobility
Top Tips for Android UIs
Getting the Magic on Tablets
MOTOROLA and the Stylized M Logo are trademarks or registered trademarks of Motorola Trademark Holdings, LLC.
All other trademarks are the property of their respective owners. © 2011 Motorola Mobility, Inc. All rights reserved.

2. @suzalex
developer.motorola.com
Presentation Title Version 1.0 02.24.09

3. •Video here

4. We're in a whole new place.
Bring the right stuff aboard.
Space Chips
http://moto.ly/spacechips

5. Get the magic
01 KEEP ERGONOMICS THOUGHTFUL
02 ENGAGE THE SENSES
03 USE COOL AESTHETICS
04 MAKE IT OBVIOUS

6. Get the magic
01 KEEP ERGONOMICS THOUGHTFUL
Landscape layouts
Rich notifications
Text sizes
02 ENGAGE THE SENSES
Images
Touchability
03 USE COOL AESTHETICS
Themes, themes, themes
04 MAKE IT OBVIOUS
Action bars
Fragments
Drag and drop

7. Assume your users are using landscape.

8. Landscape layouts
Landscape often needs specialized layouts, on any device

9. Landscape layouts
Look what happens on the tablet

10. Landscape layouts
What went wrong?
alignParentLeft alignParentRight
Nothing in the center Small image

11. Landscape layouts
Design for screen size AND orientation

12. Landscape layouts
The winning layout
centerHorizontal="true"
<RelativeLayout>
layout_alignLeft layout_alignRight

13. Landscape layouts
Optimize the user experience for wide screens

14. Landscape layouts
Avoid the wide, wide ocean effect

15. Text sizes
Small text (like images) probably won't work

16. Text sizes
Best practices
Scale with sp
18 sp and up
Be sure text is readable to real users

17. Rich notifications
A key benefit of Android over other mobile platforms
Your app notification

18. Rich notifications
Examples of when to use rich notifications
When new content arrives
When media is playing

19. Rich notifications
On Honeycomb, two notification displays
Tray
Popup

20. Rich notifications
Use the Notification.Builder class
Notification.Builder builder = new
Notification.Builder( this );
Like AlertDialog.Builder

21. Rich notifications
Build the notification you want
builder.setSmallIcon(R.drawable.icon)
.setContentTitle(title)
.setContentText(text)
.setContentIntent(pintent) // A pending intent
.setLargeIcon(myBitmap)
;

22. Rich notifications
Visual coding
setLargeIcon() setSmallIcon()
setContentTitle()
setContentText()

23. Rich notifications
Get some magic - create a clickable button
RemoteViews layout = new RemoteViews(
getPackageName(), R.layout.notification);
layout.setTextViewText(R.id.notification_title,
getString(R.string.app_name));
layout.setOnClickPendingIntent(R.id.notification_button,
getDialogPendingIntent("Tapped") );
builder.setContent(layout);

24. Rich notifications
Strategy for backward compatibility
private static boolean isHoneycomb =
android.os.Build.VERSION.SDK_INT > 10;
if (!isHoneycomb)
// start one activity intent
else
// start another

25. Get the magic
01 KEEP ERGONOMICS THOUGHTFUL
02 ENGAGE THE SENSES
Images
Touchability
03 USE COOL AESTHETICS
04 MAKE IT OBVIOUS

26. Vision trumps all other senses.
Brain Rules
Dr. John Medina

27. Images
Express it visually, for appeal

28. Images
Screens for different devices need different image sizes

29. Images
Choose an image strategy
One set of images and let Android autoscale?
Custom resource sets for different sizes and densities?
Target the most commonly used density?
Retrieve images dynamically at runtime and scale for the device?

30. Images
Memory vs file size – an example
Autoscaling 32 MB memory
324 KB size
Image sets 23 MB memory
728 KB size

31. Autoscaling uses memory.
Custom image sets increase file size.

32. Images
Sample large images at runtime to save memory
BitmapFactory.Options options = new
BitmapFactory.Options();
options.inJustDecodeBounds = false;
options.inSampleSize = 4;
options.inScaled = true;
options.inTargetDensity = screenDensity;
Bitmap bitmap =
BitmapFactory.decodeResource(
getResources(),
R.drawable.clover, options);

33. Images
Where to place images and icons
Default, auto-scaled
High resolution icons
Prescaled for density
Match 3.0 styling

34. Touchability
Tablets are designed for touch

35. Touchability
Make sure all targets are tappable

36. Touchability
Make sure all targets are tappable
public View getView( int position,
View convertView, ViewGroup parent) {
ImageView i = new ImageView(mContext);
i.setImageResource(mImageIds[position]);
i.setLayoutParams(new Gallery.LayoutParams(
300, 200));
i.setScaleType(ImageView.ScaleType.FIT_XY);
i.setBackgroundResource(
mGalleryItemBackground);
return i;
}

37. Touchability
Watch how images transfer across devices
160 dpi – medium
16:9 aspect ratio

38. Get the magic
01 KEEP ERGONOMICS THOUGHTFUL
02 ENGAGE THE SENSES
03 USE COOL AESTHETICS
Themes, themes, themes
04 MAKE IT OBVIOUS

39. Themes
Fit in with the device, or stand out

40. Themes
Honeycomb has two new holographic themes
Theme.Holo
Theme.Holo.Light

41. Themes
But they require hardware acceleration
<application android:icon="@drawable/icon"
android:label="@string/app_name"
android:hardwareAccelerated="true" >
Only available with Honeycomb

42. Themes
But you might be targeting multiple Android versions
<uses-sdk android:minSdkVersion="8"
android:targetSdkVersion="11" />

43. Themes
Create multiple themes for Android versions
<style … parent=
"@android:style/Theme">
<style … parent=
"@android:style/Theme.Holo">

44. Be sure all API calls you use
work for all API versions you support.

45. Get the magic
01 KEEP ERGONOMICS THOUGHTFUL
02 ENGAGE THE SENSES
03 USE COOL AESTHETICS
04 MAKE IT OBVIOUS
Action bars
Fragments
Drag and drop

46. Action bars
Make your app features readily available
App icon Drop-down dialog
Action view Action items

47. Action bars
Visual coding
<item android:showAsAction="true" … >
onCreateOptionsMenu()
android:actionLayout onOptionsItemSelected()
android:actionViewClass

48. Action bars
Step 1 – Target API level 11
<uses-sdk android:minSdkVersion="8"
android:targetSdkVersion="11" />

49. Action bars
Step 2 – Place menu items on action bar
<item android:id="@+id/favorite"
android:title="@string/favorite"
android:icon="@drawable/ic_menu_star"
android:showAsAction="ifRoom" />

50. Action bars
Step 3 - Handle options selection as usual
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.favorite:
// do something
return true;
…
}

51. Action bars
On XOOM and smartphone

52. Action bars
Get some magic, style it
<style name="MyTheme"
parent="android:style/Theme.Holo" >
<item name="android:actionBarStyle">
@style/ActionBar</item>
</style>
<style name="ActionBar"
parent="android:style/Widget.Holo.ActionBar">
<item name="android:background">
@drawable/my_background</item>
</style>

53. Action bars
Get some magic, add a dialog
Use AlertDialog.Builder
Create a custom dialog in XML
Use a DialogFragment

54. Action bars
But do Honeycomb stuff only on Honeycomb
private static boolean isHoneycomb =
android.os.Build.VERSION.SDK_INT > 10;
if (isHoneycomb) {
// build custom dialog here
}

55. Fragments
Use to display more content and features, more fluidly

56. Fragments
You can use many patterns
Most common

57. Fragments
The starting fragment layout is the same across orientations

58. Fragments
But you can show or hide views

59. Fragments
In your main activity, find your fragments
Fragment gridFrag =
getFragmentManager().
findFragmentById(R.id.photogrid);
Fragment photoFrag =
getFragmentManager().
findFragmentById(R.id.the_frag);

60. Fragments
Check the orientation and adjust the views
private boolean photoInline = false;
photoInline = (photoFrag != null &&
getResources().getConfiguration().orientation
== Configuration.ORIENTATION_LANDSCAPE);
if (photoInline) {
// do something
} else if ( photoFrag != null ) {
getView().setVisibility(View.GONE);
}

61. Fragments
Even better
Animated transition

62. Fragments
Get some magic – animate fragment display #1
<set>
<objectAnimator
xmlns:android=
http://schemas.android.com/apk/res/android
android:propertyName="x"
android:valueType="floatType"
android:valueFrom="-1280"
android:valueTo="0"
android:duration="500" />
</set>

63. Fragments
Get some magic – animate fragment display #2
FragmentTransaction ft =
getFragmentManager().beginTransaction();
ft.setCustomAnimations( R.anim.slide_in_left,
R.anim.slide_out_right );
DetailsFragment newFrag =DetailsFragment.newInstance();
ft.replace(R.id.details_fragment_container, newFrag,
"detailFragment");
ft.commit();

64. Drag and drop
Creates direct, immediate physical engagement

65. Drag and drop
Has a number of event states
ACTION_DRAG_STARTED
ACTION_DRAG_ENTERED

66. Drag and drop
Has a number of event states
ACTION_DROP
ACTION_DRAG_ENDED

67. Drag and drop
Watch how it works across fragments

68. Drag and drop
Getting started #1
public boolean onDrag(View v, DragEvent event) {
if (event.getAction() == DragEvent.ACTION_DRAG_STARTED){
border = v.getBackground();
v.setBackgroundDrawable(redBorder);
} else if (event.getAction() ==
DragEvent.ACTION_DRAG_ENTERED){
isWithin = true;
} else if (event.getAction() ==
DragEvent.ACTION_DRAG_EXITED){
isWithin = false;
}
continued …

69. Drag and drop
Getting started #2
else if (event.getAction() == DragEvent.ACTION_DROP){
if (isWithin){
View view = (View) event.getLocalState();
ViewGroup owner = (ViewGroup) view.getParent();
owner.removeView(view);
LinearLayout container = (LinearLayout) v;
container.addView(view);
}
} else if (event.getAction() ==
DragEvent.ACTION_DRAG_ENDED){
v.setBackgroundDrawable(noBorder);
}
return true;
}

70. Questions?
@suzalex
@motodev
developer.motorola.com

71. thank you

72. LEGAL
LICENSE NOTICES
Except where noted, sample source code written by Motorola Mobility Inc. and provided to you is licensed as described below.
Copyright © 2010-2011, Motorola, Inc. All rights reserved except as otherwise explicitly indicated.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
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.
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.
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.
Other source code displayed in this presentation may be offered under other licenses.
Apache 2.0
Copyright © 2010, Android Open Source Project. All rights reserved unless otherwise explicitly indicated.
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.
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.
Creative Commons 3.0 Attribution License
Portions of this presentation are reproduced from work created and shared by Google (http://code.google.com/policies.html) and used according to terms described in
the Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/).