Android Fragment-Awesome

3,664 views
3,505 views

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,664
On SlideShare
0
From Embeds
0
Number of Embeds
1,046
Actions
Shares
0
Downloads
82
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

×