Advanced Android Design Implementation

4,769
-1

Published on

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,769
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Advanced Android Design Implementation

  1. 1. Advanced DesignImplementationJoshua Jamison5.15.12 PRESENTATION ANDEVCON • MAY 15, 2012
  2. 2. What’s this about? This Not This Ranging from Basic AdvancedPRESENTATION tackmobile.com
  3. 3. So... who is this guy?• Software Architect & Developer• Hacking on Android since Beta• Multiple Applications to market• Developer with Tack• Still owns an HTC G1PRESENTATION tackmobile.com
  4. 4. 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
  5. 5. Design StrategiesHave 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
  6. 6. 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 PRESENTATION tackmobile.com
  7. 7. Design Strategies• Make a plan • How much should be reusable? • How much time is left? • How often can you iterate? • Branding vs OS familiarityPRESENTATION tackmobile.com
  8. 8. Design Strategies Porting an iOS appPRESENTATION tackmobile.com
  9. 9. 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 & resolutionsPRESENTATION tackmobile.com
  10. 10. 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 PRESENTATION tackmobile.com
  11. 11. Using SDK Styles• @android:style/…• “Code complete” getting better and better• Use source to see specifics• Convenient, but sometimes unpredictable PRESENTATION tackmobile.com
  12. 12. 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 PRESENTATION tackmobile.com
  13. 13. 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.htmlPRESENTATION tackmobile.com
  14. 14. 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.htmlPRESENTATION tackmobile.com
  15. 15. 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
  16. 16. Navigation• Follow the guidelines http://developer.android.com/design/ patterns/navigation.html• Use an ActionBar• Consider using ActionBarSherlock library
  17. 17. NavigationTabs• Old tabs are ugly• TabHost / TabWidget are now deprecated• However… “Please no”
  18. 18. 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”
  19. 19. Menus• Physical Menu Button no longer required• Menus live on in the ActionBar (3 & 4) PRESENTATION tackmobile.com
  20. 20. CAB• Contextual ActionBar• Change the action bar during content selection (usually a list or text)• Completely new set of ActionBar actions
  21. 21. 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.htmlPRESENTATION tackmobile.com
  22. 22. 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 PRESENTATION tackmobile.com
  23. 23. 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! PRESENTATION tackmobile.com
  24. 24. 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() PRESENTATION tackmobile.com
  25. 25. XML Drawables• Many more available• Drawables documentation: http://developer.android.com/guide/topics/ resources/drawable-resource.html PRESENTATION tackmobile.com
  26. 26. 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 ownPRESENTATION tackmobile.com
  27. 27. 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 PRESENTATION tackmobile.com
  28. 28. 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 PRESENTATION tackmobile.com

×