Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Efficient Android Resources 101

Efficient Android Resources 101

Learn how to use the android resources effectively and correctly on your android apps. Level beginner

Fernando F. Gallego

July 01, 2012
Tweet

More Decks by Fernando F. Gallego

Other Decks in Programming

Transcript

  1. • 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/pro viding-resources.html Resource folders 2 Pro tip Exclude resources that begin with _ Tip Folders without qualifiers are the default values
  2. • 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 3 Pro tip Access android core resources with android.R.anim.fade_in or @android:anim/fade_in
  3. • 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 4 Relative sizes for bitmap drawables that support each density http://developer.android.com/guide/practices/screens_support.html
  4. • Layout qualifiers can be used to provide different layouts

    for different devices and “avoid” fragmentation. Supporting different screens 5 • 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. • 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 6
  6. • 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) 7
  7. • Don’t define views used rarely • Use ViewStub to

    load views on demand Efficient layouts(III) 8 <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. • Use as less views as possible and use compound

    drawables Efficient layouts (IV) 9 <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/
  9. • 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 10 • Top and left • Define stretchable areas (no shrinkable!) • Bottom and right • Content area, the rest is padding
  10. • 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 11 <?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 Pressed Default android:background="@drawable/btn_nav_bg_selector"
  11. • Shape – Create a shape based drawable defined in

    xml (still requires some artistic skills!) Drawables 12 <?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 tip Combine with state list <selector> <item android:state_pressed="true" > <shape> ... </shape> </item> <item> <shape> ... </shape> </item> </selector>
  12. • 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 13 http://developer.android.com/guide/topics/resources/drawable-resource.html Inset Layer List Clip
  13. • Two types of animations – Interpolated Animations 14 <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. • AnimationDrawable – Frame based animations Animations (II) 15 <?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. • 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 16
  16. • Customize a predefined theme • Apply styles to activities

    or full applications – <activity android:theme="@style/Theme.Junaio"> – <application android:theme="@style/Theme.Junaio"> Themes 17 <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 tip Predefined theme names are not well documented and they are a bit tricky buttonStyle buttonStyleToggle radioButtonStyle …
  17. • 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 18
  18. • 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 19
  19. Questions? 21 “Work it Harder Make it Better Do it

    Faster Make us Stronger” -Daft Punk