View
118
Download
0
Category
Tags:
Preview:
DESCRIPTION
A talk I gave at the Brighton iOS developer group on dealing with Android screen sizes.
Citation preview
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
Dips
Density Independent Pixels
Abstract the screen size (think rounded corner 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...
<port>land
1.5 1.6
ldpimdpihdpi
The History...
<port>land
1.5 1.6
ldpimdpihdpi
3.0 (ish)
smallnormallargexlarge
The History...
<port>land
1.5 1.6
ldpimdpihdpi
3.0 (ish)
smallnormallargexlarge
4.0
ldpimdpihdpi
xhdpi
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 total
SmallNormalLargeXLarge
1.7% 2.4% 4.1%0.7% 18.5% 66.3% 2.5% 88.0%0.2% 2.8% 3.0%
4.9% 4.9%
ldpimdpihdpixhdpi
Phonesnormal / small
mdpi? hdpi ?? xhdpi ?
Tabletslarge / xlarge
Hitting Both?
drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-large-?
drawable-xlarge-?
For all buckets
Base
Additional
Tips to Reduce Work
1Use 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-landdimens.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 Workvalues values-land
Tips to Reduce Work
2Learn 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"> <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
4Use Themes & Styles
www.gauntface.co.uk/blog/2011/01/18/android-ui-reference
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-v11themes-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-v4themes-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 WorkNote: Not the best example ;)
Tips to Reduce Work
You’re Results May Vary
Recommended