SlideShare a Scribd company logo
Tuesday, May 25, 2010
Tuesday, May 25, 2010
Casting a Wide Net:
      Targeting All Android Devices
      Justin Mattson
      Developer Advocate
      19 May 2010




Tuesday, May 25, 2010
House keeping
          Use Wave to see live notes and ask questions



                         http://tinyurl.com/io10casting




      3


Tuesday, May 25, 2010
Agenda
          Resource Loading
          Image & Drawable Considerations
          Adapting to API Availability
          Testing




      4


Tuesday, May 25, 2010
Resource Loading
       • Based on current system configuration
       • If config changes, your app restarts (eg. orientation change)
       • Hierarchy of qualifiers




      5


Tuesday, May 25, 2010
Resource loading
      Screen size
       • Physical size of the screen
       • Buckets
           – small: <~3.0”
           – normal: ~3.0” - ~4.0”
           – large: >~4.0”




      6


Tuesday, May 25, 2010
Resource loading
      Screen orientation
       • landscape, portrait, or
         square
       • Might be triggered by
         accelerometers or other
         events




      7


Tuesday, May 25, 2010
Resource loading
      Screen density
       • Pixels per unit of measurement
       • System looks for “best” fit*
       • Buckets
           – ldpi: ~120dpi
           – mdpi: ~160dpi
           – hdpi: ~240dpi
       • *Matching: everyone is a
         winner
           – first match on 1.5




      8


Tuesday, May 25, 2010
Resource loading
      Screen density
       • Pixels per unit of measurement
       • System looks for “best” fit*
       • Buckets
           – ldpi: ~120dpi
           – mdpi: ~160dpi
           – hdpi: ~240dpi
       • *Matching: everyone is a
         winner
           – first match on 1.5




      8


Tuesday, May 25, 2010
Resource loading
      SDK Version
       • Styles across versions


       • Inexact matching, <= current
         version


       • Work around 1.5 dpi bug
           – Exact matching on 1.5 - 2.0
           – v5 thinks its v6




      9


Tuesday, May 25, 2010
Resource loading
      SDK Version
       • Styles across versions


       • Inexact matching, <= current
         version


       • Work around 1.5 dpi bug
           – Exact matching on 1.5 - 2.0
           – v5 thinks its v6




      9


Tuesday, May 25, 2010
Resource loading
      SDK Version
       • Styles across versions


       • Inexact matching, <= current
         version


       • Work around 1.5 dpi bug
           – Exact matching on 1.5 - 2.0
           – v5 thinks its v6




      9


Tuesday, May 25, 2010
Resource loading
      SDK Version
       • Styles across versions


       • Inexact matching, <= current
         version


       • Work around 1.5 dpi bug
           – Exact matching on 1.5 - 2.0
           – v5 thinks its v6




      9


Tuesday, May 25, 2010
Tuesday, May 25, 2010
Image resources



Tuesday, May 25, 2010
Image Resources
       • Goal is uniform physical sizing across screens
       • Best match allows for up or down sampling based on
         available resources
           – Single or few pixel features are most obviously impacted




      11


Tuesday, May 25, 2010
Image Resources
      The trouble with pixels




      12


Tuesday, May 25, 2010
Image Resources
      The trouble with pixels




      12


Tuesday, May 25, 2010
Image Resources
      The trouble with pixels




      12


Tuesday, May 25, 2010
Image Resources
      The trouble with pixels




      12


Tuesday, May 25, 2010
Image Resources
      The trouble with pixels




      12


Tuesday, May 25, 2010
Manipulating Image Loading
      • DO NOT DO THIS
      • OKAY, okay, if you must...
      • Only possible (and sensical) on 1.6 and above
      • Bitmap scaling controlled by density attributes of the object
      • Normally...
           BitmapFactory.Options default = new BitmapFactory.Options();
           default.inDensity = <density of loaded resource>
           default.inTargetDensity =
           getResources().getDisplayMetrics().densityDpi;

      • Pixels are scaled by inTargetDensity/inDensity
      • Manually set inDensity = inTargetDensity =
        DisplayMetrics.densityDpi

      13


