The document discusses the Android interface and how to design responsive Android apps. It covers the main screens of Android like the home screen and recent apps screen. It also discusses the app bar, navigation patterns, view collections, colors and animations that make up the Android design language. The document emphasizes designing for different screen densities and using density-independent pixels. It concludes with tips like using touch feedback, avoiding splash screens, utilizing empty states and following material design patterns and resources.

2. 1. Android Interface
2. Responsive
3. Tips

3. 1. Android Interface

4. 1. Android Interface
HOME SCREEN ALL APPS SCREEN RECENTS SCREEEN

5. HOME SCREEN ALL APPS SCREEN RECENTS SCREEEN

6. Status Bar
Navigation Bar

7. Android Application Layout

8. Everything you see resides on a paper

9. Everything you see resides on a paper
meet
MATERIAL
DESIGN

11. The material on which ink is drawn.
Every pixel drawn by an app on a piece of paper

12. The material on which ink is drawn.

13. Every pixel drawn by an app on a piece of paper
A very good afternoon to
you

14. UI Patterns
That make up an Android interface

15. App Bar
or
Action bar
or
Toolbar
Action buttons
App bar
A bar that provides:
• Information of where you are
• Important actions
• Relevant cues of the activity you are
in

16.  Doesn’t have an app icon
Use color and
typography to
reflect your
brand

17.  Can be 2-3 times than the standard
height

18.  Can be transparent in some cases

19.  App bar keylines
http://www.google.com/design/spec/layout/metrics-keylines.html

20.  App bar can hide or show up on
scrolling down and up respectively

21. Previously, Action Bar was only limited to this

22. Now, there’s a lot more you can do with the Action Bar or the App bar

23. Navigation
Ways to get around your app

24. Navigation
• Navigation spinner (View control)

25. Navigation
• Tabs

26. Navigation
• Navigation Drawer

27. View Collections
Displaying multiple contents

28. View Collections
• Lists

29. View Collections
• Cards

30. Bold Colors
That make up an Android interface

31. Primary Color &
Accent Color
Primary Color
Accent Color

32. Content can provide color!
Meet Palette

34. Palette lets you extract
6 colors

35. DARK VIBRANT
This is a body text
Palette also lets you extract
Colors for
Title and
Body
Dark Vibrant
Title color generated
from Dark Vibrant
Body text color
generated from Dark
Vibrant

36. and hence,
You can
do this

37. Animations
That make up your app experience

41. FAB
Floating Action Button
The primary action of your app
+

43. 1. Android Interface
HOME SCREEN ALL APPS SCREEN RECENTS SCREEEN

44. 2. Responsive

45. 2. Responsive

46. DEVICES
DEVICES
DEVICES

47. DESIGN
AS YOU’D DO IT FOR A RESPONSIVE WEBSITE

48. DESIGN
AS YOU’D DO IT FOR MULTIPLE
SCREEN DENSITIES

49. SCREEN DENSITY
The number of pixels in a physical area of a screen.
measured as …
DPI

50. SCREEN DENSITY
The number of pixels in a physical area of a screen.
measured as …
DPI
mdpi hdpi xhdpi
xxhdpi xxxhdpi tvdpi

51. SHOULD I
CARE?

52. Well, you must
deliver images for
each of these guys!
mdpi hdpi xhdpi
xxhdpi xxxhdpi tvdpi

53. A 48 px icon made for mdpi
screen would look distorted in a
screen with higher screen density.

54. Meet DP
Density-Independent Pixel

55. Design targeting an mdpi screen.
For mdpi screens,
1dp = 1px

56. For other screens,
xdp=xpx*(dpi/160)

57. Ie. For an hdpi screen, a 48dp icon means
48dp=48px*(240/160)
48dp=72px

58. 48dp=72px
48px
72px
96px
144px
192px
mdpi hdpi xhdpi xxhdpi xxxdpi

59. 48dp=72px
mdpi hdpi xhdpi xxhdpi xxxdpi
48dp 48dp 48dp 48dp 48dp

60. 48dp=72px
2. Responsive
48px
72px
96px
144px
192px
mdpi hdpi xhdpi xxhdpi xxxdpi
48dp 48pdp 48dp 48dp 48dp

61. 3. Tips

62. Touch
Feedback
3. Tips

63. Touch
Feedback

64. Avoid
Splash
Screens
Get to content
directly

65. Avoid
Splash
Screens
Get to content
directly

66. Utilize
Empty
States
Invite users to take
action on your app’s
primary function in
empty state screens
Or provide
necessary
information.

67. Utilize
Empty
States
Invite users to take
action on your app’s
primary function in
empty state screens
Or provide
necessary
information.

68. Resources

69. Follow
(Material)
Design
Patterns
http://www.google.com/design/spec/material-design/introduction.html

70. Android
App
Design
Showcase
http://androidniceties.tumblr.com/

71. YouTube
Android
Developers
Channel
http://www.youtube.com/user/androiddevelopers

72. Roman
Nurik
https://plus.google.com/+RomanNurik/posts

73. Nick
Butcher
https://plus.google.com/+NickButcher/posts

74. Matias
Duarte
https://plus.google.com/+MatiasDuarte/posts

75. Matias
Duarte
https://plus.google.com/+NickButcher/posts
3. Tips

76. Follow the user
And all else will follow