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)
AndroidVersion (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...
<port>
land
1.5 1.6
ldpi
mdpi
hdpi

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

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

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
Normal
Large
XLarge
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%
ldpi
mdpi
hdpi
xhdpi
Phones
normal / small
mdpi
? hdpi ?
? xhdpi ?
Tablets
large / xlarge

18. Hitting Both?
drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-large-?
drawable-xlarge-?
For all buckets
Base
Additional

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 MayVary

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