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
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