Fernando F. Gallego - Efficient Android Resources 101
Download as PPTX, PDF7 likes1,361 views
The document provides an overview of efficiently managing Android resources, including resource folders, resource qualifiers, and methods for handling different screen densities and layouts. It covers the use and definition of drawables, animations, styles, and themes, as well as managing values within XML resource files. Additionally, it emphasizes best practices for resource organization to enhance performance and maintainability in Android applications.
Fernando F. Gallego - Efficient Android Resources 101
- 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