Tuesday, May 25, 2010
Nine-Patches
       • Use to create image resources that can stretch controllably
       • One set of controls for stretching, another for the content
         area




      14


Tuesday, May 25, 2010
Nine-Patches
      Stretching to fill the space




      15


Tuesday, May 25, 2010
Nine-Patches
      Stretching to fill the space




      15


Tuesday, May 25, 2010
Nine-Patches
      Stretching to fill the space




      15


Tuesday, May 25, 2010
Nine-Patches
      Stretching to fill the space




      15


Tuesday, May 25, 2010
Nine-Patches
      Stretching to fill the space




      15


Tuesday, May 25, 2010
Nine-Patches
      Stretching to fill the space




      15


Tuesday, May 25, 2010
Nine-Patches
      A little cushion




      16


Tuesday, May 25, 2010
Tuesday, May 25, 2010
Drawables



Tuesday, May 25, 2010
Shapes
       • Draw optimized views, regardless of screen
       • Primitives like square, oval, rectangle
       • Use these as the basis for simple graphics instead of
         bitmaps
       • Shape.draw() makes it easy to build a custom view




      18


Tuesday, May 25, 2010
Shapes
        public class LogoView extends View {
             private Shape mShape = new RectShape();
             private Drawable mLogo;
             public LogoView (Context context) {
                  super(context);
                  mLogo = getContext().getResources()
                        .getDrawable(R.id.logo);
             }
             protected void onDraw(Canvas canvas) {
                  mShape.resize(canvas.getWidth(), canvas.getHeight());
                  mShape.draw(canvas, mLogoBackgroundPaint);
                  mLogo.draw(canvas);
             }
        }
      19


Tuesday, May 25, 2010
ScaleDrawable
       • Adapt your drawables in a custom manner based on screen
       • Wraps another drawable
       • Allows for more exact control over scaling
       • Ideal for situations where it doesn’t make sense to preserve
         aspect ratio
           – Progress bars
           – Dividers
           – Any place where one dimension is more important than the
             other




      20


Tuesday, May 25, 2010
LevelListDrawable
       • Specified in XML
       • Combines a group of resources into a drawable
       • Use where the drawable is logically the same, but
         presentation varies based on state
           – status meters (eg. battery, signal)
           – weather condition
           – sports team
           – UI theme
       • For cases without a natural “level”, define constants making
         code more readable
       • Select the right resource for the right UI theme


      21


Tuesday, May 25, 2010
LevelListDrawable
           <?xml version="1.0" encoding="utf-8"?>
           <level-list xmlns:android="http://schemas.android.com/apk/
           res/android">
              <item android:maxLevel="0"
                        android:drawable="@drawable/rain_chance_zero"/>
              <item android:maxLevel="10"
                        android:drawable="@drawable/rain_chance_slight"/>
              <item android:maxLevel="40"
                        android:drawable="@drawable/rain_chance_good"/>
              <item android:maxLevel="70"
                        android:drawable="@drawable/rain_chance_high"/>
           </level-list>



      22


Tuesday, May 25, 2010
LevelListDrawable

           public class IO_Demo extends Activity {
               public void onResume() {
                   ((ImageView)findViewBy(R.id.weather))
                        .setImageLevel(getRainChance());
               }


               private int getRainChance() {
                   // call web service to get forecast
               }
           }




      23


Tuesday, May 25, 2010
LevelListDrawable




             Thanks to openclipart.org from for the Public Domain clipart used on this slide.
      24


Tuesday, May 25, 2010
LevelListDrawable




             Thanks to openclipart.org from for the Public Domain clipart used on this slide.
      24


Tuesday, May 25, 2010
LevelListDrawable




             Thanks to openclipart.org from for the Public Domain clipart used on this slide.
      24


Tuesday, May 25, 2010
Tuesday, May 25, 2010
Cross-Version Compatibility



Tuesday, May 25, 2010
API Changes: New Classes
       • Runtime handling of class load failures
       • Class dependencies resolved when class is first loaded
       • Use a second class with a static method to provoke class
         verification
       • Catch any verification error and adapt behavior
       • Avoids messy Class.forName(“”) pattern, but grows number
         of classes needed
           – group in a single package or as inner classes




      26


