Android-Fu: Awesome Apps for Ice Cream Sandwich (Jelly Bean!) and Beyond

The slides from the tutorial on Android design and development that @chrisjrn, @desplesda and @parisba ran at OSCON 2012 in Portland.

Transcript

1. Android-Fu
   There are prerequisites for this session available at
   http://lab.to/oscon2012
   Please install the software if you want to follow the coding exercises.
   Please grab some paper and a pen from the front!
   

   View Slide

2. Android-Fu
   Awesome apps for
   Paris Buttfield-Addison, Chris Neugebauer, Jon Manning
   Ice Cream Sandwich and beyond
   

   View Slide

3. Android-Fu
   Awesome apps for
   Paris Buttfield-Addison, Chris Neugebauer, Jon Manning
   and beyond
   

   View Slide

4. Android-Fu
   Awesome apps for
   Paris Buttfield-Addison, Chris Neugebauer, Jon Manning
   Jelly Bean and beyond
   

   View Slide

5. Android-Fu
   Awesome apps for
   Paris Buttfield-Addison, Chris Neugebauer, Jon Manning
   Jelly Bean and beyond
   

   View Slide

6. Android-Fu
   Awesome apps for
   Paris Buttfield-Addison, Chris Neugebauer, Jon Manning
   Jelly Bean and beyond
   

   View Slide

7. Android-Fu
   Awesome apps for
   Paris Buttfield-Addison, Chris Neugebauer, Jon Manning
   Jelly Bean and beyond
   

   View Slide

8. Harnessing the power of turnips
   as the future of synergistic
   corporate infrastructure.
   

   View Slide

9. What You’ll Learn
   •Why mobile apps are different
   •Designing a mobile user experience
   •Android’s architecture
   •Building an Android app
   

   View Slide

10. Introduction
    (us, Android, etc etc etc)
    

    View Slide

11. Us.
    

    View Slide

12. Us.
    

    View Slide

13. Us.
    

    View Slide

14. Us.
    

    View Slide

15. We speak quickly.
    Please ask us to slow down if you want!
    

    View Slide

16. Android.
    

    View Slide

17. It’s an operating system
    

    View Slide

18. It’s an operating system
    for phones.
    

    View Slide

19. It’s an operating system
    for tablet devices.
    

    View Slide

20. The latest version
    4.1 (“Jelly Bean”)
    

    View Slide

21. This tutorial:
    Designing Android Apps
    

    View Slide

22. This tutorial:
    Designing Android 4.0 Apps
    

    View Slide

23. The Goal:
    An Android App for OSCON
    

    View Slide

24. Housekeeping
    

    View Slide

25. Git!
    We’ve got a git repo full of our example app!
    git clone https://github.com/chrisjrn/oscon-2012-app.git
    cd oscon-2012-app
    git checkout talk_listing_start
    

    View Slide

26. Let’s talk about humans.
    

    View Slide

27. Humans are arrogant, lazy,
    and easily bored.
    

    View Slide

28. Humans are lazy.
    They don’t want to work to get nice things.
    

    View Slide

29. Humans are arrogant.
    They’ll expect other people to anticipate what they want,
    and give it to them the moment they want it.
    

    View Slide

30. Humans are easily bored.
    If something takes longer than a couple of seconds,
    they’re not interested.
    

    View Slide

31. Behold: your customer!
    

    View Slide

32. We’re kind of exaggerating.
    

    View Slide

33. View Slide

34. View Slide

35. Mobile Design
    

    View Slide

36. Mobile computers are different
    to desktop computers.
    

    View Slide

37. Mobile apps are different to
    other apps.
    

    View Slide

38. Android is a Unix machine,
    but don’t write Unix programs.
    

    View Slide

39. View Slide

40. Small screens.
    Short attention spans.
    Limited capacity.
    

    View Slide

41. The Mouse Doesn’t Exist
    

    View Slide

42. View Slide

43. Direct Manipulation Rocks
    

    View Slide

44. Scrolling with inertia!
    

    View Slide

45. View Slide

46. One of the things I was worried
    about was the lack of a gesture
    or shortcut for “page down one
    screenful of text”.
    

    View Slide

47. The iPhone’s inertia-like flick
    scrolling seems to work really
    well for this.
    - John Gruber, 2007
    

    View Slide

48. Direct manipulation rocks!
    

    View Slide

49. Direct manipulation sucks!
    

    View Slide

