AnDevCon Boston 2016

Transcript

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