Top Tips for Android UIs - Getting the Magic on Tablets

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.

@suzalex
developer.motorola.com

Presentation Title Version 1.0 02.24.09

We're in a whole new place.
Bring the right stuff aboard.

Space Chips
http://moto.ly/spacechips

Get the magic

01 KEEP ERGONOMICS THOUGHTFUL

02 ENGAGE THE SENSES

03 USE COOL AESTHETICS

04 MAKE IT OBVIOUS

Get the magic

Landscape layouts
Rich notifications
Text sizes

Images
Touchability

Themes, themes, themes

04 MAKE IT OBVIOUS
Action bars
Fragments
Drag and drop

Assume your users are using landscape.

Landscape layouts
Landscape often needs specialized layouts, on any device

Landscape layouts
Look what happens on the tablet

Landscape layouts
What went wrong?

alignParentLeft alignParentRight

Nothing in the center Small image

Landscape layouts
Design for screen size AND orientation

Landscape layouts
The winning layout

centerHorizontal="true"

<RelativeLayout>
layout_alignLeft layout_alignRight

Landscape layouts
Optimize the user experience for wide screens

Landscape layouts
Avoid the wide, wide ocean effect

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

Text sizes
Best practices

Scale with sp
18 sp and up
Be sure text is readable to real users

Rich notifications
A key benefit of Android over other mobile platforms

Your app notification

Rich notifications
Examples of when to use rich notifications

When new content arrives

When media is playing

Rich notifications
On Honeycomb, two notification displays

Tray

Popup

Rich notifications
Use the Notification.Builder class

Notification.Builder builder = new
Notification.Builder( this );

Like AlertDialog.Builder

Rich notifications
Build the notification you want

builder.setSmallIcon(R.drawable.icon)
.setContentTitle(title)
.setContentText(text)
.setContentIntent(pintent) // A pending intent
.setLargeIcon(myBitmap)
;

Rich notifications
Visual coding

setLargeIcon() setSmallIcon()

setContentTitle()
setContentText()

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);

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

Get the magic


Images
Touchability


04 MAKE IT OBVIOUS

Vision trumps all other senses.

Brain Rules
Dr. John Medina

Images
Express it visually, for appeal

Images
Screens for different devices need different image sizes

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?

Images
Memory vs file size – an example

Autoscaling 32 MB memory
324 KB size

Image sets 23 MB memory
728 KB size

Autoscaling uses memory.
Custom image sets increase file size.

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);

Images
Where to place images and icons

Default, auto-scaled

High resolution icons
Prescaled for density
Match 3.0 styling

Touchability
Tablets are designed for touch

Touchability
Make sure all targets are tappable

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;
}

Touchability
Watch how images transfer across devices

160 dpi – medium
16:9 aspect ratio

Get the magic



Themes, themes, themes

04 MAKE IT OBVIOUS

Themes
Fit in with the device, or stand out

Themes
Honeycomb has two new holographic themes

Theme.Holo

Theme.Holo.Light

Themes
But they require hardware acceleration

<application android:icon="@drawable/icon"
android:label="@string/app_name"
android:hardwareAccelerated="true" >

Only available with Honeycomb

Themes
But you might be targeting multiple Android versions

<uses-sdk android:minSdkVersion="8"
android:targetSdkVersion="11" />

Themes
Create multiple themes for Android versions

<style … parent=
"@android:style/Theme">

<style … parent=
"@android:style/Theme.Holo">

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

Get the magic




04 MAKE IT OBVIOUS
Action bars
Fragments
Drag and drop

Action bars
Make your app features readily available

App icon Drop-down dialog

Action view Action items

Action bars
Visual coding

<item android:showAsAction="true" … >

onCreateOptionsMenu()

android:actionLayout onOptionsItemSelected()
android:actionViewClass

Action bars
Step 1 – Target API level 11

<uses-sdk android:minSdkVersion="8"
android:targetSdkVersion="11" />

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" />

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;
…
}

Action bars
On XOOM and smartphone

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>

Action bars
Get some magic, add a dialog

Use AlertDialog.Builder
Create a custom dialog in XML
Use a DialogFragment

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
}

Fragments
Use to display more content and features, more fluidly

Fragments
You can use many patterns

Most common

Fragments
The starting fragment layout is the same across orientations

Fragments
But you can show or hide views

Fragments
In your main activity, find your fragments

Fragment gridFrag =
getFragmentManager().
findFragmentById(R.id.photogrid);

Fragment photoFrag =
getFragmentManager().
findFragmentById(R.id.the_frag);

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);
}

Fragments
Even better

Animated transition

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>

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();

Drag and drop
Creates direct, immediate physical engagement

Drag and drop
Has a number of event states

ACTION_DRAG_STARTED

ACTION_DRAG_ENTERED

Drag and drop
Has a number of event states

ACTION_DROP
ACTION_DRAG_ENDED

Drag and drop
Watch how it works across fragments

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;
DragEvent.ACTION_DRAG_EXITED){
isWithin = false;
}

continued …

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);
}
DragEvent.ACTION_DRAG_ENDED){
v.setBackgroundDrawable(noBorder);
}
return true;
}

Questions?

@suzalex
@motodev
developer.motorola.com

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/).

Top Tips for Android UIs - Getting the Magic on Tablets

More Related Content

What's hot (19)

Similar to Top Tips for Android UIs - Getting the Magic on Tablets (20)

More from Motorola Mobility - MOTODEV (20)

Recently uploaded (20)

Top Tips for Android UIs - Getting the Magic on Tablets