Practical Guide to Material Design implementation 360|AnDev Denver, July 2016

Practical Guide to Material Design implementation 360|AnDev Denver, July 2016

Talk given at 360|AnDev Denver and AnDevCon Boston 2016.
Example used is https://github.com/yprabhu/materialworld which was forked from https://github.com/chrisbanes/cheesesquare

00bc3e6ec35c62fabef044e492070c29?s=128

Yash Prabhu

July 28, 2016
Tweet

Transcript

  1. A Practical Guide to Material Design Implementation Yash Prabhu @yashvprabhu

    #360andev github.com/yprabhu yprabhu.com dramafever.com
  2. Why? @yashvprabhu #360andev

  3. What is Material Design? @yashvprabhu #360andev

  4. Skeuomorphic vs. Flat vs. Material Design

  5. Components Layout Animation Style @yashvprabhu #360andev

  6. Style Color Theme Typography Imagery

  7. Color Primary 500 Primary Dark 700 Accent 500 https://www.google. com/design/spec/style/c

    olor.html
  8. Theme Theme.Holo & Theme. AppCompat

  9. 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 #360andev
  10. Mat erial Palette materialpalette.com

  11. Material Palette

  12. Color & Theme Theme.AppCompat compile "com.android. support:appcompat-v7: 24.1.1"

  13. Typography Use scaled pixels (sp) Min 12sp fonts.google.com

  14. Imagery compile "com.android. support:palette-v7: 24.1.1"

  15. Imagery Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R. drawable.bulbasaur); if (myBitmap !=

    null && !myBitmap.isRecycled()) { Palette.from(myBitmap).generate(paletteListener); }
  16. 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); ... }};
  17. Style Color Theme Typography Imagery Recap

  18. Layout Keylines & Grids Device Metrics Responsive UI Breakpoints

  19. Keylines & Grids

  20. Keyline Pushing app for design testing play.google. com/store/apps/details? id=com.faizmalkani. keylines

  21. Device metrics design.google.com/devices

  22. Responsive UI res/layout/main_activity.xml # For handsets res/layout-sw600dp/main_activity.xml # For tablets

    @yashvprabhu #360andev
  23. Responsive UI res/layout/show_activity.xml res/layout-w1024dp/show_activity.xml

  24. Breakpoints google.com/design/spec/layout/responsive-ui.html#responsive-ui-breakpoints

  25. Layout Keylines & Grids Device Metrics Responsive UI Breakpoints Recap

  26. Animation Surface Reaction Shadow

  27. Ripples & Elevation Ripples (indicates touch input) ?android:attr/selectableItemBackground ?android:attr/selectableItemBackgroundBorderless android:colorControlHighlight

    Elevation (lifts to your touch) • Resting 2dp • Raised 8dp @yashvprabhu #360andev
  28. Animation Surface Reaction Shadow Recap

  29. Components Button FloatingActionButton CardView RecyclerView Toolbar & Appbar CoordinatorLayout

  30. Demo app github. com/yprabhu/materialw orld Forked from github. com/chrisbanes/cheeses quare

    @yashvprabhu #360andev
  31. 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
  32. Button Flat Raised FloatingActionButton (FAB)

  33. Button Demo

  34. 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>
  35. 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>
  36. Floating Action Button Default Elevation: 6 dp

  37. 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:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end"

    />
  38. Cards Card resting elevation: 2dp Card raised elevation: 8dp @yashvprabhu

    #360andev
  39. 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>
  40. Lists & Grids - RecyclerView compile 'com.android. support:appcompat-v7: 24.1.1' compile

    'com.android. support:recyclerview-v7: 24.1.1'
  41. Under the hood Recycler View Layout Manager Adapter Dataset Item

    Animator
  42. 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"/>

  43. 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"/>
  44. Appbar, Toolbar, ActionBar?

  45. Common Pattern

  46. Common Pattern CoordinatorLayout -- AppBarLayout -- Toolbar -- TabLayout --

    ViewPager -- FloatingActionButton @yashvprabhu #360andev
  47. 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:https://guides.codepath.com/android/Handling-Scrolls-with- CoordinatorLayout

  48. Common Pattern

  49. Common Pattern CoordinatorLayout -- AppBarLayout -- CollapsingToolbarLayout -- ImageView --

    Toolbar -- NestedScrollView -- LinearLayout -- CardView -- Button -- FloatingActionButton @yashvprabhu #360andev
  50. 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" guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout

  51. Components Button FloatingActionButton CardView RecyclerView Toolbar & Appbar CoordinatorLayout Recap

  52. Resources Udacity - Material Design for Android Developers Android Developer

    Docs - Material Design Google Material Design Guidelines Material Doc Codepath Plaid app by Nick Butcher MaterialWorld (Cheesesquare)
  53. Image Credit Windows Phone - Flat design iOS Phone -

    Skeuomorphic design Android - Material Design PokemonDB design.google.com Android developer docs
  54. @yashvprabhu #360andev github.com/yprabhu yprabhu.com dramafever.com We’re hiring! www.jsco.re/8ns9 Q&A