Your SlideShare is downloading. ×
0
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Android Talks #3 Android Design Best Practices - for Designers and Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Android Talks #3 Android Design Best Practices - for Designers and Developers

641

Published on

The goal of the presentation is to improve the level of cooperation between designers and developers. Designers will get a look at how the layout designing process for Android works. In turn, …

The goal of the presentation is to improve the level of cooperation between designers and developers. Designers will get a look at how the layout designing process for Android works. In turn, developers will learn best practices to better handle design changes and improve code quality.

We've discussed the presentation in advance with both developers and designers, to pinpoint the topics that are of real interest to both parties.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
641
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
5
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 Talks #3 Android Design Best Practices - for Designers and Developers Marko Vitas
  • 2. Scope • Motivation! • Supporting multiple screen sizes! • Smart & flexible design approach ! • Custom components
  • 3. Motivation • Tired of not knowing what dpi, dp and sp mean?! • Having nightmares of “little” design changes that affect the whole app? (fonts? styles? themes?) ! • Designers and developers, lets make each others life better.! • Lets define a standard
  • 4. Supporting Multiple Screen Sizes
  • 5. How Do Designers Prepare Materials? • Vector graphics ! • Scale up/down! • Exporting graphics for different screen densities! • What does all of this mean for Android?
  • 6. dpi • screen density = horizontal width (resolution in px) / actual physical size in inches! • dpi (dots per inch) i.e. ppi (pixels per inch)! • density buckets: 120,160, 240, 320, 480, 640 
 3 : 4 : 6 : 8 : 12 : 16! • tvdpi 213dpi
  • 7. dp • A virtual pixel unit ! • Use when defining UI layout, to express layout dimensions or position in a density-independent way.! • pixels = dps * (density / 160)! • Designers use the baseline (mdpi) density ! • Developers use the exported screens and calculate the width & height in pixels which map directly to dp
  • 8. sp (I) • dp has constant ratio transition dp = px * ratio.! • sp = px * ratio * scale.! • sp = dp * scale! • Accessibility purpose! • User system settings in display —> fonts
  • 9. sp (II)
  • 10. dpi / dp / sp
  • 11. Smart & Flexible Design Approach
  • 12. Layout Types (I) Linear
  • 13. Layout Types (II) - Relative
  • 14. Drawables • Animation drawable! • Transition drawable! • Level list drawable! • Selector drawable ! • Graphic! • 9Patch
  • 15. 9patch • Left & top to define stretchable area! • Bottom & right content area • Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area.
  • 16. • Examples of android:scaleType attribute. Top row (l-r) center, centerCrop, centerInside. Bottom row (l-r): fitCenter, fitStart, fitEnd, fitXY.
  • 17. Styles • Inheritance
  • 18. Attributes • You can define attributes in the top <resources> element or inside of a <declare-styleable> element. Note, all attributes share the same global namespace.
  • 19. Themes • Inheritance! • Watch out for API level! • Define themes in values, values-v11, values-v14! • Check out Sherlock themes
  • 20. Dimen • Dimen values are useful to define ! • Bool! • Color! • Dimension - dp/sp/pt/px/mm/in! • ID! • Integer! • Integer Array! • Typed Array
  • 21. Project Resource Structure (I) • Drawable-hpdi…! • Layout-hdpi…, ! • Layout-port and layout-land! • Values-hdpi…! • Concatenating configurations - layout-sw600dp-land! • Layout-sw600dp - declaring tablet layouts in reference
  • 22. Project Resource Structure (II)
  • 23. Project Resource Structure (III)
  • 24. Fonts • Static init in onCreate in Application class! ! ! ! !
  • 25. Custom components
  • 26. Custom View
  • 27. Custom Sexy Component
  • 28. Canvas And Custom Components
  • 29. Developer Options
  • 30. Conclusion (I) • New rule: in exported screens 1px equals 1dp. Our designers are designing for 160 dpi screens, which is the baseline for density for the Android OS! • Use Preview to calculate distances between objects in the layout! • Develop the app taking into consideration that a font could change! • Use styles! • Use attributes in order to be able to switch styles in themes and add custom data to your views
  • 31. Conclusion (II) • Standardise frequently used component’s dimensions! • Example: list items, dashboard items, specific screen dimensions like Settings screen, Drawer menu items etc.! • Create custom styles and views for these components! • Use wisely
  • 32. References (|) • http://android-holo-colors.com/! • http://coh.io/adpi/! • http://blog.edwinevans.me/?p=131! • http://developer.android.com/training/basics/supportingdevices/screens.html! • http://blog.edwinevans.me/?p=131! • https://developer.android.com/training/displaying-bitmaps/ manage-memory.html
  • 33. References (||) • Holo-colors plugin —> https://github.com/jeromevdl/android-holo-colorsidea-plugin! • http://android-holo-colors.com/! • ImageView —> http://www.peachpit.com/articles/article.aspx? p=1846580&seqNum=2! • http://developer.android.com/guide/practices/ screens_support.html#DeclaringTabletLayouts! • http://developer.android.com/design/patterns/settings.html! • http://developer.android.com/guide/topics/resources/providingresources.html
  • 34. ? Marko Vitas, @vitongs

×