Designing Apps for the Motorola XOOM

Motorola Mobility Anna Schaller Peter van der Linden Android Technology Evangelists Developer Platforms and Services Coding Practices Designing Apps for the Motorola XOOM

Motorola Mobility @ Andevcon © 2010 Motorola Mobility, Inc. 01 DESIGNING APPS FOR THE MOTOROLA XOOM (session 103 @ 8:30) Anna Schaller 02 CODING FOR ANDROID IN C/C++ and RENDERSCRIPT Peter van der Linden 03 TUESDAY KEYNOTE – “A view from Mototola Mobility” (@ 10:00) Christy Wyatt, VP Software and Services 04 TOP TIPS FOR ANDROID UIs (session 205 @ 11:15 Tues) Suzanne Alexandra 05 YOUR FIRST FLASH APPLICATION FOR ANDROID (session 405 @ 3:45 Tues) Suzanne Alexandra 06 BEYOND ENGLISH: Make Your Android App a Global Success (session 801 @ 3:00 Wed) Eric Cloninger

Introducing the tablet
Screen : 10.1” diagonal (xlarge), WXGA (1280 x 800), 160 dpi (mdpi)
Memory : 32 GB flash storage
Processor : nVidia Tegra 2 dual core
Sensors : accelerometer, barometer, gyroscope, compass, ambient light, GPS, no proximity or vibration, 4-way rotation
Connectivity : 802.11 a/b/g/n, Bluetooth, HDMI
Camera : 2mp fixed focus front / 5mp auto focus rear
Media : 720p HD video recording, 1080p HD playback
External storage : 32 GB SD card post-launch
Platform : Android 3.0 (Honeycomb)
App Environments: Adobe AIR 2.6, Android, NDK, (Flash 10.1 coming)
Lots and lots of software changes……..

Where did everything go? Status bar Menu Key Home Key Back Button Bonus Button (usually search) Volume Keys (up/down) Power Button

Interacting with the tablet Volume Keys (up/down) Power Button

Interacting (con’t) System Bar Not a menu button

Application UI Design Changes
Holographic Theme
System Bar Dimming
Action bar
Fragments
New widgets
Updated Notifications
System Clipboard
Drag-and-drop
Page 7 Presentation Title Version 1.0 02.24.09

Holographic Theme
Inherited by all apps built against Android 3.0
minSdkVersion or targetSdkVersion = 11 * and * enable hardware acceleration ( android:hardwareAccelerated=“true” )
If SDK version <= 9 then your application uses the widget designs from Android 2.3 and does not inherit the holographic theme
Two versions exist
Default dark background with white letters @android:style/Theme.Holo
Inversed holographic white with dark letters @android:style/Theme.Holo.Light

Dimming the System Bar
Lights out mode
Dims the system bar by replacing the icons with holographic “dots” (system bar is not removed)
View v = findViewById(R.id. view_id);
v.setSystemUiVisibility( View. STATUS_BAR_HIDDEN );

Action Bar – Simple
Replaces traditional title bar at top of app
Application Icon with title
Overflow menu
Creating a menu has not changed
public boolean onCreateOptionsMenu(Menu menu) {…}
public boolean onOptionsItemSelected(MenuItem item) {
case R.id.menu_item …}
/res/menu/ menu_definitions.xml

Action Bar – Tabbed with Action Items
Application Icon can be made actionable
Tabbed interface on Action Bar
Individual action items rather than listed on overflow menu
With or without text; with or without icon
See android.app.actionbar
“ Actionable” Icon Tabs Action Items

Going full screen – removing the action bar
You can hide the action bar *however* your application loses access to your menu
<activity android:theme= "@android:style/Theme.NoTitleBar" >
Another way to hide action bar is programmatically then allow user to toggle
ActionBar bar = getActionBar();
if (bar != null) {
if (bar. isShowing() ) bar. hide() ;
else bar. show() ;
}

Menus
To support forward compatibility added soft menu button along system bar
minSdkVersion and targetSdkVersion < 11

Fragments
Allows an application to be divided into subcomponents that can be individually managed and combined in various ways, such as creating a multi-pane UI.

Fragments (con’t)
A fragment must always be embedded in an Activity
List Fragment Fragment Activity

