Top Tips for Android UIs - Getting the Magic on Tablets

  • 6,823 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,823
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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
    Top Tips for Android UIsGetting the Magic on Tablets
  • 2. @suzalex
    developer.motorola.com
    #AnDevCon
    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 Chipshttp://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 SENSESImagesTouchability
    03 USE COOL AESTHETICSThemes, themes, themes
    04 MAKE IT OBVIOUSAction barsFragments
  • 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. alignParentLeft
    Landscape layouts
    What went wrong?
    alignParentRight
    Small image
    Nothing in the center
  • 11. Landscape layouts
    Design for screen size AND orientation
  • 12. Landscape layouts
    The winning layout
    id="@+id/photo"centerHorizontal="true"
    layout_alignLeft="@id/photo"
    <RelativeLayout>layout_alignRight="@id/photo"
  • 13. Landscape layouts
    Optimize the user experience for wide screens
  • 14. Landscapelayouts
    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 spand up
    Be sure text is readable to real users
  • 17. Your app notification
    Rich notifications
    A key benefit of Android over other mobile platforms
  • 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
    A few moving parts
    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 intentelse     // start another
  • 25. Get the magic
    01 KEEP ERGONOMICS THOUGHTFUL
    02 ENGAGE THE SENSESImagesTouchability
    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
    Sizing images for XOOM
  • 29. 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" />
  • 30. Images
    Choose an image strategy
    • 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?
  • Images
    Memory vs file size – an example
    Autoscaling 32 MBmemory
    324 KB size
    Resource sets 23 MBmemory
    728 KB size
  • 34. Autoscaling uses memory.
    Custom image sets increase file size.
  • 35. Images
    Screens for different devices need different image sizes
  • 36. 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);
  • 37. High resolution icons
    Images
    Where to place images and icons
    Default, auto-scaled
    Prescaled for density
    Match 3.0 styling
    For xlarge screens
  • 38. Touchability
    Tablets are designed for touch
  • 39. Touchability
    Make sure all targets are tappable
  • 40. 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;
    }
  • 41. Touchability
    Use your old friends, events that handle touch
    onTouch()onClick()onItemClick()
  • 42. Get the magic
    01 KEEP ERGONOMICS THOUGHTFUL
    02 ENGAGE THE SENSES
    03 USE COOL AESTHETICSThemes, themes, themes
    04 MAKE IT OBVIOUS
  • 43. Themes
    Fit in with the device, or stand out
  • 44. Themes
    Honeycomb has two new holographic themes
    Theme.Holo
    Theme.Holo.Light
  • 45. Themes
    But they require hardware acceleration
    <application android:icon="@drawable/icon"
    android:label="@string/app_name"
    android:hardwareAccelerated="true" >
    Only available with Honeycomb
  • 46. Themes
    But you might be targeting multiple Android versions
    <uses-sdk android:minSdkVersion="8"
    android:targetSdkVersion="11" />
  • 47. Themes
    Create multiple themes for Android versions
    <style … parent= "@android:style/Theme">
    <style … parent= "@android:style/Theme.Holo">
  • 48. Be sure all API calls you use work for all API versions you support.
  • 49. Get the magic
    01 KEEP ERGONOMICS THOUGHTFUL
    02 ENGAGE THE SENSES
    03 USE COOL AESTHETICS
    04 MAKE IT OBVIOUSAction barsFragments
  • 50. Action bars
    Make your app features readily available
    App icon
    Drop-down dialog
    Action view
    Action items
  • 51. Action bars
    Coding is similar to options menus
    <menu> <item> …
    onCreateOptionsMenu()
    android:actionLayoutandroid:actionViewClass
    onOptionsItemSelected()
  • 52. 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>
  • 53. Action bars
    Handle options selection as usual
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
    case R.id.favorite:
    // do something
    return true;

    }
  • 54. 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>
  • 55. Action bars
    Get some magic, add a dialog
    Use AlertDialog.BuilderCreate a custom dialog in XMLUse a DialogFragment
  • 56. 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
    }
  • 57. Fragments
    Use to display more content and features, more fluidly
  • 58. Fragments
    You can use many patterns
  • 59. Fragments
    Have their own lifecycle but exist within an activity
    Fragment
    Activity
  • 60. Fragments
    Example: List-Detail pattern on smart phone
  • 61. Fragments
    On tablets, List and Detail can be in fragments
  • 62. Fragments
    Coding
    <FrameLayout>, extends Fragment
    <fragment>, extends ListFragment
  • 63. 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>
  • 64. 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
  • 65. Fragments
    Strategy: maintain two sets of activities
    private static boolean fragmentsSupported = false;
    private static void checkFragmentsSupported() throws NoClassDefFoundError {
    fragmentsSupported =
    android.app.Fragment.class != null;
    }
  • 66. Questions?
    @suzalex
    developer.motorola.com
  • 67. 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
  • 68. 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
  • 69. thank you
  • 70. 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.
  • 71. 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.