Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Advanced Android Design Implementation


Published on

Published in: Technology
  • Be the first to comment

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
  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
  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
  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
  8. 8. Design Strategies Porting an iOS appPRESENTATION
  9. 9. Design Strategies Porting an iOS app• Read through Android Design guidelines• Get new assets• Action Bar not Navigation Bar• App Icon, Button Icons, Button States, Fonts, Device dimensions & resolutionsPRESENTATION
  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
  11. 11. Using SDK Styles• @android:style/…• “Code complete” getting better and better• Use source to see specifics• Convenient, but sometimes unpredictable PRESENTATION
  12. 12. Drawables• /res/drawable…• Resource Qualifiers (hdpi / mdpi / ldpi) as of 4.2.12• Android prefers to scale down larger images• Density ambiguous drawables belong in /res/ drawable/• dashboard/screens.html PRESENTATION
  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 • > screens_support.htmlPRESENTATION
  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?• developing/tools/draw9patch.htmlPRESENTATION
  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 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
  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: drawable-resource.htmlPRESENTATION
  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
  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
  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
  25. 25. XML Drawables• Many more available• Drawables documentation: resources/drawable-resource.html PRESENTATION
  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
  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• R.attr.html PRESENTATION
  28. 28. Thanks for coming!• My Contact Info name: Joshua Jamison email: g+: blog:• Resources Android Docs: Android Source: PRESENTATION