Fragments (base fragment)
Create class that extends Fragment
Displays content similar to an Activity (images, text, application widgets)
Can be attached to another fragment or tab
Can add items to the Activity’s overflow menu (action bar)
Does not have to be visible (can operate behind the scenes)
If it is visible will require it’s own layout file
(Base) Fragment

Fragments (adding to an activity) XOOM_hc_app /res/layout/main.xml (List) Fragment Activity layout (Content) Fragment with embedded image PictureList.java ContentFragment.java

Fragments (con’t)
How-to information in 3.0 Developer Guide on Fragments
See 3.0 Reference for APIs
android.app.Fragment
android.app.ListFragment
Displays a list similar to ListActivity
android.app.DialogFragment
Displays a floating dialog
android.app.FragmentManager
Interface for interacting with the fragment ( findFragmentById )
android.app.FragmentTransaction
APIs for fragment operations (add, remove, replace, hide, show)
The Android 3.0 Fragments API blog post
more detail on Fragments for all releases of Android 1.6 and above

New Views
Application Widgets
PopupMenu ( android.widget.PopupMenu )
Menu is attached to a view (button for instance)
Home Screen Widgets
StackView ( android.widget.StackView )
A view that displays its children in a 3D stack and allows users to discretely swipe through the children.
Rich Notifications ( android.app.Notification.Builder )
build notification layouts

Working example
Honeycomb Gallery in SDK samples showcases…..
Action Bar with tabbed interface, action item menu, and overflow menu
FragmentList and fragment in portrait and landscape
New theme
Drag and drop
Animation
Hide/Show
Action Bar
Lights Out
Mode

Graphics and Multimedia
Hardware acceleration for 2D Graphics
New animation framework
Texture compression
Sensors
Media Support
Presentation Title Version 1.0 02.24.09

Hardware Acceleration
Built in support for acceleration on a subset of 2D graphics (Canvas API)
Globally for entire application or individual activity by setting appropriate node in manifest
android:hardwareAccelerated=“true”
Locally on each activity and/or window programmatically through WindowManager.LayoutParams
Window win = getWindow();
win.setFlags
(WindowManager.LayoutParams. FLAG_HARDWARE_ACCELERATED,
WindowManager.LayoutParams. FLAG_HARDWARE_ACCELERATED );
Test to see if canvas is hardware accelerated with isHardwareAcclerated()

