Fernando F. Gallego - Efficient Android Resources 101

Efficient Android resources 101

2

• Located under /res folder• Used to store images, layouts, values,

internationalization, animation, menus, etc.• Provide different resource versions depending on

qualifiers• Name the folders using the form:

• <folder_name>-<qualifier_config>• Can add more than one but respecting an order

• Samples• drawable-hdpi: high density version (~240dpi)• drawable-land-xhdpi: extra high density version for

landscape mode (~320dpi)• values-es: Strings and values to use when the locale is

“es” (Spanish)• layout-large-land-car-night-finger-v11: guess it!

• More info: http://developer.android.com/guide/topics/resources/providing-resources.html

Resource folders

Pro tipExclude resources that begin with _

TipFolders without qualifiers are the default values

3

• Correct resource folder is chosen automatically.– Unless you override it

• Different versions of same resource must have the same file name.

• Same view in different layout versions must have the same id.

• If the resource does not match any qualifier, android tries to find the best match.

• Resources are accessed in two ways:– In code: R.string.app_name– In XML: @string/app_name

Automatic handling of resources

Pro tipAccess android core resources with android.R.anim.fade_in or @android:anim/fade_in

4

• Android density independent pixels (dp)– The density-independent pixel is equivalent to one physical pixel on a 160 dpi

screen– px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5

physical pixels– Don’t ever EVER use pixels, use dp instead (or sp for font sizes).

Supporting different screen densities

Relative sizes for bitmap drawables that support each density

http://developer.android.com/guide/practices/screens_support.html

5

• Layout qualifiers can be used to provide different layouts for different devices and “avoid” fragmentation.

Supporting different screens

• Screen madness:• Use smallestWidth qualifier: sw<N>dp (sw480dp, sw600dp)• Qualifiers from Android 3.2 to set different layouts

• 320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).• 480dp: a tweener tablet like the Streak (480x800 mdpi).• 600dp: a 7” tablet (600x1024 mdpi).• 720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc)

res/layout/main_activity.xml # For handsets (smaller than 600dp available width) res/layout-sw600dp/main_activity.xml # For 7” tablets (600dp wide and bigger) res/layout-sw720dp/main_activity.xml # For 10” tablets (720dp wide and bigger)

6

• Layouts are defined in XML files– Under /res/layout

• Types of containers– LinearLayout: Easiest to learn. Displays views

either horizontally or vertically.– RelativeLayout: Positions views relative to other

views. Good to create layouts that overlap with transparencies.

– FrameLayout: Basic layout. Stack views one above the other. Not very useful

– Also TableLayout and GridLayout

• Android drawing algorithm– onMeasure. How big does the views want to be.– onLayout. Drawing the views

Efficient layouts

7

• Keeping the hierarchy flat speeds up drawing the UI

• (aka use RelativeLayout)

• Reuse layouts• You can use <include/> to add other layout file• <include android:id="@+id/cell1" layout="@layout/workspace_screen" />

• Avoid duplicating containers of same type• Use <merge/>• Attaches it’s children to it’s parent• Great combo with <include/>

Efficient layouts (II)

8

• Don’t define views used rarely• Use ViewStub to load views on demand

Efficient layouts(III)

<ViewStub    android:id="@+id/stub_import"    android:layout="@layout/progress_overlay"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:layout_gravity="bottom" />

