Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Secret Lab

July 17, 2012
Tweet

More Decks by Secret Lab

Other Decks in Programming

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