AndroidFragment-Awesome     Matthew Gaunt
Who is this guy?• Master in Computer Science in Bristol• Senior Android Dev @ Mubaloo• Cross Platform Dev @ Future Platforms
What Fragmentation?
What’s coming up• Design - I can haz pretty • Dips • Buckets? • What buckets? • The story of buckets• Tips + Examples
DipsDensity Independent PixelsAbstract the screen size (think roundedcorner rectangle)Never assume dip > pixels
Buckets?ldpi   mdpi   hdpi   xhdpi
What Buckets?Screen density (ldpi, mdpi, hdpi, xhdpi)Orientation (port, land)Android Version (v4, v11)Screen size (small, ...
Eeks lots of Images
How to use Buckets• Images - [ldpi, mdpi, hdpi, xhdpi] [small, normal, large, xlarge]• Layout -[land, port]• Themes / Styl...
The History...
The History...<port> land  1.5
The History...           ldpi<port>     mdpi land      hdpi  1.5       1.6
The History...                   small           ldpi   normal<port>     mdpi    large land      hdpi   xlarge  1.5       ...
The History...                   small           ldpi   normal        ldpi                                mdpi<port>     m...
Recap• Lots of buckets• Lots of resources to apply the buckets to• How it relates to other platforms like iOS
Random.
Phones / Tablets?                    ldpi   mdpi  hdpi xhdpi  totalSmall              1.7%           2.4%       4.1%Normal...
Hitting Both?drawable              For all bucketsdrawable-ldpidrawable-mdpi                           Basedrawable-hdpidr...
Tips to Reduce Work            1 Use values everywhere   (dimens, ints, etc.)
Tips to Reduce Workvalues     dimens.xml           <resources>              <dimen name="default_text_size">20sp</dimen>  ...
Tips to Reduce Work   values      values-land
Tips to Reduce Work          2 Learn the ways of the     nine patch
Tips to Reduce Work
Tips to Reduce Work          3Use <Shape> drawables
Tips to Reduce Work<shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <...
Tips to Reduce Work
Tips to Reduce Work                             4 Use Themes & Styles  www.gauntface.co.uk/blog/2011/01/18/android-ui-refe...
Tips to Reduce Workvalues     themes.xml          <resources>               <style name="Theme.FacebookSync" parent="@styl...
Tips to Reduce Work
Tips to Reduce Work           5Give up control - be fluid
Tips to Reduce Work     Note: Not the best example ;)
Tips to Reduce Work
You’re Results May Vary
Thanks :)    @gauntfacematt@gauntface.co.uk
Upcoming SlideShare
Loading in...5
×

Android Fragment-Awesome

3,280

Published on

