Fernando F. Gallego - Efficient Android Resources 101
-
Upload
fernando-gallego -
Category
Technology
-
view
106 -
download
1
description
Transcript of 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