Animation
Two animation systems you can choose from:
View animations ( android.view.animation )
Tween animations
Performs a series of simple transformations on the contents of a View object.
Basic transitions include rotating, fading, moving, and stretching on a graphic.
Frame animations
Frame-by-frame animation lets you load a series of Drawable resources one after another to create an animation.
Property animations ( android.animation // new in honeycomb)
Can animate almost anything (not just views such as drawables!)
Extends the set of properties that can be animated (group and play)
View animations are simpler & quicker, property animations do more
See http://developer.android.com/guide/topics/graphics/animation.html

Texture Compression
Different chipsets support different compression types
Formats for mobile:
ETC1 supported on all Android devices with OpenGL ES 2.0 but no alpha channel
PVRTC (PowerVR SGX 530 GPU from Imagination Technologies)
ATITC (Adreno GPU from Qualcomm)
S3TC or DXT1, 3, 5 (nVidia GPU)
Solution: Texture compression filtering
<supports-gl-textures android:name=“string”>
where string is the OpenGL ES extension for a compression type
for instance android:name=“GL_EXT_texture_compression_s3tc”

Texture Compression (con’t)
Works with every API level, not just Honeycomb
Need to define one tag for every format supported
List of supported compression types in Android Dev Guide - Android Manifest tags http://developer.android.com/guide/topics/manifest/supports-gl-texture-element.html
See MotoDev Technical Article for tools http://developer.motorola.com/docstools/library/understanding-texture-compression/

Sensors
Accelerometer, Gyroscope, Magnetometer, Barometer, Compass, Ambient Light, GPS, no proximity sensor, no vibration
Device Orientation
Natural orientation is landscape with 4-way rotation
-y e +y es +x -x +z +y e +y e -x +x -y e -y e +x -x Rotation 0 Rotation 0 Rotation 90

Sensors (con’t)
Use android.view.Display.getRotation() to get current direction
Adjust x/y values for all four rotation types
ROTATION_0
ROTATION_90
ROTATION_180
ROTATION_270
See AccelerometerPlay sample in SDK
More detail in Android blog post One Screen Turn Deserves Another

Sensors -- barometer sensor reading Page Version 1.0 © 2010 Motorola Mobility, Inc. // www.engineeringtoolbox.com/air-altitude-pressure-d_462.html // lower by ~ 1.2 gm /cm2 for each 10 meter gain in elevation

Media Support -- Getting content on the device
Digital media file transfer
Built in support for Media/Picture Transport Protocol (MTP/PTP).
User plugs USB cable in and the Android File Transfer application launches.
Users can copy pictures, movies, videos, ringtones, podcasts, and more to predefined folders, or create new folders for other content.

10 things you can do right now
Download the Honeycomb SDK (and updated tools) and test drive your app on the emulator.
Note if you have the preview SDK replace it with the updated public SDK.
Change the targetSdkVersion to “ 11 ” and see what changes.
Add /res/layout-xlarge and /res/layout-xlarge-port folders to your project with layouts optimized for the larger screen.
Update error handling to exit gracefully rather than defaulting to ANRs or letting the user hang.

Revisit your graphics in /res/drawable-< density > .
Put background into ImageView and set scaleType=centerCrop
Patterned images can be tiled
Read into createScaledBitmap() using the dimensions from DisplayMetrics
Use the 9-patch tool to create a “stretchable” region

Determine if you are going with one code base or two.
Build your app against Android 3.0 and install on the emulator.
Begin testing the features of the Action Bar.
Add a fragment to your activity.
Download the Honeycomb SDK (and updated tools) and test drive your app on the emulator.

CODING FOR ANDROID IN C/C++
01 INSTALLING THE TOOLS
02 WRITE YOUR C CODE
03 BUILD YOUR C CODE
04 CALLING C FROM JAVA (the JNI)
05 SUMMARY - Wrap up, Q & A
© 2011 Motorola Mobility, Inc.

Why C/C++ Code on Android?
Open GL
Performance
Porting!

NDK C++ limitations
Originally for writing performance-critical parts of code in C
You don’t need OOP abstraction for that.
(And Dalvik VM is pretty fast, with JIT compiling since 2.2)
C++ support is somewhat restricted
exceptions are not supported
known bugs in static constructor/destructor invocations.
So NDK code is more likely to be written in C rather than C++ .

Supported CPU architectures
NDK supports two ARM instruction sets:
ARMv5TE (includes Thumb-1 instructions). This is the default target, and code compiled for this will run on all ARM-based Android devices. Choose other target, by changing one line in the Application.mk makefile.
ARMv7-A (includes Thumb-2 and VFPv3-D16 instructions, with optional support for NEON/VFPv3-D32 instructions). Code compiled for ARMv7-A will run only on devices such as the Verizon Droid or Motorola XOOM that have a v7 CPU. Code for NEON will only run on an ARMv7 with support for NEON.
There’s a third architecture “in the works” (experimental, no support)
x86 instruction set

Installing the Tools

Downloading the Native Development Kit
Check compatibility: XP or Vista, MacOS X 10.5, Ubuntu
Download the 50 MB zip or tar.bz2 file from:
http://developer.android.com/sdk/ndk/index.html
Uncompress it anywhere; remember where in $NDK
export NDK=~/android-ndk-r5b
Requires GNU make and GNU awk! Windows users – install Cygwin 1.7 or later

Windows users
Download and install Cygwin 1.7 or later
Unix/Linux command line tools for Windows users
http://cygwin.com

Windows and MacOS X tips
Don’t use pathnames with spaces in them! Anywhere!
Cygwin only installs the base packages
You need the development packages. So install the entire Devel branch.
Run setup.exe
Click the word “Default” next to the root Devel node
“ Default” changes to “Install” for the Devel node
Click “next” to install. Go to lunch while it installs
Let it create a cygwin console icon on your desktop
Type “make –v” in the cygwin console to check it’s OK.

Unpack the Native Development Kit
Gives you 7 folders, and a bunch of things to read

NDK folders
build – 4 folders of awk & shell scripts, makefiles to build your C/C++ files

Add C/C++ support into Eclipse
Eclipse has a plugin for C/C++, just like for Android
Get it using Eclipse
Help > Install new software
Type http://download.eclipse.org/releases/helios/
in “work with” field (or whatever release you use)
Usual caveats about network proxies at work (set them under MOTODEV Studio > Preferences > Network Conn.)
Click Programming Langs > C/C++ Development Tools

There’s a plugin for C/C++, just like for Android
Get it using Eclipse
Help > Install new software

Write your C code

General Approach
You start with a Java Android app, and add NDK pieces to it.
Put your native C/C++ sources in $PROJECT/jni:
Build your native code into libraries
Your Android Java code can call into these native libraries
Native code can also call back into Java, and access Java objects

Create the jni folder for your project
Highlight the Eclipse project that will use native code
Your package name is used to access the native code, so keep it short and simple. e.g. “com.greet” for training purposes
File > New > Folder give it the name “jni”
Inside that newly-created jni folder, we will add
a makefile
some C files

Populate the jni folder in your project
File > New > Other …
Select “General” then “file”
Choose the jni folder, with a filename of “Android.mk” > Finish
Repeat, creating a file “myhello.c”, also in the jni folder

Populate the jni folder in your project - mkfile
Edit file jni/Android.mk that you just created
Put these magic words into the makefile
LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) # our source file and the library built from it LOCAL_MODULE := hello LOCAL_SRC_FILES := hello.c include $(BUILD_SHARED_LIBRARY)

