SlideShare a Scribd company logo
ALL SIZES FIT ONE
        A Thrilling Adventure in Application Design for
                            Tablets




Monday, September 12, 2011
ALBERT LAI
                 @albertlai
                 JEAN HSU
                 @jyhsu

                 ANDROID AT PULSE

Monday, September 12, 2011
SHAMELESS PLUG!




Monday, September 12, 2011
PART I
                             e Human Component




Monday, September 12, 2011
WHEN DEVELOPERS
  SAY SOMETHING IS
  IMPOSSIBLE...
  THEY’RE LYING



Monday, September 12, 2011
TABLETS ARE A
  COMPLETELY NEW
  EXPERIENCE. DESIGN
  APPROPRIATELY.



Monday, September 12, 2011
NEVER TRUST
   THE SYSTEM TO
   DO A HUMAN’S
   JOB



Monday, September 12, 2011
DIALOGS CAN KEEP
  YOUR APP FROM
  LOOKING SILLY




Monday, September 12, 2011
stretchy
                             SILLY




Monday, September 12, 2011
dialog
                             BETTER!




Monday, September 12, 2011
USERS ROTATE
  TABLETS. THIS IS A
  FACT OF LIFE.




Monday, September 12, 2011
THINK OF HANDHELD
  AND TABLET-STAND
  STYLE USAGES




Monday, September 12, 2011
THUMB FRIENDLY NAVIGATION
Monday, September 12, 2011
PART II
                      Now for the Technical Stuff




Monday, September 12, 2011
RELATIVE LAYOUTS
  ARE AN ANDROID
  DEVELOPER’S BEST
  FRIEND



Monday, September 12, 2011
ALIGN PARENT TOP
      ALIGN PARENT LEFT




                             ALIGN PARENT RIGHT
                             CENTER VERTICAL




ALIGN PARENT BOTTOM
  CENTER HORIZONTAL




Monday, September 12, 2011
ALIGN PARENT TOP                   ALIGN PARENT RIGHT
    ALIGN PARENT LEFT                   CENTER VERTICAL


                             ALIGN PARENT BOTTOM
                               CENTER HORIZONTAL




Monday, September 12, 2011
DEFINING A TABLET
  IS LIKE NAILING
  JELLO TO A WALL



                             ???   ???

Monday, September 12, 2011
IS THIS A REALLY BIG PHONE?

Monday, September 12, 2011
OR A REALLY SMALL TABLET?

Monday, September 12, 2011
IT’S DANGEROUS TO
  GO ALONE. TAKE
  THESE RESOURCE
  FOLDERS
   large, xlarge
   mdpi, hdpi, xhdpi



Monday, September 12, 2011
values/theme.xml


          <style name="ConditionalDialog"
                 parent="@android:style/Theme.Black">
              <item name="android:windowNoTitle">true</item>
          </style>




Monday, September 12, 2011
values-xlarge/theme.xml


          <style name="ConditionalDialog"
                 parent="@android:style/Theme.Dialog">
              <item name="android:windowNoTitle">true</item>
          </style>




Monday, September 12, 2011
HOW DO YOU KNOW
  WHAT SIZE DEVICE
  YOU’RE ON IN CODE?




Monday, September 12, 2011
IN YOUR LAYOUT XML
  FILE:

   <include layout="@layout/screen_size" />




Monday, September 12, 2011
layout/theme.xml

         <?xml version="1.0" encoding="utf-8"?>
         <View xmlns:android="http://schemas.android.com/apk/res/android"
         	 android:id="@+id/screen_size_normal"
         	 android:layout_width="wrap_content"
         	 android:layout_height="wrap_content"
         	 android:visibility="gone"/>




Monday, September 12, 2011
layout-large/theme.xml

         <?xml version="1.0" encoding="utf-8"?>
         <View xmlns:android="http://schemas.android.com/apk/res/android"
         	 android:id="@+id/screen_size_large"
         	 android:layout_width="wrap_content"
         	 android:layout_height="wrap_content"
         	 android:visibility="gone"/>




Monday, September 12, 2011
THERE ARE NO
  MAGIC NUMBERS.




Monday, September 12, 2011
THERE ARE NO
  MAGIC NUMBERS.

   DIMENS.XML
   INTEGERS.XML




Monday, September 12, 2011
NEVER SCALE UP
  ASSETS. USERS CAN
  TELL FROM THE
  PIXELS.



Monday, September 12, 2011
USE A HELPER CLASS
  FOR THE TRICKIER
  DIMENSIONS