Tuesday, May 25, 2010
API Changes: New Classes
           public class Canary {
               private static NEW_CLASS foo;


               public static void tryNewClass() {
                   foo = new NEW_CLASS();
               }
           }




      27


Tuesday, May 25, 2010
API Changes: New Classes
           public class MyActivity extends Activity {
            private boolean canaryAvailable;
            private void checkApis() {
                try {
                    Canary.tryNewClass();
                    canaryAvailable = true;
                } catch (VerifyError e) {
                    canaryAvailable = false;
                    Log.w(LOG_TAG, “Canary unavailable, falling back.”);
                }
            }

      28


Tuesday, May 25, 2010
API Changes: New Methods
       • A bit trickier than dealing with classes
       • Determining which APIs are available
           – Use reflection to check availability
           – Make your code version aware
       • Working with availability
           – Call through using reflection (fewer classes)
           – Write a factory to return the right class (cleaner)




      29


Tuesday, May 25, 2010
API Changes: Mirror, mirror...
           public class Canary {
               private static Method getDensity;
               static {
                   getDensity = Canvas.class.getMethod(“getDensity”, null);
               } catch (NoSuchMethodException e) {
                   Log.w(LOG_TAG, “getDensity method not available.”);
               }
           }




      30


Tuesday, May 25, 2010
API Changes: Mirror, mirror...
           public class Canary {
              private static boolean hasDensity;
              private Canvas mDrawingSurface;
              public Integer getDensity() {
                   if (getDensity != null) {
                        return (Integer) getDensity.invoke(mDrawingSurface,
                            null);
                   } else {
                        return DEFAULT;
                   }
              }




      31


Tuesday, May 25, 2010
Tuesday, May 25, 2010
Testing



Tuesday, May 25, 2010
Testing, testing, testing
       • Nothing beats it
       • Verify the UI is behaving as expected
       • Check that any API compatibility code functions properly
       • Hardware testing is hopefully unnecessary, but...




      33


Tuesday, May 25, 2010
Questions?
           Use Wave to see live notes and ask questions



                          http://tinyurl.com/io10casting




      34


Tuesday, May 25, 2010

More Related Content

PDF
Android code puzzlers + tips & tricks
PDF
ActiveRecord 2.3
PDF
Paul Querna - libcloud
PDF
Oscon 2010
PDF
Osmf omg
PPTX
Advanced #6 clean architecture
PDF
Scaling with Postgres (Robert Treat)
PDF
MongoDB Use Cases and Roadmap
Android code puzzlers + tips & tricks
ActiveRecord 2.3
Paul Querna - libcloud
Oscon 2010
Osmf omg
Advanced #6 clean architecture
Scaling with Postgres (Robert Treat)
MongoDB Use Cases and Roadmap

Similar to Android casting-wide-net-android-devices (20)

PPTX
Reveal's Advanced Analytics: Using R & Python
KEY
33rd degree
PDF
Everything Goes Better With Bacon: Revisiting the Six Degrees Problem with a ...
PDF
Testing iOS Apps
PDF
JRubyConf 2009
PPTX
Mini training - Moving to xUnit.net
PDF
Discovering Your AI Super Powers - Tips and Tricks to Jumpstart your AI Projects
PDF
SFScon 21 - Matteo Camilli - Performance assessment of microservices with str...
PPTX
Revisiting the Six Degrees Problem with a Graph Database - Nick Quinn
PDF
Berlin.JS Meetup
PDF
Scaling with Postgres (Highload++ 2010)
PPTX
Lessons learnt at building recommendation services at industry scale
PPTX
Using the puppet debugger for lightweight exploration
PDF
GWT Plus HTML 5
PDF
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
PPTX
Getting Intimate with Images on Android with James Halpern
PDF
When to use Node? Lessons learned
PDF
John Resig Beijing 2010 (English Version)
PDF
[Sirius Day Eindhoven 2018] ASML's MDE Going Sirius
PDF
Ora mysql bothGetting the best of both worlds with Oracle 11g and MySQL Enter...
Reveal's Advanced Analytics: Using R & Python
33rd degree
Everything Goes Better With Bacon: Revisiting the Six Degrees Problem with a ...
Testing iOS Apps
JRubyConf 2009
Mini training - Moving to xUnit.net
Discovering Your AI Super Powers - Tips and Tricks to Jumpstart your AI Projects
SFScon 21 - Matteo Camilli - Performance assessment of microservices with str...
Revisiting the Six Degrees Problem with a Graph Database - Nick Quinn
Berlin.JS Meetup
Scaling with Postgres (Highload++ 2010)
Lessons learnt at building recommendation services at industry scale
Using the puppet debugger for lightweight exploration
GWT Plus HTML 5
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
Getting Intimate with Images on Android with James Halpern
When to use Node? Lessons learned
John Resig Beijing 2010 (English Version)
[Sirius Day Eindhoven 2018] ASML's MDE Going Sirius
Ora mysql bothGetting the best of both worlds with Oracle 11g and MySQL Enter...
Ad

More from Marakana Inc. (20)

PDF
Android Services Black Magic by Aleksandar Gargenta
PDF
JRuby at Square
PDF
Behavior Driven Development
PDF
Martin Odersky: What's next for Scala
PPT
Why Java Needs Hierarchical Data
PDF
Deep Dive Into Android Security
PDF
Securing Android
PDF
Pictures from "Learn about RenderScript" meetup at SF Android User Group
PDF
Android UI Tips, Tricks and Techniques
PDF
2010 07-18.wa.rails tdd-6
PDF
Efficient Rails Test-Driven Development - Week 6
PDF
Graphicsand animations devoxx2010 (1)
PDF
What's this jQuery? Where it came from, and how it will drive innovation
PDF
jQuery State of the Union - Yehuda Katz
PDF
Pics from: "James Gosling on Apple, Apache, Google, Oracle and the Future of ...
PDF
Efficient Rails Test Driven Development (class 4) by Wolfram Arnold
PDF
Efficient Rails Test Driven Development (class 3) by Wolfram Arnold
PDF
Learn about JRuby Internals from one of the JRuby Lead Developers, Thomas Enebo
PDF
Replacing Java Incrementally
PDF
Learn to Build like you Code with Apache Buildr
Android Services Black Magic by Aleksandar Gargenta
JRuby at Square
Behavior Driven Development
Martin Odersky: What's next for Scala
Why Java Needs Hierarchical Data
Deep Dive Into Android Security
Securing Android
Pictures from "Learn about RenderScript" meetup at SF Android User Group
Android UI Tips, Tricks and Techniques
2010 07-18.wa.rails tdd-6
Efficient Rails Test-Driven Development - Week 6
Graphicsand animations devoxx2010 (1)
What's this jQuery? Where it came from, and how it will drive innovation
jQuery State of the Union - Yehuda Katz
Pics from: "James Gosling on Apple, Apache, Google, Oracle and the Future of ...
Efficient Rails Test Driven Development (class 4) by Wolfram Arnold
Efficient Rails Test Driven Development (class 3) by Wolfram Arnold
Learn about JRuby Internals from one of the JRuby Lead Developers, Thomas Enebo
Replacing Java Incrementally
Learn to Build like you Code with Apache Buildr
Ad

Android casting-wide-net-android-devices

  • 3. Casting a Wide Net: Targeting All Android Devices Justin Mattson Developer Advocate 19 May 2010 Tuesday, May 25, 2010
  • 4. House keeping Use Wave to see live notes and ask questions http://tinyurl.com/io10casting 3 Tuesday, May 25, 2010
  • 5. Agenda Resource Loading Image & Drawable Considerations Adapting to API Availability Testing 4 Tuesday, May 25, 2010
  • 6. Resource Loading • Based on current system configuration • If config changes, your app restarts (eg. orientation change) • Hierarchy of qualifiers 5 Tuesday, May 25, 2010
  • 7. Resource loading Screen size • Physical size of the screen • Buckets – small: <~3.0” – normal: ~3.0” - ~4.0” – large: >~4.0” 6 Tuesday, May 25, 2010
  • 8. Resource loading Screen orientation • landscape, portrait, or square • Might be triggered by accelerometers or other events 7 Tuesday, May 25, 2010
  • 9. Resource loading Screen density • Pixels per unit of measurement • System looks for “best” fit* • Buckets – ldpi: ~120dpi – mdpi: ~160dpi – hdpi: ~240dpi • *Matching: everyone is a winner – first match on 1.5 8 Tuesday, May 25, 2010
  • 10. Resource loading Screen density • Pixels per unit of measurement • System looks for “best” fit* • Buckets – ldpi: ~120dpi – mdpi: ~160dpi – hdpi: ~240dpi • *Matching: everyone is a winner – first match on 1.5 8 Tuesday, May 25, 2010
  • 11. Resource loading SDK Version • Styles across versions • Inexact matching, <= current version • Work around 1.5 dpi bug – Exact matching on 1.5 - 2.0 – v5 thinks its v6 9 Tuesday, May 25, 2010
  • 12. Resource loading SDK Version • Styles across versions • Inexact matching, <= current version • Work around 1.5 dpi bug – Exact matching on 1.5 - 2.0 – v5 thinks its v6 9 Tuesday, May 25, 2010
  • 13. Resource loading SDK Version • Styles across versions • Inexact matching, <= current version • Work around 1.5 dpi bug – Exact matching on 1.5 - 2.0 – v5 thinks its v6 9 Tuesday, May 25, 2010
  • 14. Resource loading SDK Version • Styles across versions • Inexact matching, <= current version • Work around 1.5 dpi bug – Exact matching on 1.5 - 2.0 – v5 thinks its v6 9 Tuesday, May 25, 2010
  • 17. Image Resources • Goal is uniform physical sizing across screens • Best match allows for up or down sampling based on available resources – Single or few pixel features are most obviously impacted 11 Tuesday, May 25, 2010
  • 18. Image Resources The trouble with pixels 12 Tuesday, May 25, 2010
  • 19. Image Resources The trouble with pixels 12 Tuesday, May 25, 2010
  • 20. Image Resources The trouble with pixels 12 Tuesday, May 25, 2010
  • 21. Image Resources The trouble with pixels 12 Tuesday, May 25, 2010
  • 22. Image Resources The trouble with pixels 12 Tuesday, May 25, 2010
  • 23. Manipulating Image Loading • DO NOT DO THIS • OKAY, okay, if you must... • Only possible (and sensical) on 1.6 and above • Bitmap scaling controlled by density attributes of the object • Normally... BitmapFactory.Options default = new BitmapFactory.Options(); default.inDensity = <density of loaded resource> default.inTargetDensity = getResources().getDisplayMetrics().densityDpi; • Pixels are scaled by inTargetDensity/inDensity • Manually set inDensity = inTargetDensity = DisplayMetrics.densityDpi 13 Tuesday, May 25, 2010
  • 24. Nine-Patches • Use to create image resources that can stretch controllably • One set of controls for stretching, another for the content area 14 Tuesday, May 25, 2010
  • 25. Nine-Patches Stretching to fill the space 15 Tuesday, May 25, 2010
  • 26. Nine-Patches Stretching to fill the space 15 Tuesday, May 25, 2010
  • 27. Nine-Patches Stretching to fill the space 15 Tuesday, May 25, 2010
  • 28. Nine-Patches Stretching to fill the space 15 Tuesday, May 25, 2010
  • 29. Nine-Patches Stretching to fill the space 15 Tuesday, May 25, 2010
  • 30. Nine-Patches Stretching to fill the space 15 Tuesday, May 25, 2010
  • 31. Nine-Patches A little cushion 16 Tuesday, May 25, 2010
  • 34. Shapes • Draw optimized views, regardless of screen • Primitives like square, oval, rectangle • Use these as the basis for simple graphics instead of bitmaps • Shape.draw() makes it easy to build a custom view 18 Tuesday, May 25, 2010
  • 35. Shapes public class LogoView extends View { private Shape mShape = new RectShape(); private Drawable mLogo; public LogoView (Context context) { super(context); mLogo = getContext().getResources() .getDrawable(R.id.logo); } protected void onDraw(Canvas canvas) { mShape.resize(canvas.getWidth(), canvas.getHeight()); mShape.draw(canvas, mLogoBackgroundPaint); mLogo.draw(canvas); } } 19 Tuesday, May 25, 2010
  • 36. ScaleDrawable • Adapt your drawables in a custom manner based on screen • Wraps another drawable • Allows for more exact control over scaling • Ideal for situations where it doesn’t make sense to preserve aspect ratio – Progress bars – Dividers – Any place where one dimension is more important than the other 20 Tuesday, May 25, 2010
  • 37. LevelListDrawable • Specified in XML • Combines a group of resources into a drawable • Use where the drawable is logically the same, but presentation varies based on state – status meters (eg. battery, signal) – weather condition – sports team – UI theme • For cases without a natural “level”, define constants making code more readable • Select the right resource for the right UI theme 21 Tuesday, May 25, 2010
  • 38. LevelListDrawable <?xml version="1.0" encoding="utf-8"?> <level-list xmlns:android="http://schemas.android.com/apk/ res/android"> <item android:maxLevel="0" android:drawable="@drawable/rain_chance_zero"/> <item android:maxLevel="10" android:drawable="@drawable/rain_chance_slight"/> <item android:maxLevel="40" android:drawable="@drawable/rain_chance_good"/> <item android:maxLevel="70" android:drawable="@drawable/rain_chance_high"/> </level-list> 22 Tuesday, May 25, 2010
  • 39. LevelListDrawable public class IO_Demo extends Activity { public void onResume() { ((ImageView)findViewBy(R.id.weather)) .setImageLevel(getRainChance()); } private int getRainChance() { // call web service to get forecast } } 23 Tuesday, May 25, 2010
  • 40. LevelListDrawable Thanks to openclipart.org from for the Public Domain clipart used on this slide. 24 Tuesday, May 25, 2010
  • 41. LevelListDrawable Thanks to openclipart.org from for the Public Domain clipart used on this slide. 24 Tuesday, May 25, 2010
  • 42. LevelListDrawable Thanks to openclipart.org from for the Public Domain clipart used on this slide. 24 Tuesday, May 25, 2010
  • 45. API Changes: New Classes • Runtime handling of class load failures • Class dependencies resolved when class is first loaded • Use a second class with a static method to provoke class verification • Catch any verification error and adapt behavior • Avoids messy Class.forName(“”) pattern, but grows number of classes needed – group in a single package or as inner classes 26 Tuesday, May 25, 2010
  • 46. API Changes: New Classes public class Canary { private static NEW_CLASS foo; public static void tryNewClass() { foo = new NEW_CLASS(); } } 27 Tuesday, May 25, 2010
  • 47. API Changes: New Classes public class MyActivity extends Activity { private boolean canaryAvailable; private void checkApis() { try { Canary.tryNewClass(); canaryAvailable = true; } catch (VerifyError e) { canaryAvailable = false; Log.w(LOG_TAG, “Canary unavailable, falling back.”); } } 28 Tuesday, May 25, 2010
  • 48. API Changes: New Methods • A bit trickier than dealing with classes • Determining which APIs are available – Use reflection to check availability – Make your code version aware • Working with availability – Call through using reflection (fewer classes) – Write a factory to return the right class (cleaner) 29 Tuesday, May 25, 2010
  • 49. API Changes: Mirror, mirror... public class Canary { private static Method getDensity; static { getDensity = Canvas.class.getMethod(“getDensity”, null); } catch (NoSuchMethodException e) { Log.w(LOG_TAG, “getDensity method not available.”); } } 30 Tuesday, May 25, 2010
  • 50. API Changes: Mirror, mirror... public class Canary { private static boolean hasDensity; private Canvas mDrawingSurface; public Integer getDensity() { if (getDensity != null) { return (Integer) getDensity.invoke(mDrawingSurface, null); } else { return DEFAULT; } } 31 Tuesday, May 25, 2010
  • 53. Testing, testing, testing • Nothing beats it • Verify the UI is behaving as expected • Check that any API compatibility code functions properly • Hardware testing is hopefully unnecessary, but... 33 Tuesday, May 25, 2010
  • 54. Questions? Use Wave to see live notes and ask questions http://tinyurl.com/io10casting 34 Tuesday, May 25, 2010