Learn how to declare and use all the resources that the android platform provides you to ease the work and reuse graphics, styles and components

1. Efficient Android resources 101

2. Resource folders
• 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 Pro tip
landscape mode (~320dpi) Exclude resources
• values-es: Strings and values to use when the locale is “es” that begin with _
(Spanish)
• layout-large-land-car-night-finger-v11: guess it! Tip
Folders without
qualifiers are the
• More info:
default values
http://developer.android.com/guide/topics/resources/pro
viding-resources.html 2

3. Automatic handling of resources
• 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
Pro tip
Access android core resources
with android.R.anim.fade_in
or @android:anim/fade_in
3

4. Supporting different screen densities
• 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).
Relative sizes for bitmap drawables that support each density
http://developer.android.com/guide/practices/screens_support.html 4

5. Supporting different screens
• Layout qualifiers can be used to provide different layouts for different
devices and “avoid” fragmentation.
• 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)
5

6. Efficient layouts
• 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
6

7. Efficient layouts (II)
• 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/>
7

8. Efficient layouts(III)
• Don‟t define views used rarely
• Use ViewStub to load views on demand
<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);
// or
View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();
8

9. Efficient layouts (IV)
• Use as less views as possible and use compound drawables
<LinearLayout <TextView
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" android:layout_gravity="center_horizontal"
android:orientation="horizontal" > android:drawableLeft="@drawable/ic_launcher"
<ImageView android:gravity="center"
android:layout_width="wrap_content" android:text="@string/hello_world" />
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>
http://www.curious-creature.org/2009/03/16/android-layout-tricks-4-optimize-part-2/ 9

10. Drawables
• 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
• Top and left
• Define stretchable areas (no shrinkable!)
• Bottom and right
• Content area, the rest is padding
10

11. Drawables
• 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
Disabled Default Pressed
<?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>
android:background="@drawable/btn_nav_bg_selector"
11

12. Drawables
• Shape
– Create a shape based drawable defined in xml (still requires some artistic skills!)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
Pro tip
Combine with state list
<gradient <selector>
<item android:state_pressed="true" >
android:angle="270" <shape>
android:endColor="#2f6699" ...
android:startColor="#449def" /> </shape>
</item>
<stroke <item>
<shape>
android:width="1dp" ...
android:color="#2f6699" /> </shape>
</item>
<corners android:radius="4dp" /> </selector>
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
12

13. Other drawables
• 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 Layer List
– Clips a portion of the drawable Clip
– Useful for customizing progress bars
• Scale drawable Inset
– Scales a drawable
http://developer.android.com/guide/topics/resources/drawable-resource.html 13

14. Animations
• Two types of animations
– Interpolated
<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>
14

15. Animations (II)
• AnimationDrawable
– Frame based animations
<?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>
15

16. Styles and Themes
• 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
16

17. Themes
• Customize a predefined theme
<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>
• Apply styles to activities or full applications
– <activity android:theme="@style/Theme.Junaio">
– <application android:theme="@style/Theme.Junaio">
Pro tip
Predefined theme names are not
well documented and they are a
bit tricky
buttonStyle
buttonStyleToggle
radioButtonStyle
…
17

18. Supporting different platform versions
• 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"
18

19. Values
• 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>
19

20. Array values
– Integer Array
• getIntArray(R.array.someintarray)
– Typed Array
• Mixed types
20

21. Questions?
“Work it Harder
Make it Better
Do it Faster
Make us Stronger”
-Daft Punk
21