Awesome android design

download

of 56

  • date post

    15-Jan-2015
  • Category

    Mobile
  • view

    691
  • download

    0

Embed Size (px)

description

This slide is packed full of important information from beginner to experienced Android designers and developers!

transcript

  • 1. AWESOME ANDROID DESIGN +Android Developers Nick Butcher

2. Awesome Android Design HOLO VISUAL LANGUAGE TECHNIQUES RESPONSIVE DESIGN TOOLS WHY IMPLEMENTING 3. Holo Visual Language 4. Holo Visual Language 5. Content First 6. Content First Borderless buttons Button bar 7. Typography Hello, Roboto Roboto Thin & Thin Oblique Roboto Light & Light Oblique Roboto Regular & Regular Oblique Roboto Medium & Medium Oblique Roboto Bold & Bold Oblique Roboto Black & Black Oblique Roboto Condensed & Condensed Oblique Roboto Bold Condensed Bold Condensed Oblique 8. USE TYPOGRAPHY to provide STRUCTURE and emphasis 9. Colour Holo != #33b5e5 10. Colour Use your brand colour for accent Use high-contrast colour for emphasis 11. Colour Touch feedback Jolt of high contrast Sprinkles of encouragement Holo Light: 20% #999 (#33999999) Holo Dark: 25% #ccc (#40cccccc) 12. Branding Information Design Interaction Design Visual Design Holo/AndroidYou 13. TOOLS ANDROID HOLO COLORS Generate Holo assets for UI controls, using your brands accent color android-holo-colors.com 14. TOOLS ACTION BAR STYLE GENERATOR Generate Holo assets for the action bar and tabs, using your brands accent color actionbarstylegenerator.com 15. Implementing Holo 16. Themes res/values/styles.xml minSdkVersion 11+ res/values/styles.xml minSdkVersion 711 AndroidManifest.xml Inherit from Holo styles 17. Use the framework Reference styles, dimensions and drawables from the current theme Current theme value (eqivilant to ?android:attr/baz) See android.R.attr for all style attributes 18. Use the framework 19. Use the framework 2dp separator 14sp, bold, ALL CAPS 20. Use the framework 18sp Stateful background 21. Use the framework Padding creates hierarchy 22. Use the framework Stateful background Adds dividers 23. Style the framework requestWindowFeature( Window.FEATURE_INDETERMINATE_PROGRESS); setContentView(R.layout.activity_main); ... setProgressBarIndeterminateVisibility(true); MainActivity#onCreate Activity indicator 24. Style the framework Styled activity indicator 25. Query theme values Control inset by Action Bar height 26. Query theme values TypedValue value = new TypedValue(); getActivity().getTheme().resolveAttribute( android.R.attr.actionBarSize, value, true); int actionBarSize = getResources() .getDimensionPixelSize(value.resourceId); // now inset the map control getMap().setPadding(0, actionBarSize, 0, 0); 27. Responsive Design 28. Why responsive? 29. Why responsive? 30. Combining content 31. Combining content res/ ... layout/ activity_home.xml activity_details.xml fragment_list.xml fragment_details.xml layout-sw720dp/ activity_home.xml ... 32. Combining content res/ ... layout/ activity_home.xml activity_details.xml fragment_list.xml fragment_details.xml layout-sw720dp/ activity_home.xml ... 33. Combining content res/ ... layout/ activity_home.xml activity_details.xml fragment_list.xml fragment_details.xml layout-sw720dp/ activity_home.xml ... 34. Combining content res/ ... layout/ activity_home.xml activity_details.xml fragment_list.xml fragment_details.xml layout-sw720dp/ activity_home.xml ... 35. Combining content SlidingPaneLayout 36. Combining content SlidingPaneLayout If combined pane widths exceed screen width then right pane overlaps 37. Lists and grids 38. Lists and grids res/layout/activity_home.xml 1 res/values/integers.xml 2 res/values-w500dp/integers.xml 39. Lists and grids MyAdapter#getView if (convertView == null) { int numColumns = getResources().getInteger(R.integer.num_columns); if (numColumns == 1) { convertView = inflater.inflate(R.layout.list_item_layout, parent, false); } else { convertView = inflater.inflate(R.layout.grid_item_layout, parent, false); } } ... 40. Staggered grid https://github.com/etsy/ AndroidStaggeredGrid 41. Inside out design 42. Inside out design Going Responsive with Google Play http://goo.gl/ceytgQ 43. Extract dimensions headline_text_size body_text_size default_spacing_major body_line_spacing 32dp20sp1.2 res/values-sw720dp/dimens.xml res/values/dimens.xml 16dp8dp4dp18sp1.0 44. Maximum widths Avoid overly wide line lengths for comfortable reading Optimal measure is 4575 chars per line 45. Maximum widths MaxWidthLinearLayout http://goo.gl/zNY0jy 46. Responsive images 1dp separator 47. res/ ... drawable/ drawable-xhdpi/ layout/ layout-w600dp/ layout-sw600dp-land/ layout-sw720dp/ values/ values-sw600dp/ values-sw720dp/ ... Alternate density drawables for crispness Alternate layouts for different sized displays Alternate dimensions for different sized displays Use the resources framework 48. Tips for designers 49. 1 Use an Android phone and learn its patterns 50. 2 Map your information design to android navigation patterns 51. 3 Know your pixels from your DIPs http://youtu.be/zhszwkcay2A 52. 4 Design layout at MDPI i.e. 1px = 1dp 53. 5 Consider scalefrom the start 54. Awesome Android Design HOLO VISUAL LANGUAGE TECHNIQUES RESPONSIVE DESIGN TOOLS WHY IMPLEMENTING 55. Thanks! +Android Developers Nick Butcher