Advanced Android Design Implementation

Advanced Design
Implementation
Joshua Jamison
5.15.12

PRESENTATION ANDEVCON • MAY 15, 2012

What’s this about?
This Not This

Ranging from
Basic Advanced
PRESENTATION tackmobile.com

So... who is this guy?
• Software Architect &
Developer

• Hacking on Android since Beta

• Multiple Applications to
market

• Developer with Tack

• Still owns an HTC G1


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

Design Strategies
Have a goal

• Who is your client?
The person that defines “complete” and
answers the questions

• Who is your user?
The people who will use the application the most

Design Strategies

• Design vs. UX
Get in the user’s shoes
• Avoid premature “pixel
pushing”
Don’t wait for design finalization
• Get a designer & work with them
Wireframes, comps, & assets

Design Strategies

• Make a plan
• How much should be reusable?
• How much time is left?
• How often can you iterate?
• Branding vs OS familiarity


Design Strategies
Porting an iOS app


Design Strategies
Porting an iOS app

• Read through Android Design guidelines
http://developer.android.com/design
• Get new assets
• Action Bar not Navigation Bar
• App Icon, Button Icons, Button States,
Fonts, Device dimensions & resolutions


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


Using SDK Styles

• @android:style/…
• “Code complete” getting better and better
• Use source to see specifics
• Convenient, but sometimes unpredictable


Drawables

• /res/drawable…
• Resource Qualifiers
http://developer.android.com/resources/dashboard/screens.html
(hdpi / mdpi / ldpi) as of 4.2.12

• Android prefers to scale down larger images
• Density ambiguous drawables belong in /res/
drawable/
• http://developer.android.com/resources/
dashboard/screens.html

Drawables
• px = dip * (dpi / 160)
• ldpi ~120dpi (0.75x)
• mdpi ~160dpi (baseline)
• hdpi ~240dpi (1.5x)
• xhdpi ~320dpi (2.0x)
• 1dip mdpi = 160 / 160 * 1dip = 1px
• Minimum Screen Sizes
• small 320dp x 426dp
• normal 320dp x 470dp
• large 480dp x 640dp
• xlarge 720dp x 960dp
• Normal hdpi = 480px x ~705px
• > http://developer.android.com/guide/practices/
screens_support.html

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

9 Patch Tips
• Source image should
be smallest
repeatable area
• Patch lines must be
continuous
• Stay away from
corners
• Be careful with
API 14 - /res/drawable-hdpi/btn_default_normal_holo.9.png
gradients

Navigation

• Follow the guidelines
http://developer.android.com/design/
patterns/navigation.html

• Use an ActionBar
• Consider using
ActionBarSherlock library

Navigation
Tabs

• Old tabs are ugly
• TabHost / TabWidget
are now deprecated
• However…

“Please no”

Navigation
Tabs
• New tabs are not ugly
• Uses fragments via the
Support Library
• Use the ActionBar tabs if
you can
• Also consider Spinner
navigation in ActionBar
• Beware the design site’s
“scrollable tabs”
“Please yes”

Menus

• Physical Menu Button no longer required
• Menus live on in the ActionBar (3 & 4)


CAB

• Contextual ActionBar
• Change the action bar
during content selection
(usually a list or text)
• Completely new set of
ActionBar actions

XML Drawables

• Density ambiguous, so belongs in /res/
drawable/ folder
• /res/drawable/filename.xml
• Now with wizard & code complete
• Drawables documentation:
http://developer.android.com/guide/topics/resources/
drawable-resource.html


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


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!


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

XML Drawables
• Many more available
• Drawables documentation:
http://developer.android.com/guide/topics/
resources/drawable-resource.html


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


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

Thanks for coming!

• My Contact Info
name: Joshua Jamison
email: joshua.jamison@tackmobile.com
g+: joshua.jamison@gmail.com
blog: workingfromhere.com
• Resources
Android Docs: http://developer.android.com
Android Source: http://source.android.com/
https://github.com/android


Advanced Android Design Implementation

More Related Content

What's hot

Viewers also liked

Similar to Advanced Android Design Implementation

More from Tack Mobile

Recently uploaded

Advanced Android Design Implementation