Top Tips for Android UIs - Getting the Magic on Tablets

Suzanne AlexandraMotorola
Top Tips for Android UIsGetting the Magic on Tablets

@suzalex
developer.motorola.com
#AnDevCon
Presentation Title Version 1.0 02.24.09

Video here

We're in a whole new place.
Bring the right stuff aboard.
Space Chipshttp://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
02 ENGAGE THE SENSESImagesTouchability
03 USE COOL AESTHETICSThemes, themes, themes
04 MAKE IT OBVIOUSAction barsFragments

Assume your users are using landscape.

Landscape layouts
Landscape often needs specialized layouts, on any device

Landscape layouts
Look what happens on the tablet

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

Landscape layouts
Design for screen size AND orientation

Landscape layouts
The winning layout
id="@+id/photo"centerHorizontal="true"
layout_alignLeft="@id/photo"
<RelativeLayout>layout_alignRight="@id/photo"

Landscape layouts
Optimize the user experience for wide screens

Landscapelayouts
Avoid the wide, wide ocean effect

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

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

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

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
A few moving parts
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 intentelse // start another

Get the magic
02 ENGAGE THE SENSESImagesTouchability
04 MAKE IT OBVIOUS

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

Images
Express it visually, for appeal

Images
Sizing images for XOOM

Images
Use scaleType to autoscale
<ImageView
android:id="@+id/photo2"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:src="@drawable/clover"
android:scaleType="centerCrop" />

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 MBmemory
324 KB size
Resource sets 23 MBmemory
728 KB size

Autoscaling uses memory.
Custom image sets increase file size.

Images
Screens for different devices need different image sizes

Images
Tip: 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);

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

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
Use your old friends, events that handle touch
onTouch()onClick()onItemClick()

Get the magic
03 USE COOL AESTHETICSThemes, 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 OBVIOUSAction barsFragments

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

Action bars
Coding is similar to options menus
<menu> <item> …
onCreateOptionsMenu()
android:actionLayoutandroid:actionViewClass
onOptionsItemSelected()

Action bars
But there's a new twist
<menu xmlns:android= "http://schemas.android.com/apk/res/android">
<item android:id="@+id/favorite"
android:title="@string/favorite" android:icon="@drawable/ic_menu_star"
android:showAsAction="ifRoom"|"withText" />
</menu>

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

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.BuilderCreate a custom dialog in XMLUse 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

Fragments
Have their own lifecycle but exist within an activity
Fragment
Activity

Fragments
Example: List-Detail pattern on smart phone

Fragments
On tablets, List and Detail can be in fragments

Fragments
Coding
<FrameLayout>, extends Fragment
<fragment>, extends ListFragment

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 );
…
Android fragments and animation
Reto Meier

Fragments
Strategy: maintain two sets of activities
private static boolean fragmentsSupported = false;
private static void checkFragmentsSupported() throws NoClassDefFoundError {
fragmentsSupported =
android.app.Fragment.class != null;
}

Questions?
@suzalex
developer.motorola.com

MOTOROLA MOBILITY DEVELOPER NETWORK
Detailed product specs
Practical advice, technical articles, and documentation
Expert support via forums
Community interaction via blogs, podcasts, and social media
Global news, events, and training
Web: developer.motorola.com
Twitter: @motodev

GET STARTED NOW!
Test Your Apps on the MOTODEV App Validatorhttp://moto.ly/appvalidator
Join the MOTODEV CommunityAsk questions, read our blogs, and networkhttp://moto.ly/joinmotodev
Join our live chat with technical experts at the MOTODEV Office Hours March 16 2pm PSTDetails at http://moto.ly/officehours
Twitter: @motodev
#andevcon

thank you

BSD LICENSE
Except when otherwise noted, sample source code is provided under the following terms.
Copyright (c) 2011, Motorola Mobility, Inc. All rights reserved.
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.

APACHE 2 LICENSE
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.

http://community.developer.motorola.com	484
http://www.bernie-eng.com	58
http://paper.li	6
http://mtrl.lithium.com	3
http://feeds2.feedburner.com	2
http://webcache.googleusercontent.com	2
url_unknown	1
http://pocketmobile.wordpress.com	1
http://www.slideshare.net	1
http://static.slidesharecdn.com	1
http://208.74.204.202	1

Top Tips for Android UIs - Getting the Magic on Tablets

by Motorola Mobility - MOTODEV on Mar 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 560

Statistics

Top Tips for Android UIs - Getting the Magic on Tablets — Presentation Transcript