Diversion about make
Make was created by Stu Feldman in 1977 at Bell Labs
In 2003, Dr. Feldman received the ACM Software System Award for authoring this widespread tool.
You didn’t hear it from me, but software lore has it that …
# Each command that follows dependency line , # i.e. the TARGET to the left, must be indented by a TAB character. target: component-to-build <TAB>commands-to-build-it

Populate the jni folder in your project – C code
Edit file jni/myhello.c that you just created
Put these magic words into the C file
Uses the JNIEnv object to create a Java string from a literal
#include <string.h> #include <jni.h> jstring Java_com_greet_MyActivity_myCFunction (JNIEnv* env, jobject javaThis) { return (*env)->NewStringUTF(env, "Hello from native code!"); }

C code explained
When the JVM invokes a native function, it passes
a JNIEnv pointer, (structure that has the interface to JVM for C)
a jobject pointer, (the “this” object)
any Java arguments declared by the Java method.
These types come from #include <jni.h> (look under “platforms”)
Your C method must be written to expect these args
The C method is named “Java” _ classname _ activity_methodname
… and did you notice the memory leak?
#include <string.h> #include <jni.h> jstring Java_com_greet_MyActivity_myCFunction (JNIEnv* env, jobject javaThis) { return (*env)->NewStringUTF(env, "Hello from native code!"); }

Build your C code

Calling Between Languages
Android follows the standard way to talk between Java and C
JNI – Java Native Interface
Link to JNI docs http://java.sun.com/docs/books/jni/
That includes a complete book, a tutorial, examples etc.

Build your C library
Bring up a terminal window, and cd into your project jni folder
Use “ndk-build” script from the NDK directory (just a wrapper round GNU Make) (can put $NDK in your path, if you want)
The script compiles your C code, makes it into a shared library
Moves the libhello.so into a new project folder libs/armeabi

General approach for building a library
Save files in Eclipse
Bring up a terminal window, and cd into your project jni folder
Run the ndk-build script to turn your C code into a .so
That lib*.so will be added into the app’s .apk file
File > Refresh in Eclipse (to sync with filesystem)
$ cd MYECLIPSEPROJECT /jni $ $NDK/ndk-build Compile thumb : hello <= hello.c SharedLibrary : libhello.so Install : libhello.so => libs/armeabi/libhello.s

Build Your Library - Summary
Eclipse doesn’t build your NDK code, GNU Make does
The C/C++ plugin gives you syntax colors and editing (only)
Run the “ndk-build” script after each edit of your C code
Then click File > Refresh, (F5), to keep Eclipse in sync with your native files.

