Android Fragment-Awesome

Matthew Gaunt

Who is this guy?

Master in Computer Science in Bristol Senior Android Dev @ Mubaloo Cross Platform Dev @ Future Platforms

What Fragmentation?

Whats 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 Layout Themes / Styles Dimensions [land, port] [ldpi, mdpi, hdpi, xhdpi] [small, normal, large, xlarge]

[v4, v11]

[small, normal, large, xlarge]

The History...

The History...
<port> land
1.5

The History...
<port> land
1.5

ldpi mdpi hdpi

1.6

The History...
<port> land
1.5

ldpi mdpi hdpi

1.6

small normal large xlarge

3.0 (ish)

The History...
<port> land
1.5

ldpi mdpi hdpi

1.6

small normal large xlarge

3.0 (ish)

ldpi mdpi hdpi

xhdpi
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?
Small Normal Large XLarge ldpi mdpi hdpi xhdpi ldpi 1.7% 0.7% 0.2%
total hdpi xhdpi 2.4% 4.1% 18.5% 66.3% 2.5% 88.0% 2.8% 3.0% 4.9% 4.9%

mdpi

mdpi ? hdpi ? ? xhdpi ?

Phones
normal / small

Tablets
large / xlarge

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

Tips to Reduce Work

1 Use values everywhere (dimens, ints, etc.)

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>

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

3 Use <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

4 Use Themes & Styles
www.gauntface.co.uk/blog/2011/01/18/android-ui-reference

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>

Tips to Reduce Work

Tips to Reduce Work

5 Give up control - be uid

Tips to Reduce Work

Note: Not the best example ;)

Tips to Reduce Work

Youre Results May Vary

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