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

Thanks :)@gauntface

matt@gauntface.co.uk