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

1. Android
Fragment-Awesome
Matthew Gaunt

2. Who is this guy?
• Master in Computer Science in Bristol
• Senior Android Dev @ Mubaloo
• Cross Platform Dev @ Future Platforms

3. What Fragmentation?

4. What’s coming up
• Design - I can haz pretty
• Dips
• Buckets?
• What buckets?
• The story of buckets
• Tips + Examples

5. Dips
Density Independent Pixels
Abstract the screen size (think rounded
corner rectangle)
Never assume dip > pixels

6. Buckets?
ldpi mdpi hdpi xhdpi

7. What Buckets?
Screen density (ldpi, mdpi, hdpi, xhdpi)
Orientation (port, land)
Android Version (v4, v11)
Screen size (small, normal, large, xlarge)

8. Eeks lots of Images

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. The History...

11. The History...
<port>
land
1.5

12. The History...
ldpi
<port> mdpi
land hdpi
1.5 1.6

13. The History...
small
ldpi normal
<port> mdpi large
land hdpi xlarge
1.5 1.6 3.0 (ish)

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. Recap
• Lots of buckets
• Lots of resources to apply the buckets to
• How it relates to other platforms like iOS

16. Random.

17. Phones / Tablets?
ldpi mdpi hdpi xhdpi total
Small 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. Hitting Both?
drawable For all buckets
drawable-ldpi
drawable-mdpi
Base
drawable-hdpi
drawable-xhdpi
drawable-large-?
Additional
drawable-xlarge-?

19. Tips to Reduce Work
1
Use values everywhere
(dimens, ints, etc.)

20. Tips to Reduce Work
values
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. Tips to Reduce Work
values values-land

22. Tips to Reduce Work
2
Learn the ways of the
nine patch

23. Tips to Reduce Work

24. Tips to Reduce Work
3
Use <Shape> drawables

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. Tips to Reduce Work

27. Tips to Reduce Work
4
Use Themes & Styles
www.gauntface.co.uk/blog/2011/01/18/android-ui-reference

28. Tips to Reduce Work
values
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. Tips to Reduce Work

30. Tips to Reduce Work
5
Give up control - be fluid

31. Tips to Reduce Work
Note: Not the best example ;)

32. Tips to Reduce Work

33. You’re Results May Vary

34. Thanks :)
@gauntface
matt@gauntface.co.uk