Monday, September 12, 2011
screen_width / 3




Monday, September 12, 2011
PART III
                             Honeycombs




Monday, September 12, 2011
I CAN HAZ FEATURES?




Monday, September 12, 2011
I CAN HAZ FEATURES?


                             mEditor.apply();



                                   since API Level 9
Monday, September 12, 2011
REFLECTION
  Method m = SharedPreferences.Editor.class.getMethod("apply");

  // ...

  if (m != null) {
       m.invoke(mEditor);
  } else {
  	   mEditor.commit();
  }
  	 	 	
  	 	 	




Monday, September 12, 2011
WRAPPER
   classes not loaded (and verified) until it
   is called the first time

   only load the wrapper class if new
   functionality exists




Monday, September 12, 2011
PART IV
                             Optimizing for the
                               Honeycombs




Monday, September 12, 2011
ONE-LINERS FTW

    android:targetSdkVersion="11"



   android:hardwareAccelerated="true"




Monday, September 12, 2011
MENU PLEASE..




                             pulse before



                                  ??
Monday, September 12, 2011
BYOACTION BARS
                             LEFT-ALIGNED LOGO     ACTIONS




                                                             OVERFLOW
                                            Text




                                  NO MENU

Monday, September 12, 2011
FRAGMENTS
   (NOT THE BAD KIND)




Monday, September 12, 2011
PART IV
                              APKs




Monday, September 12, 2011
MULTIPLE APK
    SUPPORT

                             PHONE   TABLET
                              APK     APK




Monday, September 12, 2011
ONE APK TO RULE
    THEM ALL

                              SUPER
                             AWESOME
                               APK




Monday, September 12, 2011
TEST LIKE YOUR LIFE
    DEPENDS ON IT


                             before each release
                             and all the time
                             wherever you can
                             on every device
                             and every api level
Monday, September 12, 2011
BUT DON’T TAKE OUR
    WORD FOR IT
    EXPLORE AND
    CREATE!



Monday, September 12, 2011

More Related Content

PDF
A Marketing Plan for new Android App
PPTX
Marketing plan for a new android app
PPTX
Android Project Presentation
PPTX
SlideShare's New App for Android
PPTX
What is venture capital & venture capital in india
PDF
Venture capital ppt
PDF
Just Ship: Managing to Stay Out of the Way
PDF
The Third WordPress
A Marketing Plan for new Android App
Marketing plan for a new android app
Android Project Presentation
SlideShare's New App for Android
What is venture capital & venture capital in india
Venture capital ppt
Just Ship: Managing to Stay Out of the Way
The Third WordPress

Similar to Pulse News: porting android app to tablet (17)

PDF
The Third WordPress
PDF
To infinity and beyond!
PDF
Mobile? WT... F?
PDF
Guiding Communication
PDF
Developing a Progressive Mobile Strategy (Key Comm Version)
PDF
Keynote Appmarketing Sept 2011
PDF
Breaking the Mobile Web with HTML5
PDF
Educause - Building a Responsive Website for the Presidential Debate
PDF
JS Tooling in Rails 3.1
PDF
Community Based Design with Youth Radio
PDF
Cours1: design d'interaction
PDF
Cours1 design d'interaction_csv
PDF
The Contextual Experience of the Mobile Web
PDF
Asml esitys geniem
PDF
The Third WordPress
PDF
TRNK Presentation
PDF
How to speed-code a success story
The Third WordPress
To infinity and beyond!
Mobile? WT... F?
Guiding Communication
Developing a Progressive Mobile Strategy (Key Comm Version)
Keynote Appmarketing Sept 2011
Breaking the Mobile Web with HTML5
Educause - Building a Responsive Website for the Presidential Debate
JS Tooling in Rails 3.1
Community Based Design with Youth Radio
Cours1: design d'interaction
Cours1 design d'interaction_csv
The Contextual Experience of the Mobile Web
Asml esitys geniem
The Third WordPress
TRNK Presentation
How to speed-code a success story
Ad

More from Paris Android User Group (20)