A talk I gave at the Brighton iOS developer group on dealing with Android screen sizes.

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,280
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
74
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Android Fragment-Awesome

  1. 1. AndroidFragment-Awesome Matthew Gaunt
  2. 2. Who is this guy?• Master in Computer Science in Bristol• Senior Android Dev @ Mubaloo• Cross Platform Dev @ Future Platforms
  3. 3. What Fragmentation?
  4. 4. What’s coming up• Design - I can haz pretty • Dips • Buckets? • What buckets? • The story of buckets• Tips + Examples
  5. 5. DipsDensity Independent PixelsAbstract the screen size (think roundedcorner rectangle)Never assume dip > pixels
  6. 6. Buckets?ldpi mdpi hdpi xhdpi
  7. 7. What Buckets?Screen density (ldpi, mdpi, hdpi, xhdpi)Orientation (port, land)Android Version (v4, v11)Screen size (small, normal, large, xlarge)
  8. 8. Eeks lots of Images
  9. 9. How to use Buckets• Images - [ldpi, mdpi, hdpi, xhdpi] [small, normal, large, xlarge]• Layout -[land, port]• Themes / Styles - [v4, v11]• Dimensions - [small, normal, large, xlarge]
  10. 10. The History...
  11. 11. The History...<port> land 1.5
  12. 12. The History... ldpi<port> mdpi land hdpi 1.5 1.6
  13. 13. The History... small ldpi normal<port> mdpi large land hdpi xlarge 1.5 1.6 3.0 (ish)
  14. 14. The History... small ldpi normal ldpi mdpi<port> mdpi large hdpi land hdpi xlarge xhdpi 1.5 1.6 3.0 (ish) 4.0
  15. 15. Recap• Lots of buckets• Lots of resources to apply the buckets to• How it relates to other platforms like iOS
  16. 16. Random.
  17. 17. Phones / Tablets? ldpi mdpi hdpi xhdpi totalSmall 1.7% 2.4% 4.1%Normal 0.7% 18.5% 66.3% 2.5% 88.0%Large 0.2% 2.8% 3.0%XLarge 4.9% 4.9% ldpi mdpi mdpi hdpi ? hdpi ? xhdpi ? xhdpi ? Phones Tablets normal / small large / xlarge
  18. 18. Hitting Both?drawable For all bucketsdrawable-ldpidrawable-mdpi Basedrawable-hdpidrawable-xhdpidrawable-large-? Additionaldrawable-xlarge-?
  19. 19. Tips to Reduce Work 1 Use values everywhere (dimens, ints, etc.)
  20. 20. Tips to Reduce Workvalues dimens.xml <resources>         <dimen name="default_text_size">20sp</dimen>         <dimen name="default_large_text_size">30sp</dimen>         <dimen name="splash_vertical_spacing">20dp</dimen>         <dimen name="gauntface_tag_bottom_spacing">20dp</dimen>         <dimen name="gauntface_tag_padding">5dp</dimen>         <dimen name="gauntface_tag_radius">10dp</dimen>         <dimen name="splash_gauntface_progress_bar">30dp</dimen>         <dimen name="generic_dialog_padding">15dp</dimen>         <dimen name="generic_dialog_bg_radius">4dp</dimen>         <dimen name="generic_dialog_title_spacer_height">4dp</dimen>         <dimen name="generic_dialog_title_spacer_vertical_spacing">10dp</dimen>         <dimen name="sync_info_padding">10dp</dimen>         <dimen name="sync_info_title_text_size">35sp</dimen>         <dimen name="sync_info_msg_text_size">20sp</dimen>         <dimen name="sync_info_bg_radius">10dp</dimen>         <dimen name="sync_info_prof_pic_radius">8dp</dimen>         <dimen name="sync_info_prof_pic_size">128dp</dimen>     </resources>values-land dimens.xml <resources>         <dimen name="default_text_size">15sp</dimen>         <dimen name="default_large_text_size">25sp</dimen>         <dimen name="splash_vertical_spacing">10dp</dimen>     </resources>
  21. 21. Tips to Reduce Work values values-land
  22. 22. Tips to Reduce Work 2 Learn the ways of the nine patch
  23. 23. Tips to Reduce Work
  24. 24. Tips to Reduce Work 3Use <Shape> drawables
  25. 25. Tips to Reduce Work<shape    xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">    <gradient        android:angle="0"        android:endColor="@color/dark_blue"        android:gradientRadius="660"        android:startColor="@color/splash_light_blue"        android:type="radial" /></shape>
  26. 26. Tips to Reduce Work
  27. 27. Tips to Reduce Work 4 Use Themes & Styles www.gauntface.co.uk/blog/2011/01/18/android-ui-reference
  28. 28. Tips to Reduce Workvalues themes.xml <resources> <style name="Theme.FacebookSync" parent="@style/Theme.FacebookSync.Support">         ...     </style>     <style name="Theme.FacebookSync.NoTitleBar">         ...     </style>     <style name="Theme.FacebookSync.Dialog" parent="@style/Theme.Dialog.Support">         ... </style> </resources>values-v11 themes-v11.xml <resources>     <style name="Theme.FacebookSync.Support" parent="@android:style/Theme.Holo"></style>     <style name="Theme.Dialog.Support" parent="@android:style/Theme.Holo.Dialog"></style> </resources>values-v4 themes-v4.xml <resources>     <style name="Theme.FacebookSync.Support" parent="@android:style/Theme.NoTitleBar"></style>     <style name="Theme.Dialog.Support" parent="@android:style/Theme.Dialog"></style> </resources>
  29. 29. Tips to Reduce Work
  30. 30. Tips to Reduce Work 5Give up control - be fluid
  31. 31. Tips to Reduce Work Note: Not the best example ;)
  32. 32. Tips to Reduce Work
  33. 33. You’re Results May Vary
  34. 34. Thanks :) @gauntfacematt@gauntface.co.uk
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×