50. Direct manipulation sucks!
    (for you)
    

    View Slide

51. Crutch
    

    View Slide

52. Virtual keyboards suck
    

    View Slide

53. No tactile feedback.
    

    View Slide

54. Individual keys are small.
    

    View Slide

55. Keyboard entry
    =
    50% of the screen is gone
    

    View Slide

56. View Slide

57. Virtual keyboards rule
    

    View Slide

58. Keyboards hide
    when unnecessary.
    

    View Slide

59. Keyboards change
    when necessary.
    

    View Slide

60. View Slide

61. Typing still sucks.
    

    View Slide

62. The user’s hand is a
    solid object.
    

    View Slide

63. View Slide

64. View Slide

65. Can tap these
    while looking at
    screen content
    Can’t tap these
    without covering
    the screen
    

    View Slide

66. Hands also hold the device.
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. The screen is small.
    

    View Slide

73. The human eye
    can only see so much.
    

    View Slide

74. View Slide

75. View Slide

76. Make every pixel count.
    

    View Slide

77. Summary
    Direct Manipulation
    Keyboards
    Orientation
    

    View Slide

78. Android Principles
    And how it’s not iOS
    or GNOME
    or the Web
    

    View Slide

79. Android Principles
    

    View Slide

80. •Enchant me
    •Simplify my life
    •Make me amazing
    “Creative Vision”
    http://developer.android.com/design/get-started/creative-vision.html
    

    View Slide

81. We have no idea
    what these mean.
    

    View Slide

82. Our Creative Vision
    

    View Slide

83. Do one thing
    Do it well
    

    View Slide

84. “One thing” can mean
    “Some things”
    (but each should be obvious)
    

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. Make it easy to leave
    Make it even easier to return
    

    View Slide

91. “Our goal is to have people leave our website as quickly as
    possible.”
    http://www.google.com/about/company/philosophy/
    

    View Slide

92. View Slide

93. Being a great app
    means
    Being great with other apps
    

    View Slide

94. Your app should provide
    features to other apps
    

    View Slide

95. View Slide

96. View Slide

97. If there’s a native experience,
    provide it.
    

    View Slide

98. If other apps provide
    functionality, use it
    

    View Slide

99. View Slide

100. View Slide

101. What does this mean?
     Double rainbow? So intense?
     

     View Slide

102. Android UI Paradigms
     

     View Slide

103. Actions
     

     View Slide

104. Do something
     Do it well
     

     View Slide

105. Do something
     Make it obvious
     

     View Slide

106. View Slide

107. View Slide

108. The Action Bar
     

     View Slide

109. View Slide

110. What are actions?
     

     View Slide

111. FIT Scheme
     Frequent
     Important
     Typical
     http://developer.android.com/design/patterns/actionbar.html
     

     View Slide

112. Frequent
     

     View Slide

113. Important
     

     View Slide

114. Typical
     

     View Slide

115. View Slide

116. View Slide

117. View Slide

118. View Slide

119. View Slide

120. What’s not in the action bar
     •Jump To Top
     •View my Profile
     •Mute
     •View Settings
     

     View Slide

121. Action Bar Paradigms
     

     View Slide

122. View Slide

123. View Slide

