Awesome android design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Awesome android design

on

  • 472 views

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

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

Statistics

Views

Total Views
472
Views on SlideShare
463
Embed Views
9

Actions

Likes
1
Downloads
8
Comments
0

1 Embed 9

http://www.slideee.com 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Awesome android design Presentation 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 brand’s accent color android-holo-colors.com
  • 14. TOOLS ACTION BAR STYLE GENERATOR Generate Holo assets for the action bar and tabs, using your brand’s accent color actionbarstylegenerator.com
  • 15. Implementing Holo
  • 16. Themes res/values/styles.xml <style name="MyTheme" parent="android:Theme.Holo.Light"/> minSdkVersion 11+ <style name="MyTheme" parent="Theme.AppCompat.Light"/> res/values/styles.xml minSdkVersion 7–11 AndroidManifest.xml <application ... theme="@style/MyTheme"> 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) <View style="?android:foo" .../> <View android:minHeight="?android:bar" .../> <View android:background="?android:baz" .../> See android.R.attr for all style attributes
  • 18. Use the framework
  • 19. Use the framework <TextView style="?android:listSeparatorTextViewStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Section header" /> 2dp separator 14sp, bold, ALL CAPS
  • 20. Use the framework <TextView android:textAppearance= "?android:textAppearanceMedium" android:text="Sample item 1" ... /> <ImageButton style="?android:borderlessButtonStyle" ... /> 18sp Stateful background
  • 21. Use the framework <LinearLayout android:orientation="vertical" android:showDividers="middle" android:divider="?android:dividerHorizontal" ...> <LinearLayout android:orientation="horizontal" android:baselineAligned="false" android:showDividers="middle" android:divider="?android:dividerVertical" android:dividerPadding="8dp" ...> Padding creates hierarchy
  • 22. Use the framework <LinearLayout style="?android:buttonBarStyle" ...> <Button style="?android:buttonBarButtonStyle" ...> 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 <style name="MyTheme" parent="..."> <item name="android:actionBarStyle">@style/ActionBar</item> </style> Styled activity indicator <style name="Widget.ActionBar.ActivityIndicator" parent="..."> <item name="android:minWidth">48dp</item> <item name="android:maxWidth">48dp</item> <item name="android:minHeight">32dp</item> <item name="android:maxHeight">32dp</item> </style> <style name="ActionBar" parent="..."> <item name="android:indeterminateProgressStyle"> @style/Widget.ActionBar.ActivityIndicator</item> </style>
  • 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 <android.support.v4.widget.SlidingPaneLayout ... android:layout_width="match_parent" android:layout_height="match_parent"> <!-- First child is the left pane --> <fragment android:name="com.example.ListFragment" android:layout_width="280dp" android:layout_height="match_parent" android:layout_gravity="start" /> <!-- Second child is the right (content) pane --> <fragment android:name="com.example.DetailFragment" android:layout_width="600dp" android:layout_height="match_parent" android:layout_weight="1" /> </android.support.v4.widget.SlidingPaneLayout> If combined pane widths exceed screen width then right pane overlaps
  • 37. Lists and grids
  • 38. Lists and grids <GridView ... android:numColumns="@integer/num_columns" /> res/layout/activity_home.xml <resources> <integer name="num_columns">1</integer> </resources> res/values/integers.xml <resources> <integer name="num_columns">2</integer> </resources> 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 <dimen name="default_spacing_major">32dp</dimen> <dimen name="body_text_size">20sp</dimen> <dimen name="body_line_spacing" format="float" type="dimen">1.2</dimen> res/values-sw720dp/dimens.xml res/values/dimens.xml <dimen name="default_spacing_major">16dp</dimen> <dimen name="default_spacing_minor">8dp</dimen> <dimen name="default_spacing_micro">4dp</dimen> <dimen name="body_text_size">18sp</dimen> <dimen name="body_line_spacing" format="float" type="dimen">1.0</dimen>
  • 44. Maximum widths Avoid overly wide line lengths for comfortable reading Optimal measure is 45–75 chars per line
  • 45. Maximum widths MaxWidthLinearLayout http://goo.gl/zNY0jy <com.example.MaxWidthLinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="vertical">   <TextView app:layout_maxWidth="600dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/lorem_ipsum" ... /> </com.example.MaxWidthLinearLayout>
  • 46. Responsive images 1dp separator <ImageView android:scaleType="centerCrop" android:src="@drawable/bacon" android:layout_width="match_parent" android:layout_height="match_parent" />
  • 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 it’s 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