Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DroidCon NYC 2016 - A Material Design guide for Android developers

00bc3e6ec35c62fabef044e492070c29?s=47 Yash Prabhu
September 29, 2016

DroidCon NYC 2016 - A Material Design guide for Android developers

00bc3e6ec35c62fabef044e492070c29?s=128

Yash Prabhu

September 29, 2016
Tweet

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

  14. None
  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); }}
  24. None
  25. Imagery - Raster & Vector Specific number of pixels Uses

    math to draw shapes using points, lines and curves @yashvprabhu
  26. Imagery - Adding Vector assets

  27. None
  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

  54. None
  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