AnDevCon Boston 2016

AnDevCon Boston 2016

00bc3e6ec35c62fabef044e492070c29?s=128

Yash Prabhu

August 03, 2016
Tweet

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