AnDevCon Boston 2016

1. A Practical Guide to Material Design Implementation Yash Prabhu @yashvprabhu github.com/yprabhu yprabhu.com dramafever.com
2. We’re hiring! www.jsco.re/8ns9
3. Slides https://goo.gl/17QNFZ Demo github.com/yprabhu/materialworld
4. Why? `````````````````` @yashvprabhu
5. What is Material Design? `````````````````` @yashvprabhu
6. Skeuomorphic vs. Flat vs. Material Design
7. Glossary ★ Screen Size ★ Screen density (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) ★ Orientation (landscape/portrait) ★ Resolution (physical pixel) ★ Density Independent Pixel (virtual pixel) px = dp * (dpi / 160)
8. Components Layout Animation Style @yashvprabhu
9. Style
10. Style Color
11. Style Color Theme
12. Style Color Theme Typography
13. Style Color Theme Typography Imagery
14. Color Primary 500 Primary Dark 700 Accent 500 https://www.google. com/design/spec/style/c olor.html
15. Theme Theme.Holo & Theme. AppCompat
16. How do I apply a theme? <style name="BaseStyle" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryDark">@color/color_primary_dark</item> <item name="colorAccent">@color/color_accent</item> <item name="android:windowBackground"> @color/window_background </item> </style> @yashvprabhu
17. Material Palette materialpalette.com
18. Material Palette
19. Color & Theme Theme.AppCompat compile "com.android. support:appcompat-v7: 24.1.1"
20. Typography Use scaled pixels (sp) Min 12sp
21. Custom Fonts Google Fonts fonts.google.com Chris Jenkins’ Calligraphy Library github. com/chrisjenx/Calligrap hy
22. Custom Fonts // Programmatically defining typefaces TextView tv=(TextView)findViewById(R.id.custom); Typeface face=Typeface.createFromAsset(getAssets(), "fonts/Verdana.ttf"); tv. setTypeface(face); // Using Chris Jenkins’ Calligraphy library <TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" fontPath="fonts/Verdana.ttf"/>
23. Imagery compile "com.android.support: palette-v7:24.1.1"
24. Imagery Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R. drawable.bulbasaur); if (myBitmap != null && !myBitmap.isRecycled()) { Palette.from(myBitmap).generate(paletteListener); }
25. Imagery continued.. Palette - Extracting colors from an image Palette.PaletteAsyncListener paletteListener = new Palette.PaletteAsyncListener(){ @Override public void onGenerated(Palette palette) { int defColor = 0x000000; int vibrant = palette.getVibrantColor(defColor); int vibrantLight = palette.getLightVibrantColor(defColor); int vibrantDark = palette.getDarkVibrantColor(defColor); int muted = palette.getMutedColor(defaultColor); int mutedLight = palette.getLightMutedColor(defaultColor); int mutedDark = palette.getDarkMutedColor(defaultColor); }}
26. Imagery continued.. Palette - Extracting colors from an image
27. Imagery - Raster vs Vector design.google.com/icons Raster Specific number of pixels Vector Uses math to draw shapes using points, lines and curves
28. Imagery - Adding Vector Assets
29. Imagery - Adding Vector Assets
30. Imagery - Scalable Vector Graphic <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:fillColor="#FF000000" android:pathData="M12,3c-4.97,0 -9,4.03 -9,9s4.03,9 9,9c0.83,0 1.5,-0.67 1.5,-1.5 0,-0.39 -0.15,-0.74 -0.39,-1.01 -0.23,-0.26 -0.38,-0.61 -0.38,-0.99 0,-0.83 0.67,-1.5 1.5,-1.5L16,16c2.76,0 5,-2.24 5,-5 0,-4.42 -4.03,-8 -9,-8zM6.5,12c- 0.83,0 -1.5,-0.67 -1.5,-1.5S5.67,9 6.5,9 8,9.67 8,10.5 7.33,12 6.5,12zM9.5,8C8.67,8 8,7.33 8,6.5S8.67,5 9.5,5s1.5,0.67 1.5,1.5S10.33,8 9.5,8zM14.5,8c-0.83,0 -1.5,-0.67 -1.5,-1.5S13.67,5 14.5,5s1.5,0.67 1.5,1.5S15.33,8 14.5,8zM17.5,12c- 0.83,0 -1.5,-0.67 -1.5,-1.5S16.67,9 17.5,9s1.5,0.67 1.5,1.5 -0.67,1.5 -1.5,1.5z"/> </vector>
31. Imagery - Adding Vector Assets <ImageView android:id="@+id/imageButton" android:src="@drawable/ic_color_lens_24dp" android:layout_width="wrap_content" android:layout_height="wrap_content" />
32. Layout
33. Layout Keylines & Grids
34. Layout Keylines & Grids Device Metrics
35. Layout Keylines & Grids Device Metrics Responsive UI
36. Layout Keylines & Grids Device Metrics Responsive UI Breakpoints
37. Keylines & Grids
38. Keyline Pushing app for design testing play.google. com/store/apps/details? id=com.faizmalkani. keylines
39. Device metrics design.google.com/devices
40. Responsive UI res/layout/main_activity.xml # For handsets res/layout-sw600dp/main_activity.xml # For tablets @yashvprabhu
41. Responsive UI res/layout/show_activity.xml res/layout-w1024dp/show_activity.xml
42. Breakpoints google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints
43. Animation
44. Animation Surface Reaction
45. Animation Surface Reaction Shadow
46. Ripples & Elevation Ripples (indicates touch input) ?android:attr/selectableItemBackground ?android:attr/selectableItemBackgroundBorderless android:colorControlHighlight Elevation (lifts to your touch) • Resting 2dp • Raised 8dp @yashvprabhu
47. Components
48. Components Button
49. Components Button FloatingActionButton
50. Components Button FloatingActionButton CardView
51. Components Button FloatingActionButton CardView RecyclerView
52. Components Button FloatingActionButton CardView RecyclerView Toolbar & Appbar
53. Components Button FloatingActionButton CardView RecyclerView Toolbar & Appbar CoordinatorLayout
54. Demo app github. com/yprabhu/materialw orld Forked from github. com/chrisbanes/cheeses quare @yashvprabhu
55. app/build.gradle compile "com.android.support:palette-v7:24.1.1" compile "com.android.support:design:24.1.1" compile "com.android.support:appcompat-v7:24.1.1" compile "com.android.support:recyclerview-v7:24.1.1" compile "com.android.support:cardview-v7:24.1.1" https://source.android.com/source/build-numbers.html
56. Button Flat Raised FloatingActionButton (FAB)
57. Button Demo
58. Post-21 (Lollipop) <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/bg_button_yellow_pressed"/> <item android:drawable="@drawable/bg_button_yellow_normal"/> </selector>
59. Pre-21 (Lollipop) workaround <?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:drawable="@drawable/bg_button_yellow_normal" /> </ripple>
60. Floating Action Button Default Elevation: 6 dp Normal size: 56 dp Mini size: 40 dp
61. FAB widget <android.support.design.widget.FloatingActionButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/ic_discuss" android:layout_margin="@dimen/fab_margin" android:clickable="true" app:fabSize="normal" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end" />
62. Cards - compile 'com.android.support:cardview-v7:24.1.1' Card resting elevation: 2dp Card raised elevation: 8dp @yashvprabhu
63. CardView <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/card_margin"> <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?android:selectableItemBackground"> <!-- API Level 11 --> ….. </LinearLayout> </android.support.v7.widget.CardView>
64. Lists & Grids - RecyclerView compile 'com.android.support: recyclerview-v7:24.1.1'
65. Under the hood Recycler View Layout Manager Adapter Dataset Item Animator
66. Add RecyclerView to your layout <android.support.v7.widget.RecyclerView android:id="@+id/my_recycler_view" android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent"/>
67. View Item <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center"> <ImageView android:id="@+id/avatar" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:src="@drawable/bulbasaur"/> <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" tools:textColor="@color/black" tools:text="Bulbasaur" tools:textAppearance="?attr/textAppearanceListItem"/>
68. Set LayoutManager & Adapter // Set either of these layout managers recyclerView.setLayoutManager(new LinearLayoutManager(context)); recyclerView.setLayoutManager(new GridLayoutManager(context, GRID_SPAN)); recyclerView.setLayoutManager(new StaggeredGridLayoutManager (STAGGERED_GRID_SPAN, StaggeredGridLayoutManager.VERTICAL)); // Set adapter on recycler view recyclerView.setAdapter(new GridRecyclerViewAdapter(activity);
69. Appbar, Toolbar, ActionBar?
70. Common Pattern
71. Common Pattern Coordinator Layout
72. Common Pattern - Coordinator Layout @yashvprabhu
73. Common Pattern CoordinatorLayout -- AppBarLayout -- Toolbar -- TabLayout -- ViewPager -- FloatingActionButton @yashvprabhu
74. Scrolling behaviors CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto" Toolbar app:layout_scrollFlags="scroll|enterAlways|snap" ViewPager app:layout_behavior="@string/appbar_scrolling_view_behavior" Resource: guides.codepath.com/android/Handling-Scrolls-with- CoordinatorLayout
75. Common Pattern
76. Common Pattern CoordinatorLayout -- AppBarLayout -- CollapsingToolbarLayout -- ImageView -- Toolbar -- NestedScrollView -- LinearLayout -- CardView -- Button -- FloatingActionButton @yashvprabhu
77. Scrolling behaviors CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto" CollapsingToolbarLayout app:layout_scrollFlags="scroll|exitUntilCollapsed" NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior" Resource: guides.codepath.com/android/Handling-Scrolls-with- CoordinatorLayout
78. Style Color Theme Typography Imagery Recap
79. Layout Keylines & Grids Device Metrics Responsive UI Breakpoints Recap
80. Animation Surface Reaction Shadow Recap
81. Components Button FloatingActionButton CardView RecyclerView Toolbar & Appbar CoordinatorLayout Recap
82. Resources Udacity - Material Design for Android Developers Android Developer Docs - Material Design Google Material Design Guidelines Material Doc Codepath Google IO 2016 Codelabs Plaid app by Nick Butcher MaterialWorld (Cheesesquare)
83. Image Credit Windows Phone - Flat design iOS Phone - Skeuomorphic design Android - Material Design PokemonDB Android Design Docs Android Developer docs
84. @yashvprabhu github.com/yprabhu/materialworld yprabhu.com dramafever.com We’re hiring! www.jsco.re/8ns9 Q&A Slides: https://goo.gl/17QNFZ