DroidCon NYC 2016 - A Material Design guide for Android developers

Talk given at DroidCon NYC 2016 https://t.co/kHSXaG3uKp
Demo: https://github.com/yprabhu/materialworld

Transcript

1. A Material Design Guide for Android Developers Yash Prabhu @yashvprabhu github.com/yprabhu dramafever.com
2. Why?
3. What is Material Design?
4. Skeuomorphism Flat Material @yashvprabhu
5. Terminology Screen Size - small, normal, large, xlarge Screen density - ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi Orientation - landscape/portrait Resolution - physical pixel Density Independent Pixel - virtual pixel px = dp * (dpi / 160) Example: 240 dp screen, 1 dp = 1.5 px
6. Style Layout Animation Components Patterns
7. Style
8. Color
9. Color Theme
10. Color Theme Typography
11. Color Theme Typography Imagery
12. Color Primary 500 Primary Dark 700 Accent 500 https://material.google.com/style/color .html
13. Material Palette materialpalette.com
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>
17. Color & Theme Theme.AppCompat compile "com.android.support:appcompat-v7:2 4.2.1" http://developer.android.com/training/ material/theme.html#StatusBar @yashvprabhu
18. Typography Use scaled pixels (sp) Min 12sp
19. Custom Fonts Google Fonts fonts.google.com Chris Jenkins’ Calligraphy Library github.com/chrisjenx/Calligraphy @yashvprabhu
20. 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"/>
21. Imagery - Palette API For extracting colors from an image compile "com.android.support:palette-v7:24.2.1" @yashvprabhu
22. Palette API Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.chicago); if (myBitmap != null && !myBitmap.isRecycled()) { Palette.from(myBitmap).generate(paletteListener); }
23. Palette API 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); }}
25. Imagery - Raster & Vector Specific number of pixels Uses math to draw shapes using points, lines and curves @yashvprabhu
26. Imagery - Adding Vector assets
28. Imagery - Scalable Vector Graphic (svg) <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,..."/> </vector>
29. 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" />
30. Layout
31. Keylines & Grids
32. Keylines & Grids Device Metrics
33. Keylines & Grids Device Metrics Responsive UI
34. Keylines & Grids Device Metrics Responsive UI Breakpoints
35. Keylines & Grids 8dp baseline grid 4dp typography grid
36. Design Testing apps Keyline Pushing Material Cue @yashvprabhu
37. Device metrics design.google.com/devices
38. Responsive UI res/layout/main_activity.xml # For handsets res/layout-sw600dp/main_activity.xml # For tablets
39. Responsive UI layout-w1024dp/show_activity.xml
40. Breakpoints @yashvprabhu
41. Animation
42. Surface Reaction
43. Surface Reaction Shadow
44. Surface Reaction Ripples (indicates touch input) ?android:attr/selectableItemBackground ?android:attr/selectableItemBackgroundBor derless android:colorControlHighlight
45. Shadow Elevation (lifts to your touch) • Resting 2dp • Raised 8dp
46. Components
47. Button
48. Button Card
49. Button Card Grid & List
50. Button Card Grid & List Snackbar
51. Demo github.com/yprabhu/materialworld Forked from github.com/chrisbanes/cheesesquare @yashvprabhu
52. app/build.gradle compile "com.android.support:palette-v7:24.2.1" compile "com.android.support:design:24.2.1" compile "com.android.support:appcompat-v7:24.2.1" compile "com.android.support:recyclerview-v7:24.2.1" compile "com.android.support:cardview-v7:24.2.1"
53. Buttons Flat Raised FAB
55. 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>
56. 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>
57. FloatingActionButton (FAB) Default Elevation: 6 dp Normal size: 56 dp, Mini size: 40 dp
58. 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" />
59. Card compile 'com.android.support:cardview-v7:24.2.1' Resting elevation: 2dp Raised elevation: 8dp
60. 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> @yashvprabhu
61. Lists & Grids compile 'com.android.support:recyclerview-v7:24.2.1'
62. RecyclerView - Under the hood Recycler View Layout Manager Adapter Dataset Item Animator @yashvprabhu
63. 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"/>
64. Add RecyclerView 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/newyork"/> <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" tools:textAppearance= "?attr/textAppearanceListItem"/>
65. 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);
66. Snackbar • Swipeable, can have actions • Single-line snackbar height: 48dp • Multi-line snackbar height: 80dp • Text: Roboto Regular 14sp • Action button: Roboto Med 14sp, all-caps • Default background fill: #323232 100%
67. Snackbar Snackbar.make(view, "Archived", Snackbar.LENGTH_SHORT) .setAction(R.string.undo_string, new UndoListener()); .show();
68. Patterns
69. @yashvprabhu
70. Appbar, Toolbar, ActionBar? @yashvprabhu
71. Appbar, Toolbar, ActionBar? @yashvprabhu
72. Common Pattern: Tabs @yashvprabhu
73. CoordinatorLayout AppBarLayout ToolBarLayout 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" @yashvprabhu
75. Common Pattern: Flexible space with image @yashvprabhu
76. Coordinator Layout AppBarLayout CollapsingToolbarLayout NestedScrollView FloatingActionButton ImageView Toolbar LinearLayout CardView Button @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" @yashvprabhu
78. Style Layout Animation Components Patterns
79. Image Credit Windows Phone - Flat design iOS Phone - Skeuomorphic design Android - Material Design Android Design Docs Android Developer docs City images @yashvprabhu
80. Resources Udacity - Material Design for Android Developers Android Developer Docs - Material Design Google Material Design Guidelines Plaid app by Nick Butcher MaterialWorld (Cheesesquare by Chris Banes) Tutorials: Material Doc, Codepath, Google IO 2016 Codelabs @yashvprabhu
81. A Practical Guide to Material Design Implementation Yash Prabhu @yashvprabhu github.com/yprabhu dramafever.com We’re hiring! www.jsco.re/8ns9