Your SlideShare is downloading. ×
[Android] Android UI Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

[Android] Android UI Design

1,030
views

Published on

1. Do’s and don’ts …

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,030
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Android Programming Lesson 4Android UI Design NGUYEN The Linh
  • 2. Android ProgrammingContents 1 Do’s and don’ts 2 Design Principles 3 Design Considerations 4 Exercise 4 2
  • 3. Android ProgrammingDesign Principles Do’s and don’ts 3
  • 4. Android ProgrammingDo’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 ProgrammingDo’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 ProgrammingDo’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 ProgrammingDesign Principles Design Principles 7
  • 8. Android ProgrammingDesign 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 ProgrammingDesign 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 ProgrammingDesign 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 ProgrammingDesign Principles Physical screen size Screen density 11
  • 12. Android ProgrammingDesign 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 ProgrammingDesign Principles Design Considerations 13
  • 14. Android ProgrammingDesign 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 ProgrammingDesign Considerations Draw 9-patch  The Draw 9-patch tool allows you to easily create a NinePatch graphic using a WYSIWYG editor. 15
  • 16. Android ProgrammingDesign 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 ProgrammingDesign Considerations Example 4.1  9-patch 17
  • 18. Android ProgrammingDesign Considerations Bitmap Drawable  drawable/bitmap_background.xml  http://subtlepatterns.com/ 18
  • 19. Android ProgrammingDesign Considerations Example 4.2  Bitmap Drawable 19
  • 20. Android ProgrammingDesign Considerations Shape Drawable  drawable/shape_background.xml 20
  • 21. Android ProgrammingDesign Considerations Example 4.3  Shape Drawable 21
  • 22. Android ProgrammingDesign Considerations State List Drawable  drawable/state_list_background.xml 22
  • 23. Android ProgrammingDesign Considerations Example 4.4  State List Drawable 23
  • 24. Android ProgrammingDesign Considerations Style  values/styles.xml 24
  • 25. Android ProgrammingExercise 4 25
  • 26. Android Programming