PDF
Workshop: building your mobile backend with Parse - Droidcon Paris2014
PDF
Workshop: Amazon developer ecosystem - DroidCon Paris2014
PDF
Extending your apps to wearables - DroidCon Paris 2014
PDF
Scaling android development - DroidCon Paris 2014
PDF
Ingredient of awesome app - DroidCon Paris 2014
PDF
Framing the canvas - DroidCon Paris 2014
PDF
Deep dive into android restoration - DroidCon Paris 2014
PDF
Archos Android based connected home solution - DroidCon Paris 2014
PDF
Porting VLC on Android - DroidCon Paris 2014
PDF
Robotium vs Espresso: Get ready to rumble ! - DroidCon Paris 2014
PDF
Buildsystem.mk - DroidCon Paris 2014
PDF
maximize app engagement and monetization - DroidCon Paris 2014
PPTX
Using the android ndk - DroidCon Paris 2014
PPTX
Holo material design transition - DroidCon Paris 2014
PPTX
Death to passwords - DroidCon Paris 2014
PPTX
Google glass droidcon - DroidCon Paris 2014
PPTX
Embedded webserver implementation and usage - DroidCon Paris 2014
PDF
Petit design Grande humanité par Geoffrey Dorne - DroidCon Paris 2014
PDF
What's new in android 4.4 - Romain Guy & Chet Haase
PDF
Efficient Image Processing - Nicolas Roard
Workshop: building your mobile backend with Parse - Droidcon Paris2014
Workshop: Amazon developer ecosystem - DroidCon Paris2014
Extending your apps to wearables - DroidCon Paris 2014
Scaling android development - DroidCon Paris 2014
Ingredient of awesome app - DroidCon Paris 2014
Framing the canvas - DroidCon Paris 2014
Deep dive into android restoration - DroidCon Paris 2014
Archos Android based connected home solution - DroidCon Paris 2014
Porting VLC on Android - DroidCon Paris 2014
Robotium vs Espresso: Get ready to rumble ! - DroidCon Paris 2014
Buildsystem.mk - DroidCon Paris 2014
maximize app engagement and monetization - DroidCon Paris 2014
Using the android ndk - DroidCon Paris 2014
Holo material design transition - DroidCon Paris 2014
Death to passwords - DroidCon Paris 2014
Google glass droidcon - DroidCon Paris 2014
Embedded webserver implementation and usage - DroidCon Paris 2014
Petit design Grande humanité par Geoffrey Dorne - DroidCon Paris 2014
What's new in android 4.4 - Romain Guy & Chet Haase
Efficient Image Processing - Nicolas Roard
Ad

Recently uploaded (20)

PPTX
sap open course for s4hana steps from ECC to s4
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Network Security Unit 5.pdf for BCA BBA.
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Empathic Computing: Creating Shared Understanding
PDF
cuic standard and advanced reporting.pdf
PPTX
Spectroscopy.pptx food analysis technology
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Electronic commerce courselecture one. Pdf
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
KodekX | Application Modernization Development
sap open course for s4hana steps from ECC to s4
NewMind AI Weekly Chronicles - August'25 Week I
Network Security Unit 5.pdf for BCA BBA.
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Empathic Computing: Creating Shared Understanding
cuic standard and advanced reporting.pdf
Spectroscopy.pptx food analysis technology
Mobile App Security Testing_ A Comprehensive Guide.pdf
20250228 LYD VKU AI Blended-Learning.pptx
Electronic commerce courselecture one. Pdf
Understanding_Digital_Forensics_Presentation.pptx
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Agricultural_Statistics_at_a_Glance_2022_0.pdf
Per capita expenditure prediction using model stacking based on satellite ima...
Advanced methodologies resolving dimensionality complications for autism neur...
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
KodekX | Application Modernization Development