((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE);// orView importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();

9

• Use as less views as possible and use compound drawables

Efficient layouts (IV)

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/hello_world"/></LinearLayout>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:drawableLeft="@drawable/ic_launcher" android:gravity="center" android:text="@string/hello_world" />

http://www.curious-creature.org/2009/03/16/android-layout-tricks-4-optimize-part-2/

10

• Nine-Patch• Stretchable image files• Define areas to stretch and areas where content is

placed• Image expands to fit content preserving complex image

shapes like corners or decorations

Drawables

• Top and left• Define stretchable areas (no shrinkable!)

• Bottom and right• Content area, the rest is padding

11

• State list– It is used to provide different drawables or colors to different states of the view.– The order is important. First match.– Density independant. Store the file in /res/drawable/btn_nav_bg_selector.xml

Drawables

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/btn_nav_forward_default" android:state_enabled="true"

android:state_window_focused="false"/> <item android:drawable="@drawable/btn_nav_forward_disabled" android:state_enabled="false"

android:state_window_focused="false"/> <item android:drawable="@drawable/btn_nav_forward_disabled" android:state_enabled="false"

android:state_window_focused="true"/> <item android:drawable="@drawable/btn_nav_forward_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/btn_nav_forward_pressed" android:state_enabled="true"

android:state_focused="true"/> <item android:drawable="@drawable/btn_nav_forward_default" android:state_enabled="true"/> <item android:drawable="@drawable/btn_nav_forward_default" android:state_focused="true"/> <item android:drawable="@drawable/btn_nav_forward_default"/></selector>

Disabled PressedDefault

android:background="@drawable/btn_nav_bg_selector"

12

• Shape– Create a shape based drawable defined in xml (still requires some artistic skills!)

Drawables

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >

<gradient android:angle="270" android:endColor="#2f6699" android:startColor="#449def" />

<stroke android:width="1dp" android:color="#2f6699" />

<corners android:radius="4dp" />

<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />

</shape>      

Pro tipCombine with state list<selector> <item android:state_pressed="true" > <shape> ... </shape> </item> <item> <shape> ... </shape> </item></selector>

13

• Layer List– Draw different drawables one in top of each other in one single drawable– Useful for composing

• Level List– Similar but only displays one drawable at once– Useful for non default states (i.e. traffic lights)

• Transition drawable– Performs a cross fade between drawables

• Clip drawable– Clips a portion of the drawable– Useful for customizing progress bars

• Scale drawable– Scales a drawable

Other drawables

http://developer.android.com/guide/topics/resources/drawable-resource.html

Inset

Layer List

Clip

14

• Two types of animations– Interpolated

Animations

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<scale android:duration="5000" android:fillAfter="false" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:toXScale="3.0" android:toYScale="3.0" /> <set> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:fromAlpha="0.2" android:toAlpha="1.0" />

<rotate android:duration="4000" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:startOffset="700" android:toDegrees="-360" android:toYScale="0.0" />

<translate android:duration="3000" android:fromXDelta="100%" android:fromYDelta="60%" android:toXDelta="-20%" android:toYDelta="-30%" android:zAdjustment="bottom" /> </set></set>

15

• AnimationDrawable– Frame based animations

Animations (II)

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false"> <item android:drawable="@drawable/android_1“ android:duration="100"/> <item android:drawable="@drawable/android_2“ android:duration="100"/> <item android:drawable="@drawable/android_3“ android:duration="100"/> <item android:drawable="@drawable/android_4“ android:duration="100"/> <item android:drawable="@drawable/android_5“ android:duration="100"/> <item android:drawable="@drawable/android_6“ android:duration="100"/> <item android:drawable="@drawable/android_7“ android:duration="100"/></animation-list>

16

• Styles– Similar to CSS– Inheritance with parent=“…”– Use style attribute in XML: style="@style/CodeFont“

– Inherit your own styles with ‘.’

– Store in /res/values/styles.xml

Styles and Themes

17

• Customize a predefined theme

• Apply styles to activities or full applications– <activity android:theme="@style/Theme.Junaio">– <application android:theme="@style/Theme.Junaio">

Themes

<style name="Theme.Junaio" parent="android:Theme"> <item name="android:windowBackground">@null</item> <item name="android:windowNoTitle">true</item> <item name="android:windowFullscreen">false</item> <item name="android:buttonStyleToggle">@style/Topbar.Button</item> </style>

Pro tipPredefined theme names are not well documented and they are a bit trickybuttonStylebuttonStyleToggleradioButtonStyle…

18

• Until Android 11:– Theme.Black– Theme.Light

• In Android 11 to 13:– Theme.Holo– Theme.Holo.Light

• From Android 14:– Theme.Holo– Theme.Holo.Light.DarkActionBar

• Create 3 folders for styles:– /res/values/styles.xml

• <style name="AppTheme" parent="android:Theme.Light" />

– /res/values-v11/styles.xml• <style name="AppTheme" parent="android:Theme.Holo.Light" />

– /res/values-v14/styles.xml• <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar" />

• AndroidManifest.xml– android:theme="@android:style/AppTheme"

Supporting different platform versions

19

• Values you can define in xml resource files:– Booleans (true | false)

• <boolean name=“someboolean”>true</boolean>• getResources().getBoolean(R.bool.someboolean) / @bool/someboolean

– Color (#RGB | #RRGGBB | #ARGB | #AARRGGBB)• <color name=“somecolor”>#FF898989</color>• getResources().getColor(R.color.somecolor) / @color/somecolor

– Dimension (dp | sp | pt | px | mm | in)• <dimen name=“somedimension”>15dp</dimen>• getResources().getDimension(R.dimen.somesimension) / @dimen/somedimension

– ID• <item type=“id” name=“someid” />• findViewById(R.id.someid) / @id/someid

– Integer• <integer name=“someint”>42</integer>

Values

20

– Integer Array• getIntArray(R.array.someintarray)

– Typed Array• Mixed types

Array values

21

Questions?

“Work it HarderMake it BetterDo it FasterMake us Stronger”

-Daft Punk