Designing an Android App from Idea to Market
-
Upload
tony-hillerson -
Category
Technology
-
view
4.776 -
download
0
Transcript of Designing an Android App from Idea to Market
![Page 1: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/1.jpg)
#AndroidOpen
Designing an AppFrom Idea to Market
Tony HillersonSoftware Architect
Juan SanchezExperience Architect
©2011 EffectiveUI
![Page 2: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/2.jpg)
#AndroidOpen
EffectiveUIUser Experience Agency
@effectiveui
Tony HillersonSoftware Architect
@thillerson
“Building Android Apps with Java”
Juan SanchezExperience Architect
@juansanchez
“Creating Visual Experiences with Flex 3.0”
![Page 3: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/3.jpg)
#AndroidOpen
OverviewWe’re going on a journey.
AndroidOpen 2011
http://en.wikipedia.org/wiki/A_Journey_to_the_Center_of_the_Earth
![Page 4: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/4.jpg)
#AndroidOpen
Who are you?Designer, developer, both?
![Page 5: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/5.jpg)
#AndroidOpen
EXERCISE ONE
Design a Conference AppLike for this conference
![Page 6: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/6.jpg)
#AndroidOpen
The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Review slides
![Page 7: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/7.jpg)
#AndroidOpen
The features• Chat• Take pictures• Edit profile• View schedule• See a map• Check weather• Scan QR code• Watch video• Review slides
![Page 8: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/8.jpg)
#AndroidOpen
Too many features!What should the app do?
![Page 9: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/9.jpg)
#AndroidOpen
Getting up to speedThis will only hurt a little.
![Page 10: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/10.jpg)
#AndroidOpenAndroidOpen 2011
What?
![Page 11: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/11.jpg)
#AndroidOpen
![Page 12: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/12.jpg)
#AndroidOpen
Interaction DesignExposing intent through actions and feedback.
![Page 13: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/13.jpg)
#AndroidOpen
Magic
Form Substance
Process
![Page 14: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/14.jpg)
#AndroidOpen
People think it's this veneer - that the designers are handed this box and told, 'Make it look good!'.
That's not what we think design is. It's not just what it looks like and feels like.
Design is how it works.Steve Jobs
![Page 15: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/15.jpg)
#AndroidOpen
Don Norman’s Design Vocabulary
VisibilityAffordancesFeedbackMappingConstraintConsistency
![Page 16: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/16.jpg)
#AndroidOpen
Natural DesignUse what people know from their environment.
![Page 17: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/17.jpg)
#AndroidOpen
![Page 18: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/18.jpg)
#AndroidOpen
http://www.subtraction.com/2011/03/28/an-illustration-for-stack-america
![Page 19: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/19.jpg)
#AndroidOpen
Conceptual ModelThe “model” a user of a system builds to reason about a system
![Page 20: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/20.jpg)
#AndroidOpen
VisibilityCues between the design of an object and its operation
![Page 21: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/21.jpg)
#AndroidOpen
![Page 22: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/22.jpg)
#AndroidOpen
![Page 23: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/23.jpg)
#AndroidOpen
![Page 24: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/24.jpg)
#AndroidOpen
![Page 25: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/25.jpg)
#AndroidOpen
AffordancePerception that something can be interacted with
![Page 26: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/26.jpg)
#AndroidOpen
![Page 27: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/27.jpg)
#AndroidOpen
![Page 28: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/28.jpg)
#AndroidOpen
![Page 29: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/29.jpg)
#AndroidOpen
FeedbackThe effect of user actions should be obvious
![Page 30: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/30.jpg)
#AndroidOpen
http://www.flickr.com/photos/meganbarton/3023756556/
![Page 31: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/31.jpg)
#AndroidOpen
http://www.flickr.com/photos/meganbarton/3023756556/
![Page 32: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/32.jpg)
#AndroidOpen
http://www.flickr.com/photos/meganbarton/3023756556/
![Page 33: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/33.jpg)
#AndroidOpen
MappingA relation between intentions and possible actions and between actions and their effect on a system or device
![Page 34: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/34.jpg)
#AndroidOpen
http://www.flickr.com/photos/docsearls/181012863/
![Page 35: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/35.jpg)
#AndroidOpen
http://www.flickr.com/photos/docsearls/181012863/
![Page 36: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/36.jpg)
#AndroidOpen
ConstraintsPreventing errors before they can occur
![Page 37: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/37.jpg)
#AndroidOpen
![Page 38: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/38.jpg)
#AndroidOpen
![Page 39: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/39.jpg)
#AndroidOpen
ConsistencyIn the way visual objects are used
![Page 40: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/40.jpg)
#AndroidOpen
http://www.flickr.com/photos/docsearls/181012863/
![Page 41: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/41.jpg)
#AndroidOpen
PerformancePeople don’t have time to wait.
![Page 42: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/42.jpg)
#AndroidOpen
http://www.flickr.com/photos/docsearls/181012863/
![Page 43: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/43.jpg)
#AndroidOpen
TakeawaysInteractive elements should be visible, recognizable, reactive (feedback), safe, and consistent.
![Page 44: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/44.jpg)
#AndroidOpenAndroidOpen 2011
I know kung fu.
![Page 45: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/45.jpg)
#AndroidOpen
You do design alreadyWhether you know it or not.
![Page 46: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/46.jpg)
#AndroidOpen
![Page 47: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/47.jpg)
#AndroidOpen
![Page 48: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/48.jpg)
#AndroidOpen
![Page 49: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/49.jpg)
#AndroidOpen
![Page 50: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/50.jpg)
#AndroidOpen
PUSH HeAR ID10T LOL!!1!
![Page 51: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/51.jpg)
#AndroidOpen
Avoid This
![Page 52: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/52.jpg)
#AndroidOpen
Knowing your usersGet out and talk to people
![Page 53: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/53.jpg)
#AndroidOpen
How many people you ask?
Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
![Page 54: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/54.jpg)
#AndroidOpen
Who to interview?
http://wingstoafrica.com/mali-pictures-part-2.html http://www.kenrockwell.com/katie/2008.htm http://good-times.webshots.com/photo/
![Page 55: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/55.jpg)
#AndroidOpen
What to say? Where to go?
![Page 56: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/56.jpg)
#AndroidOpen
Analyze your resultsTurn your results into findings.Summarize the findings in terms of a set of agreed-upon design heuristics.
![Page 57: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/57.jpg)
#AndroidOpen
EXERCISE TWO
User goalsAnd what they mean to you
![Page 58: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/58.jpg)
#AndroidOpen
THE PERSONA
Hilly Tonnerson
• 19 - 45 years old• mobile developer• wants to meet other developers• has specific interests and questions
• In this case, you can be the persona.
![Page 59: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/59.jpg)
#AndroidOpen
What do you want to leave the conference with?What do you like about conferences?What environment are you in?What do you hate about conferences?What’s a day during a conference like?Etc.
![Page 60: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/60.jpg)
#AndroidOpen
What we came up withWe’re here to present on design and developmentWe want to share our presentationWe want to easily answer questionsWe want presenting to be easierWe want to share more informationWe want to know when/where we’re presentingWe want to know who is attendingInclude people who can’t be here
![Page 61: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/61.jpg)
#AndroidOpen
EXERCISE THREE
Feature BrainstormWhat’s the important stuff?
![Page 62: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/62.jpg)
#AndroidOpen
What we came up withA presenter’s assistant appControls the presentation with our phonePeople can ask questions from their phonePeople can “raise their hand”The phone vibrates when there’s a questionWe can control information being pushed to the web
![Page 63: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/63.jpg)
#AndroidOpen
Designing for AndroidJust a starting point
![Page 64: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/64.jpg)
#AndroidOpen
Know the deviceDimensions, orientation, sensors, inputs, etc.
![Page 65: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/65.jpg)
#AndroidOpen
Know the platformThis is not iOS, Windows Phone, webOS, etc.
![Page 66: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/66.jpg)
#AndroidOpen
Embrace touchPeople are using fingers, not cursorsContent as the interfaceMulti-touch and gesturesPhysical metaphors*
![Page 67: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/67.jpg)
#AndroidOpen
Give each screen a purposeAnimation and transitionsJust-in-time contentDepth and spaceProgressive disclosure
![Page 68: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/68.jpg)
#AndroidOpen
ContextWhat’s the physical or device environment?Usage patterns
maisdcharlottes.blogspot.com
![Page 69: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/69.jpg)
#AndroidOpen
Android GuidelinesA lot of the work has already been done for you.
![Page 70: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/70.jpg)
#AndroidOpen
When in doubtRefer to the guidelines
![Page 71: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/71.jpg)
#AndroidOpen
http://www.mutualmobile.com/2011/android-design-guidelines-version-1-1-honeycomb/
![Page 72: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/72.jpg)
#AndroidOpen
![Page 73: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/73.jpg)
#AndroidOpen
“Rules” can be brokenThere’s unexplored territoryWe’re just at the beginning
![Page 74: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/74.jpg)
#AndroidOpen
EXERCISE FOUR
Design a Conference AppUsing the powers you’ve been given.
![Page 75: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/75.jpg)
#AndroidOpen
Map out some ideasWhat are the screens? Where can the user “go”?
![Page 76: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/76.jpg)
#AndroidOpen
![Page 77: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/77.jpg)
#AndroidOpen
Sketch out some screensCan’t sketch? Work with someone who can.
![Page 78: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/78.jpg)
#AndroidOpen
Here’s ours
![Page 79: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/79.jpg)
#AndroidOpen
Get feedbackValidate your sketches meet the goals.
![Page 80: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/80.jpg)
#AndroidOpen
What we heardHow can I see all the slides?How do I switch slides?Those icons don’t make senseHow do I know what slide I’m on?I think this would be usefulI think this would be distracting
![Page 81: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/81.jpg)
#AndroidOpen
Anyone want to share?Bueller? Bueller? Bueller?
![Page 82: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/82.jpg)
#AndroidOpen
You know what to build.Now, how can you build it.
![Page 83: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/83.jpg)
#AndroidOpen
ProductionTips For Realizing Visual Designs
![Page 84: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/84.jpg)
#AndroidOpen
Beautiful AndroidEric Burke (Square)11:35 MondayGrand Ballroom B
![Page 85: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/85.jpg)
#AndroidOpen
The source of pixelsWhat’s the toolset?
![Page 86: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/86.jpg)
#AndroidOpen
Adobe Fireworks
![Page 87: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/87.jpg)
#AndroidOpen
![Page 88: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/88.jpg)
#AndroidOpen
Visibility Menus and the Action Bar
![Page 89: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/89.jpg)
#AndroidOpen
showAsAction Avoid using “always”Provide an icon and “ifRoom|withText”
![Page 90: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/90.jpg)
#AndroidOpen
The Honeycomb Action Bar:Front to BackMark Murphy (CommonsWare)14:30 TuesdayGrand Ballroom B
![Page 91: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/91.jpg)
#AndroidOpen
9 Patch vs. XMLA matter of designer-developer workflow
![Page 92: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/92.jpg)
#AndroidOpen
![Page 93: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/93.jpg)
#AndroidOpen
![Page 94: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/94.jpg)
#AndroidOpen
![Page 95: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/95.jpg)
#AndroidOpen
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <stroke android:color="@color/color_primary_light_stripe" android:width="1px" /> <solid android:color="@android:color/transparent" /> <corners android:bottomRightRadius="6dip" android:bottomLeftRadius="6dip" android:topLeftRadius="6dip" android:topRightRadius="6dip"/> </shape> </item>...
![Page 96: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/96.jpg)
#AndroidOpen
... <item android:top="2px"> <shape android:shape="rectangle"> <stroke android:color="@color/color_primary_dark_stripe" android:width="1px" /> <solid android:color="@android:color/transparent" /> <corners android:bottomRightRadius="6dip" android:bottomLeftRadius="6dip" android:topLeftRadius="6dip" android:topRightRadius="6dip"/> </shape> </item>
...
![Page 97: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/97.jpg)
#AndroidOpen
... <item android:top="1px" android:bottom="1px"> <shape android:shape="rectangle"> <gradient android:angle="270" android:startColor="@color/button_color_top" android:centerColor="@color/button_color_middle" android:endColor="@color/button_color_bottom" /> <corners android:bottomRightRadius="6dip" android:bottomLeftRadius="6dip" android:topLeftRadius="6dip" android:topRightRadius="6dip"/> </shape> </item></layer-list>
![Page 98: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/98.jpg)
#AndroidOpen
Multi-Screen DesignsWith Fragments and Resources
![Page 99: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/99.jpg)
#AndroidOpen
What devices to target?Try to get as much data as you can.
![Page 100: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/100.jpg)
#AndroidOpen
What devices to target?Try to get as much data as you can.
![Page 101: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/101.jpg)
#AndroidOpen
http://developer.android.com/resources/dashboard/platform-versions.html
![Page 102: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/102.jpg)
#AndroidOpen
Ice Cream Sandwich Is Coming
![Page 103: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/103.jpg)
#AndroidOpen
Unified codebaseFor all devices
![Page 104: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/104.jpg)
#AndroidOpen
http://android-developers.blogspot.com/2011/09/preparing-for-handsets.html
![Page 105: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/105.jpg)
#AndroidOpen
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment class="com.example.android.TitlesFragment" android:id="@+id/list_frag" android:layout_width="match_parent" android:layout_height="match_parent"/></FrameLayout>
Phone layout
![Page 106: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/106.jpg)
#AndroidOpen
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/frags"> <fragment class="com.example.android.TitlesFragment" android:id="@+id/list_frag" android:layout_width="@dimen/titles_size" android:layout_height="match_parent"/> <fragment class="com.example.android.DetailsFragment" android:id="@+id/details_frag" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>
Tablet layout
![Page 107: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/107.jpg)
#AndroidOpen
/** This is a callback that the list fragment (Fragment A) calls when a list item is selected */public void onItemSelected(int position) { DisplayFragment fragB = (DisplayFragment) getFragmentManager() .findFragmentById(R.id.display_frag); if (fragB == null) { // DisplayFragment (Fragment B) is not in the layout, // start DisplayActivity (Activity B) // and pass it the info about the selected item Intent intent = new Intent(this, DisplayActivity.class); intent.putExtra("position", position); startActivity(intent); } else { // DisplayFragment (Fragment B) is in the layout, tell it to update fragB.updateContent(position); }}
![Page 108: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/108.jpg)
#AndroidOpen
res/layout/main_activity.xml # For phonesres/layout-sw600dp/main_activity.xml # 7” tabletsres/layout-sw720dp/main_activity.xml # 10” tablets
http://android-developers.blogspot.com/2011/07/new-tools-for-managing-screen-sizes.html
![Page 109: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/109.jpg)
#AndroidOpen
RTFSrepo and exploring how google does it
![Page 111: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/111.jpg)
#AndroidOpen
http://androiddrawableexplorer.appspot.com/
![Page 112: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/112.jpg)
#AndroidOpen
Questions?
![Page 113: Designing an Android App from Idea to Market](https://reader033.fdocuments.in/reader033/viewer/2022052900/555a285ed8b42a900d8b49fc/html5/thumbnails/113.jpg)
#AndroidOpen
Tony Hillerson@thillerson
Juan Sanchez@juansanchez
effectiveui.com
Thanks!
©2011 EffectiveUI