1. Do’s and don’ts 2. Design Principles 2.1 Focus on the user 2.2 Make the right things visible 2.3 Show proper feedback 2.4 Physical screen size 2.5 Screen density 2.6 Portrait & landscape orientations 2.7 Primary UI interaction method 2.8 Soft & physical keyboard 3. Design Considerations 3.1 Resources 3.2 Draw 9-patch 4. Exercise 4 4.1 Example 4.1 4.2 Bitmap Drawable 4.3 Example 4.2 4.4 Shape Drawable 4.5 Example 4.3 4.6 State List Drawable 4.7 Example 4.4 4.8 Style

1. Android Programming
Lesson 4
Android UI Design
NGUYEN The Linh

2. Android Programming
Contents
1 Do’s and don’ts
2 Design Principles
3 Design Considerations
4 Exercise 4
2

3. Android Programming
Design Principles
Do’s and don’ts
3

4. Android Programming
Do’s and Don’ts
 DON’T simply port your UI from other platforms
 DON’T overuse modal progress & confirmation dialogs
 DON’T create rigid, absolute-positioned layouts
 DON’T use px units, use dp (or sp for text)
 DON’T use small font sizes
4

5. Android Programming
Do’s and Don’ts
 DO create versions of all resources for high density
screens
 DO make large, obvious tap targets (buttons, list
items)
 DO follow Android icon guidelines
5

6. Android Programming
Do’s and Don’ts
 DO use proper margins and padding
 DO properly handle orientation changes
 DO use theme/style, dimension, color resources to
reduce redundancy
6

7. Android Programming
Design Principles
Design Principles
7

8. Android Programming
Design Principles
 Focus on the user
 Know your users
• Age, skill level, culture, disabilities, cont.
• What they want to do with your app
• What kinds of devices they’ll be using
• Where/when/how they’ll be using their devices
 Design with a ‘user-first’ mentality
 Test on real users, early and often
8

9. Android Programming
Design Principles
 Make the right things visible
 The most common operations should be immediately visible and
available
 Secondary functionality can be reserved for the MENU button
9

10. Android Programming
Design Principles
 Show proper feedback
 Have at least 4 states (<selector>) for all interactive UI elements:
If something is clickable, make sure it looks clickable!
 Make sure the effects of an action are clear and visible
 Show adequate yet unobtrusive progress indicators
10

11. Android Programming
Design Principles
 Physical screen size
 Screen density
11

12. Android Programming
Design Principles
 Portrait & landscape orientations
 Primary UI interaction method
 Touch screen
 D-pad/trackball
 Soft & physical keyboard
 Awareness about the ways in which devices can vary
is very important
12

13. Android Programming
Design Principles
Design Considerations
13

14. Android Programming
Design Considerations
 Resources
 One .apk contains all resources
 System chooses at runtime which
resources to use
http://developer.android.com/
guide/topics/resources/
providing-resources.html
14

15. Android Programming
Design Considerations
 Draw 9-patch
 The Draw 9-patch tool allows
you to easily create
a NinePatch graphic using a
WYSIWYG editor.
15

16. Android Programming
Design Considerations
 Draw 9-patch
 From a terminal, launch the draw9patch application from your
SDK /tools directory.
 Drag your PNG image into the Draw 9-patch window
(or File >Open 9-patch... to locate the file).
 Click within the 1-pixel perimeter to draw the lines that define the
stretchable patches and (optional) content area.
 When done, select File > Save 9-patch...
16

17. Android Programming
Design Considerations
 Example 4.1
 9-patch
17

18. Android Programming
Design Considerations
 Bitmap Drawable
 drawable/bitmap_background.xml
 http://subtlepatterns.com/
18

19. Android Programming
Design Considerations
 Example 4.2
 Bitmap Drawable
19

20. Android Programming
Design Considerations
 Shape Drawable
 drawable/shape_background.xml
20

21. Android Programming
Design Considerations
 Example 4.3
 Shape Drawable
21

22. Android Programming
Design Considerations
 State List Drawable
 drawable/state_list_background.xml
22

23. Android Programming
Design Considerations
 Example 4.4
 State List Drawable
23

24. Android Programming
Design Considerations
 Style
 values/styles.xml
24

25. Android Programming
Exercise 4
25

26. Android Programming