The Java end of JNI

Java code that calls to the native code
Start with the basic app that Eclipse gives you
package com.greet; import android.app.Activity; import android.os.Bundle; public class MyActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }

Add the library load
Add the call to load our native library libhello.so
Name must match library name without “lib” and “.so”
So libhello.so is “hello”
static { System.loadLibrary(”hello"); }

Add the declaration of the native function
Add the prototype declaration of the C function
On the C side, it has two explicit arguments, an envp, a this
But on the Java side, those arguments are implicit
private native String myCFunction();

Add the call to the native function
We’re going to get the string from C, and toast it.
import static android.widget.Toast.*; import android.widget.Toast; . . . String msg = myCFunction(); Toast.makeText(this, msg, LENGTH_LONG).show();

Putting it all together package com.greet; import android.app.Activity; import android.os.Bundle; import static android.widget.Toast.*; import android.widget.Toast; public class MyActivity extends Activity { static { System.loadLibrary("hello"); } private native String myCFunction(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); String msg = myCFunction(); Toast.makeText(this, msg, LENGTH_LONG).show(); } }

Summary

The Beginning
This may be a beautiful beginning to a long road
http://groups.google.com/group/android-ndk/topics
http://java.sun.com/docs/books/jni/
http://developer.android.com/sdk/ndk/index.html

Page Version 1.0 © 2010 Motorola Mobility, Inc. Renderscript
New, high performance 3D graphics API
Was used in Froyo for Live Wallpaper
Is used in Honeycomb for Books and YouTube app
Honeycomb introduces Renderscript as a public API
For performance critical code where the traditional Open GL ES framework APIs are not fast enough!

Page Version 1.0 © 2010 Motorola Mobility, Inc. Renderscript API
A “computing” API for locating moving points in 3D
A “rendering” API for drawing textures over the points
A C-based scripting language to access this API
Only goal: squeeze last ounce of graphics performance!
Approach: API is a thin layer over features that are hardware-supported
http://community.developer.motorola.com/t5/MOTODEV-Blog/Introduction-to-Renderscript/ba-p/12136

Page Renderscript API
Android build tools compile your Renderscript .rs file to intermediate bytecode
and package it inside your application's .apk file
On the device, the bytecode is compiled (just-in-time) to machine code that is optimized for the exact device that it is running on
Machine code is cached for future use
This eliminates the need to target a specific architecture during the development process. Excellent!

Page Version 1.0 Example .rs file (from Honeycomb samples)
#pragma rs java_package_name(com.android.rs.helloworld)
#include "rs_graphics.rsh” // header with graphics API’s
// gTouchX and gTouchY are variables that will be reflected for use
// by the java API. We can use them to notify the script of touch events.
int gTouchX;
int gTouchY;
// This is invoked automatically when the script is created
void init() {
gTouchX = 50.0f;
gTouchY = 50.0f;
}
int root(int launchID) {
// Clear the background color
rsgClearColor(0.0f, 0.0f, 0.0f, 0.0f);
// Tell the runtime what the font color should be
rsgFontColor(1.0f, 1.0f, 1.0f, 1.0f);
// Introduce ourselves to the world by drawing a greeting
// at the position user touched on the screen
rsgDrawText("Hello World!", gTouchX, gTouchY);
// Return value tells RS roughly how often to redraw
// in this case 20 ms
return 20;
}

GET STARTED NOW!
Test Your Apps on the MOTODEV App Validator at http://moto.ly/ appvalidator
Join the MOTODEV Community: Ask questions, read our blogs, and network at http://moto.ly/ joinmotodev
Join our live chat with technical experts during the MOTODEV Office Hours March 16 2pm PST - Details at http://moto.ly/ officehours

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

http://community.developer.motorola.com	272
http://bit.ly	93
http://mtrl.lithium.com	3
https://bitly.com	2
http://feeds2.feedburner.com	1
http://static.slidesharecdn.com	1
http://www.slideshare.net	1
http://webcache.googleusercontent.com	1

Designing Apps for the Motorola XOOM

by Motorola Mobility - MOTODEV

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 374

Statistics

Designing Apps for the Motorola XOOM Presentation Transcript