124. Menus aren’t gone
     :(
     

     View Slide

125. View Slide

126. Frequent
     Important
     Typical
     

     View Slide

127. Always
     Sometimes
     Never
     

     View Slide

128. Action Bars
     The most important
     things go here
     Split or single?
     Overflow Menu: Always,
     sometimes, or never?
     

     View Slide

129. Navigation
     

     View Slide

130. Where am I?
     What can I do here?
     

     View Slide

131. How did I get here?
     Where can I go next?
     

     View Slide

132. Navigation
     with the action bar
     

     View Slide

133. View Slide

134. Tabs
     

     View Slide

135. View Slide

136. View Slide

137. View Slide

138. View Slide

139. List navigation
     

     View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. Lists
     A thing
     ALL of the things
     SOME of the things
     

     View Slide

145. Tabs
     SOME of the things
     SOME of the things SOME of the things
     

     View Slide

146. “Back” vs. “Up”
     

     View Slide

147. http://developer.android.com/design/patterns/navigation.html
     

     View Slide

148. http://developer.android.com/design/patterns/navigation.html
     

     View Slide

149. Graphic Design
     

     View Slide

150. View Slide

151. Text
     

     View Slide

152. “layout and typography are
     crisp and meaningful.”
     http://developer.android.com/design/get-started/creative-vision.html
     

     View Slide

153. Swiss
     Design
     

     View Slide

154. View Slide

155. View Slide

156. View Slide

157. View Slide

158. Icons
     

     View Slide

159. View Slide

160. View Slide

161. View Slide

162. View Slide

163. Icons should be obvious.
     If it’s not obvious, use text.
     

     View Slide

164. When is it obvious?
     

     View Slide

165. It’s obvious if
     lots of other apps do it
     

     View Slide

166. It’s obvious if
     it’s obvious
     

     View Slide

167. View Slide

168. View Slide

169. It’s obvious if
     Google has an icon for it
     http://developer.android.com/design/downloads/index.html
     

     View Slide

170. View Slide

171. View Slide

172. View Slide

173. View Slide

174. View Slide

175. View Slide

176. View Slide

177. View Slide

178. View Slide

179. An aside:
     Heuristic Analysis
     

     View Slide

180. View Slide

181. 0
     25
     50
     75
     100
     0 5 10 15
     Percentage of Usability Problems Found
     Number of Evaluators
     

     View Slide

182. Analyse your results.
     Create findings.
     

     View Slide

183. Text
     Colours
     Icons
     In order of importance
     

     View Slide

184. Summary
     Think about design.
     Please.
     

     View Slide

185. Making an App
     

     View Slide

186. We’re going to make
     an OSCON app.
     

     View Slide

187. We’ll go through the process
     of conceptualising and
     designing the interface.
     

     View Slide

188. You’ll design some stuff!
     

     View Slide

189. You’ll work with the
     person next to you.
     Say hello!
     

     View Slide

190. Designing a Mobile App
     

     View Slide

191. Our Process
     

     View Slide

192. The tools you’ll need:
     

     View Slide

193. The tools you’ll need:
     

     View Slide

194. The tools you’ll need:
     

     View Slide

195. The tools you’ll need:
     

     View Slide

196. The tools you’ll need:
     

     View Slide

197. The tools you’ll need:
     

     View Slide

198. Start with an outline.
     

     View Slide

199. Start with an outline.
     

     View Slide

200. “I want to see what’s
     happening at OSCON.”
     

     View Slide

201. Outlines can be
     iterated upon.
     

     View Slide

202. Outlines can be
     iterated upon.
     

     View Slide

203. “I want to quickly see what’s
     happening at OSCON.”
     

     View Slide

204. View Slide

205. Now start listing features.
     

     View Slide

206. What are the three most
     important features that this
     app must have?
     

     View Slide

207. What We Thought
     See the details of a talk
     See what talks are on
     sometime
     Update the schedule
     

     View Slide

208. What We Thought
     See the details of a talk
     See what talks are on
     sometime
     Update the schedule
     

     View Slide

209. What We Thought
     Individual
     session screen
     See the details of a talk
     See what talks are on
     sometime
     Update the schedule
     

     View Slide

210. What We Thought
     Individual
     session screen
     List of
     sessions
     See the details of a talk
     See what talks are on
     sometime
     Update the schedule
     

     View Slide

211. What We Thought
     Individual
     session screen
     List of
     sessions
     List days of
     conference
     See the details of a talk
     See what talks are on
     sometime
     Update the schedule
     

     View Slide

212. What We Thought
     Individual
     session screen
     List of
     sessions
     List days of
     conference
     Updating
     should be
     invisible
     See the details of a talk
     See what talks are on
     sometime
     Update the schedule
     

     View Slide

213. Draw the screens needed for
     the features you’ve chosen.
     

     View Slide

214. OSCON 2012 Session
     How to grow a better turnip
     Turnips are a growing industry. Along
     with node.js they represent one of the
     biggest advances our field has ever
     seen. We should learn how to build a
     better turnip. This session teaches you
     everything you need to know.
     Bob Turnip
     Tuesday, 9AM to 12:30PM
     Portland 255
     OSCON 2012 Days
     Monday
     Tuesday
     Wednesday
     Thursday
     Friday
     OSCON 2012 Timetable
     9AM to 12:30PM 1:30PM to 5PM 5:30PM to 10PM
     Dancing Through Life
     How to Succeed in Business
     Why no one mourns the Wicked
     Brimstone and Treacle
     Someone
     Someone
     Someone
     Someone
     

     View Slide

215. Never code before
     designing.
     

     View Slide

216. Side note:
     API design is still
     design.
     

     View Slide

217. Code something and test it.
     Now.
     

     View Slide

218. View Slide

219. Iterate.
     

     View Slide

220. View Slide

221. Coffee time
     See you at 11:00am!
     

     View Slide

222. Step 1
     A static app
     

     View Slide

223. Stage 1
     Implement all of the screens of the app
     Will always show the same data, no matter what we press
     Will not be themed beyond the defaults
     

     View Slide

224. We’ll give you most of the code.
     Follow along with us.
     

     View Slide

225. Three screens to make.
     

     View Slide

226. What is an Android App?
     

     View Slide

227. A loose collection of managed Java classes
     Instructions telling Android how they all fit together
     An Android app is:
     

     View Slide

228. The Manifest
     An XML file that describes the contents of the app to the
     Android OS
     More on that later.
     

     View Slide

229. Activities
     public void onCreate(Bundle foo)
     {
     doLol();
     }
     public void warble()
     {
     }
     UI bits
     

     View Slide

230. View Slide

231. Rare
     Startup
     Shutdown
     Frequent
     Rare
     

     View Slide

232. UI thread vs. background threads
     Great and epic battle?
     

     View Slide

233. http://developer.android.com/guide/practices/design/responsiveness.html
     

     View Slide

234. “The developer of this app was lazy and
     foolish, please check the Play Store for
     something better!”
     http://developer.android.com/guide/practices/design/responsiveness.html
     

     View Slide

235. Keeping off the UI thread
     

     View Slide

236. Views
     

     View Slide

237. View Slide

238. Image View
     

     View Slide

239. Image View
     Text View
     

     View Slide

240. Image View
     Text View
     Button
     

     View Slide

241. Image View
     Text View
     Scroll Pane
     Button
     

     View Slide

242. Image View
     Text View
     Scroll Pane
     Button
     Composite Layout
     

     View Slide

243. Fragments
     

     View Slide

244. Your New Master
     

     View Slide

245. Introduced in 3.0,
     Back-ported to 1.6.
     It’s that important.
     

     View Slide

246. Views with code
     Views with a life cycle
     

     View Slide

247. View Slide

248. View Slide

249. Activities
     vs.
     Fragments
     

     View Slide

250. Activities
     are expensive
     

     View Slide

251. View Slide

252. FRAGMENTS
     

     View Slide

253. Fragments
     Many at once.
     

     View Slide

254. Talk Listings
     

     View Slide

255. (We’re going to code now!)
     git checkout talk_listing_start
     

     View Slide

256. git checkout talk_listing_end
     

     View Slide

257. Adding a second screen
     

     View Slide

258. We need one activity to
     launch another.
     

     View Slide

259. Intents
     

     View Slide

260. Intents
     

     View Slide

261. OS-Level signals
     Used to launch activities
     

     View Slide

262. OS-Level signals
     Used to launch other apps
     

     View Slide

263. Schedule
     

     View Slide

264. (We’re going to code now!)
     git checkout schedule_start
     

     View Slide

265. git checkout schedule_end
     

     View Slide

266. Days List
     

     View Slide

267. (We’re going to code now)
     git checkout day_list_start
     

     View Slide

268. git checkout day_list_end
     

     View Slide

269. Finished (for now)!
     

     View Slide

270. Finishing An App
     Part 2
     

     View Slide

271. YOU ARE HERE.
     

     View Slide

272. Implementing “Up”
     navigation
     

     View Slide

273. (Coding goes here)
     (git checkout navigation_start)
     

     View Slide

274. git checkout navigation_end
     

     View Slide

275. Backing it with data
     

     View Slide

276. (Coding Exercise)
     (git checkout data_start)
     

     View Slide

277. git checkout data_end
     

     View Slide

278. Adding tab navigation
     

     View Slide

279. (Coding exercise)
     git checkout tabs_start
     

     View Slide

280. git checkout tabs_end
     

     View Slide

281. Themeing the app
     

     View Slide

282. Coding Exercise
     (git checkout theme_start)
     

     View Slide

283. git checkout theme_end
     

     View Slide

284. The End?
     

     View Slide

285. Problems!
     

     View Slide

286. “It’s too slow!”
     

     View Slide

287. View Slide

288. View Slide

289. View Slide

290. View Slide

291. View Slide

292. View Slide

293. a-ha!
     

     View Slide

294. git checkout make_faster
     

     View Slide

295. “I don’t know what’s on now.”
     

     View Slide

296. From This
     

     View Slide

297. To This...
     

     View Slide

298. ...Or This
     

     View Slide

299. git checkout navigation_refresh
     

     View Slide

300. “I want session reminders.”
     “I want to tweet sessions.”
     “I want abstracts from the website.”
     

     View Slide

301. git checkout talk_listing_update
     

     View Slide

302. Polish.
     

     View Slide

303. git checkout themeing_finished
     

     View Slide

304. Finished!
     http://lab.to/oscon2012apk
     

     View Slide

305. Bringing it together
     (We have a point to make)
     

     View Slide

306. Building apps
     people want to use
     Harder than you think.
     

     View Slide

307. People do not like phones.
     Because they’re generally unpleasant to use.
     

     View Slide

308. Mobile users hate
     being surprised.
     

     View Slide

309. Dialog boxes suck.
     

     View Slide

310. Dialog boxes suck.
     

     View Slide

311. Dialog boxes suck.
     Being modal also sucks.
     

     View Slide

312. Dialog boxes suck.
     Being modal also sucks.
     

     View Slide

313. A similar problem:
     deleting stuff
     

     View Slide

314. What should happen?
     

     View Slide

315. Option 1:
     Do nothing
     

     View Slide

316. Option 2:
     Pop a dialog box!
     

     View Slide

317. Option 3:
     Quietly indicate.
     

     View Slide

318. View Slide

319. View Slide

320. Be fast.
     We mentioned this before.
     http://lab.to/qQlVJW
     

     View Slide

321. Pretend to
     be fast.
     (If you’re not fast!)
     

     View Slide

322. Be responsive.
     

     View Slide

323. Lag equals death.
     

     View Slide

324. View Slide

325. View Slide

326. Most apps start uploading here
     

     View Slide

327. Instagram starts uploading here
     Most apps start uploading here
     

     View Slide

328. View Slide

329. Never drop data.
     

     View Slide

330. Expose yourself.
     

     View Slide

331. The device’s conditions change.
     A lot.
     

     View Slide

332. View Slide

333. Things that can change:
     Screen size
     Speed of CPU / GPU
     Available memory
     Storage space
     Network speed
     Everything
     ✔
     ✔
     ✔
     ✔
     ✔
     ✔
     

     View Slide

334. View Slide

335. Minimise your views
     Views are expensive!
     

     View Slide

336. Minimise your views
     Views are expensive!
     MEMORY PROBLEM
     

     View Slide

337. Think about first launch
     

     View Slide

338. Think about first launch
     

     View Slide

339. Your home activity
     Straightforward, aesthetic, consistent.
     

     View Slide

340. Think about the ecosystem
     It’s more than just your app.
     

     View Slide

341. It starts in the
     Marketplace.
     

     View Slide

342. *Slide stolen from Roman Nurik’s Google Developer Day 2010 presentation.
     

     View Slide

343. *Slide stolen from Roman Nurik’s Google Developer Day 2010 presentation.
     

     View Slide

344. View Slide

345. Where am I?
     

     View Slide

346. Where am I? What can I do?
     

     View Slide

347. Where am I? What can I do?
     What else can I do?
     

     View Slide

348. Constant collaboration
     between design and
     development
     

     View Slide

349. Style your app.
     Never port it.
     

     View Slide

350. View Slide

351. Beware the Port
     

     View Slide

352. Some iOS apps ported to
     Android and look bad.
     

     View Slide

353. View Slide

354. View Slide

355. View Slide

356. Start development early.
     

     View Slide

357. Mobile is the perfect storm
     

     View Slide

358. Greatest Strength?
     It runs on a whole bunch of devices.
     

     View Slide

359. Biggest Weakness?
     It runs on a whole bunch of devices.
     

     View Slide

360. Thanks for coming!
     

     View Slide

361. Important Things!
     •Give us feedback
     • http://spkr8.com/t/13641
     • http://lab.to/oscon2012
     •Office Hours: Android Development & Mobile UX
     • 10:40am Wednesday, near the O’Reilly Expo Booth.
     •Download the App!
     • http://lab.to/oscon2012apk
     

     View Slide

362. @thesecretlab
     

     View Slide