1. ADVANCED STYLING
AND SKINNING
Joshua Jamison
11.9.11
Wednesday, November 9, 11

2. WHAT’S THIS ABOUT?
This Not This
Ranging from
Basic Advanced
Wednesday, November 9, 11

3. SO…
WHO IS THIS GUY?
•Software Architect & Developer
•Hacking on Android since Beta
•Multiple Applications to market
•Contractor for Universal Mind
•Still owns an HTC G1 Rarrr…brains.
•“My life for Aiur”
•Not actually a zombie
Wednesday, November 9, 11

4. WHY BOTHER?
Wednesday, November 9, 11

5. WHY BOTHER?
•Android is ugly
Wednesday, November 9, 11

6. WHY BOTHER?
•Android is ugly
Doesn’t have to be
Wednesday, November 9, 11

7. WHY BOTHER?
•Android is ugly
Doesn’t have to be
•Don’t need to design for Android
Wednesday, November 9, 11

8. WHY BOTHER?
•Android is ugly
Doesn’t have to be
•Don’t need to design for Android
Unless you have a brand
Wednesday, November 9, 11

9. WHY BOTHER?
•Android is ugly
Doesn’t have to be
•Don’t need to design for Android
Unless you have a brand
•Just port the iPhone app
Wednesday, November 9, 11

10. WHY BOTHER?
•Android is ugly
Doesn’t have to be
•Don’t need to design for Android
Unless you have a brand
•Just port the iPhone app
Android != iPhone
Wednesday, November 9, 11

11. LAYOUTS
• <LinearLayout>, <RelativeLayout>, <FrameLayout>…
• match_parent & wrap_layout
• layout_weight
Wednesday, November 9, 11

12. STYLES & THEMES
• Names are just a convention: styles.xml, themes.xml,
makes_no_difference.xml
• XML files placed in /res/values/ folder
• Apply a Theme to an Activity / Apply a Style to a View
• Both use <style> tag
• Themes cascade, Styles do not
Wednesday, November 9, 11

13. <STYLE> TAG
• Style must have name attribute
• Children must be <item>
• Item must have name attribute
• Code assist helps, but use docs
• @style/style_name
Wednesday, November 9, 11

14. USING SDK STYLES
• @android:style/…
• Code complete getting better and better
• Use source to see specifics
• Convenient, but sometimes unpredictable
Wednesday, November 9, 11

15. STYLE INHERITANCE
• Two types: parent attribute & style name prefix
• Use style name prefix for inheriting from your own styles
• Use parent attribute for inheriting from Android SDK styles
Wednesday, November 9, 11

16. COMMON STYLES
• Backgrounds
• android:background & android:windowBackground
• Style with background, Theme with windowBackground
Wednesday, November 9, 11

17. COMMON STYLES
• Button
• background drawable (use a selector)
• text
• drawableLeft, drawableTop, …
• drawablePadding
Wednesday, November 9, 11

18. COMMON STYLES
• ImageView & ImageButton
• ImageButton extends ImageView
• android:src
• ImageButton uses default Button background
Wednesday, November 9, 11

19. COMMON STYLES
• Tabs
• Can be very frustrating
• TabWidget contains the Tabs
• Keep the widget at the top!
• TabHost.TabSpec.setIndicator()
“Please no”
Wednesday, November 9, 11

20. COMMON STYLES
• Dialogs
• Can be annoying
• Standard Dialog content is easily
customized, but not the title.
• AlertDialog convenient for
building simple dialogs
• Dialogs can take a custom theme
• Try DialogFragments with the
support library
Wednesday, November 9, 11

21. COMMON STYLES
• TextAppearance
• Views with Text usually have a textAppearance style
• Container for common text styles
• To ease reuse of text styles through app
• http://developer.android.com/reference/android/R.styleable.html#TextAppearance
Wednesday, November 9, 11

22. COLORS, STRINGS & ARRAYS
• <color name=”foo”> & <string name=”bar”>
• XML file names are just conventions (colors.xml, strings.xml)
• Also in the /res/values/ folder
• <integer-array> convenient for colors
• <string-array> convenient for strings
• Arrays can reference new values or already defined values
Wednesday, November 9, 11

23. DRAWABLES
• /res/drawable…
• Configuration Qualifiers
(hdpi / mdpi / ldpi)
• Android prefers to scale down larger images
• Density ambiguous drawables belong in /res/drawable/
• http://developer.android.com/resources/dashboard/screens.html
Wednesday, November 9, 11

24. 9 PATCH
• Good for graphics that will need to scale to fit content
• Must be PNG format and name must end with “.9.png”
• Use draw9patch application in /<sdk install path>/tools/
• Who’s job is this, really?
• http://developer.android.com/guide/developing/tools/draw9patch.html
Wednesday, November 9, 11

25. 9 PATCH TIPS
• Source image should be
smallest repeatable area
• Patch lines must be
continuous
• Stay away from corners
• Be careful with gradients
API 14 - /res/drawable-hdpi/btn_default_normal_holo.9.png
Wednesday, November 9, 11

26. XML DRAWABLES
The cool stuff…
• Density ambiguous, so belongs in /res/drawable/ folder
• /res/drawable/filename.xml
• Now with wizard & code complete
• http://developer.android.com/guide/topics/resources/drawable-resource.html
Wednesday, November 9, 11

27. XML DRAWABLES
• State List <selector>
• Used for buttons with states (including toggle and radio)
• States: pressed, focused, selected, checked, enabled
• Don’t forget the “focused” state!
• Can be used for colors as well
Wednesday, November 9, 11

28. XML DRAWABLES
• Shape <shape> (declarative graphics!)
• Geometric shapes: rectangle, oval, line, ring
• Useful to nest multiple inside <layer-list>
• Good for simple graphics
• Complex graphics should be handled with images or the
graphics API
• Warning: Line shape is only horizontal!
Wednesday, November 9, 11

29. XML DRAWABLES
• LevelList <level-list>
• Essentially gives drawable custom states
• <item android:drawable=”@drawable/foo”/> or
<item><shape/></item>
• Items can apply to multiple levels: minLevel & maxLevel
• Change programmatically on the View with setLevel() or
setImageLevel()
Wednesday, November 9, 11

30. XML DRAWABLES
• Many more available
• http://developer.android.com/guide/topics/resources/drawable-resource.html
Wednesday, November 9, 11

31. ATTRS
• Custom attributes for your styles
• Abstracts style reference away
• Useful for Themes
• Many defaults already available
• Use the source for examples of making your own
Wednesday, November 9, 11

32. ATTRS
• Filename convention: attrs.xml
• Place in XML in /res/values/
• <declare-styleable name=”My.Custom.Style.Or.Theme”>
<attr name=”fooStyle” format=”reference|color”/>
<attr name=”barDim” format=”dimension”/>
• ?attr/fooStyle
• Very useful in custom components
• http://developer.android.com/reference/android/R.attr.html
(click “View Source”)
Wednesday, November 9, 11

33. THANKS FOR COMING!
• My Contact Info
name:
Joshua Jamison
email:
joshua.jamison@gmail.com
blog:
workingfromhere.com
twitter:
cephus
Feedback via EventBoard.com
• Resources
Android Docs:
http://developer.android.com
Android Source:
http://source.android.com/
Google code search:
http://www.google.com/codesearch#/
&exact_package=android
code:
https://github.com/cephus/SkinningStylingAnDevCon2
slides:
Wednesday, November 9, 11