Pulse News: porting android app to tablet

  • 1. ALL SIZES FIT ONE A Thrilling Adventure in Application Design for Tablets Monday, September 12, 2011
  • 2. ALBERT LAI @albertlai JEAN HSU @jyhsu ANDROID AT PULSE Monday, September 12, 2011
  • 4. PART I e Human Component Monday, September 12, 2011
  • 5. WHEN DEVELOPERS SAY SOMETHING IS IMPOSSIBLE... THEY’RE LYING Monday, September 12, 2011
  • 6. TABLETS ARE A COMPLETELY NEW EXPERIENCE. DESIGN APPROPRIATELY. Monday, September 12, 2011
  • 7. NEVER TRUST THE SYSTEM TO DO A HUMAN’S JOB Monday, September 12, 2011
  • 8. DIALOGS CAN KEEP YOUR APP FROM LOOKING SILLY Monday, September 12, 2011
  • 9. stretchy SILLY Monday, September 12, 2011
  • 10. dialog BETTER! Monday, September 12, 2011
  • 11. USERS ROTATE TABLETS. THIS IS A FACT OF LIFE. Monday, September 12, 2011
  • 12. THINK OF HANDHELD AND TABLET-STAND STYLE USAGES Monday, September 12, 2011
  • 13. THUMB FRIENDLY NAVIGATION Monday, September 12, 2011
  • 14. PART II Now for the Technical Stuff Monday, September 12, 2011
  • 15. RELATIVE LAYOUTS ARE AN ANDROID DEVELOPER’S BEST FRIEND Monday, September 12, 2011
  • 16. ALIGN PARENT TOP ALIGN PARENT LEFT ALIGN PARENT RIGHT CENTER VERTICAL ALIGN PARENT BOTTOM CENTER HORIZONTAL Monday, September 12, 2011
  • 17. ALIGN PARENT TOP ALIGN PARENT RIGHT ALIGN PARENT LEFT CENTER VERTICAL ALIGN PARENT BOTTOM CENTER HORIZONTAL Monday, September 12, 2011
  • 18. DEFINING A TABLET IS LIKE NAILING JELLO TO A WALL ??? ??? Monday, September 12, 2011
  • 19. IS THIS A REALLY BIG PHONE? Monday, September 12, 2011
  • 20. OR A REALLY SMALL TABLET? Monday, September 12, 2011
  • 21. IT’S DANGEROUS TO GO ALONE. TAKE THESE RESOURCE FOLDERS large, xlarge mdpi, hdpi, xhdpi Monday, September 12, 2011
  • 22. values/theme.xml <style name="ConditionalDialog" parent="@android:style/Theme.Black"> <item name="android:windowNoTitle">true</item> </style> Monday, September 12, 2011
  • 23. values-xlarge/theme.xml <style name="ConditionalDialog" parent="@android:style/Theme.Dialog"> <item name="android:windowNoTitle">true</item> </style> Monday, September 12, 2011
  • 24. HOW DO YOU KNOW WHAT SIZE DEVICE YOU’RE ON IN CODE? Monday, September 12, 2011
  • 25. IN YOUR LAYOUT XML FILE: <include layout="@layout/screen_size" /> Monday, September 12, 2011
  • 26. layout/theme.xml <?xml version="1.0" encoding="utf-8"?> <View xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/screen_size_normal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="gone"/> Monday, September 12, 2011
  • 27. layout-large/theme.xml <?xml version="1.0" encoding="utf-8"?> <View xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/screen_size_large" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="gone"/> Monday, September 12, 2011
  • 28. THERE ARE NO MAGIC NUMBERS. Monday, September 12, 2011
  • 29. THERE ARE NO MAGIC NUMBERS. DIMENS.XML INTEGERS.XML Monday, September 12, 2011
  • 30. NEVER SCALE UP ASSETS. USERS CAN TELL FROM THE PIXELS. Monday, September 12, 2011
  • 31. USE A HELPER CLASS FOR THE TRICKIER DIMENSIONS Monday, September 12, 2011
  • 32. screen_width / 3 Monday, September 12, 2011
  • 33. PART III Honeycombs Monday, September 12, 2011
  • 34. I CAN HAZ FEATURES? Monday, September 12, 2011
  • 35. I CAN HAZ FEATURES? mEditor.apply(); since API Level 9 Monday, September 12, 2011
  • 36. REFLECTION Method m = SharedPreferences.Editor.class.getMethod("apply"); // ... if (m != null) { m.invoke(mEditor); } else { mEditor.commit(); } Monday, September 12, 2011
  • 37. WRAPPER classes not loaded (and verified) until it is called the first time only load the wrapper class if new functionality exists Monday, September 12, 2011
  • 38. PART IV Optimizing for the Honeycombs Monday, September 12, 2011
  • 39. ONE-LINERS FTW android:targetSdkVersion="11" android:hardwareAccelerated="true" Monday, September 12, 2011
  • 40. MENU PLEASE.. pulse before ?? Monday, September 12, 2011
  • 41. BYOACTION BARS LEFT-ALIGNED LOGO ACTIONS OVERFLOW Text NO MENU Monday, September 12, 2011
  • 42. FRAGMENTS (NOT THE BAD KIND) Monday, September 12, 2011
  • 43. PART IV APKs Monday, September 12, 2011
  • 44. MULTIPLE APK SUPPORT PHONE TABLET APK APK Monday, September 12, 2011
  • 45. ONE APK TO RULE THEM ALL SUPER AWESOME APK Monday, September 12, 2011
  • 46. TEST LIKE YOUR LIFE DEPENDS ON IT before each release and all the time wherever you can on every device and every api level Monday, September 12, 2011
  • 47. BUT DON’T TAKE OUR WORD FOR IT EXPLORE AND CREATE! Monday, September 12, 2011