Android Fragment-Awesome
Upcoming SlideShare
Loading in...5

Android Fragment-Awesome



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

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



Total Views
Views on SlideShare
Embed Views



7 Embeds 696 383 202 90
http://gauntface-blog.localhost 13
http://localhost 6 1 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Android Fragment-Awesome Android Fragment-Awesome Presentation Transcript

  • 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, normal, large, xlarge)
  • Eeks lots of Images
  • 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]
  • 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 1.6 3.0 (ish)
  • The History... small ldpi normal ldpi mdpi<port> mdpi large hdpi land hdpi xlarge xhdpi 1.5 1.6 3.0 (ish) 4.0
  • 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 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
  • Hitting Both?drawable For all bucketsdrawable-ldpidrawable-mdpi Basedrawable-hdpidrawable-xhdpidrawable-large-? Additionaldrawable-xlarge-?
  • 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>         <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>
  • 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=""    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>
  • Tips to Reduce Work
  • Tips to Reduce Work 4 Use Themes & Styles
  • 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>
  • 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 :)