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

Transcript

1. A Practical Guide to Material
   Design Implementation
   Yash Prabhu
   @yashvprabhu #360andev
   github.com/yprabhu
   yprabhu.com
   dramafever.com
   

   View Slide

2. Why?
   @yashvprabhu #360andev
   

   View Slide

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

   View Slide

4. Skeuomorphic vs. Flat vs. Material Design
   

   View Slide

5. Components
   Layout
   Animation
   Style
   @yashvprabhu #360andev
   

   View Slide

6. Style
   Color
   Theme
   Typography
   Imagery
   

   View Slide

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

   View Slide

8. Theme
   Theme.Holo & Theme.
   AppCompat
   

   View Slide

9. How do I apply a theme?
   <br/><item name="colorPrimary">@color/color_primary</item><br/><item name="colorPrimaryDark">@color/color_primary_dark</item><br/><item name="colorAccent">@color/color_accent</item><br/><item name="android:windowBackground"><br/>@color/window_background </item><br/>
   @yashvprabhu #360andev
   

   View Slide

10. Mat
    erial Palette
    materialpalette.com
    

    View Slide

11. Material Palette
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. Imagery
    Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.
    drawable.bulbasaur);
    if (myBitmap != null && !myBitmap.isRecycled()) {
    Palette.from(myBitmap).generate(paletteListener);
    }
    

    View Slide

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);
    ...
    }};
    

    View Slide

17. Style
    Color
    Theme
    Typography
    Imagery
    Recap
    

    View Slide

18. Layout
    Keylines & Grids
    Device Metrics
    Responsive UI
    Breakpoints
    

    View Slide

19. Keylines & Grids
    

    View Slide

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

    View Slide

21. Device metrics design.google.com/devices
    

    View Slide

22. Responsive UI
    res/layout/main_activity.xml # For handsets
    res/layout-sw600dp/main_activity.xml # For tablets
    @yashvprabhu #360andev
    

    View Slide

23. Responsive UI
    res/layout/show_activity.xml
    res/layout-w1024dp/show_activity.xml
    

    View Slide

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

    View Slide

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

    View Slide

26. Animation
    Surface Reaction
    Shadow
    

    View Slide

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
    

    View Slide

28. Animation Surface Reaction
    Shadow
    Recap
    

    View Slide

29. Components
    Button
    FloatingActionButton
    CardView
    RecyclerView
    Toolbar & Appbar
    CoordinatorLayout
    

    View Slide

30. Demo app
    github.
    com/yprabhu/materialw
    orld
    Forked from
    github.
    com/chrisbanes/cheeses
    quare
    @yashvprabhu
    #360andev
    

    View Slide

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
    

    View Slide

32. Button
    Flat Raised FloatingActionButton (FAB)
    

    View Slide

33. Button Demo
    

    View Slide

34. Post-21 (Lollipop)
    
    
    android:state_pressed="true"
    android:drawable="@drawable/bg_button_yellow_pressed"/>
    android:drawable="@drawable/bg_button_yellow_normal"/>
    
    

    View Slide

35. Pre-21 (Lollipop) workaround
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    
    
    

    View Slide

36. Floating Action Button
    Default Elevation: 6 dp
    

    View Slide

37. FAB widget
    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" />
    

    View Slide

38. Cards
    Card resting elevation: 2dp
    Card raised elevation: 8dp
    @yashvprabhu #360andev
    

    View Slide

39. CardView
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/card_margin">
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:selectableItemBackground">
    …..
    
    
    

    View Slide

40. Lists & Grids -
    RecyclerView
    compile 'com.android.
    support:appcompat-v7:
    24.1.1'
    compile 'com.android.
    support:recyclerview-v7:
    24.1.1'
    

    View Slide

41. Under the hood
    Recycler View
    Layout Manager
    Adapter Dataset
    Item Animator
    

    View Slide

42. Add RecyclerView to your layout
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
    

    View Slide

43. View Item
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">
    android:id="@+id/avatar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:src="@drawable/bulbasaur"/>
    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"/>
    

    View Slide

44. Appbar, Toolbar, ActionBar?
    

    View Slide

45. Common Pattern
    

    View Slide

46. Common Pattern
    CoordinatorLayout
    -- AppBarLayout
    -- Toolbar
    -- TabLayout
    -- ViewPager
    -- FloatingActionButton
    @yashvprabhu #360andev
    

    View Slide

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
    

    View Slide

48. Common Pattern
    

    View Slide

49. Common Pattern
    CoordinatorLayout
    -- AppBarLayout
    -- CollapsingToolbarLayout
    -- ImageView
    -- Toolbar
    -- NestedScrollView
    -- LinearLayout
    -- CardView
    -- Button
    -- FloatingActionButton
    @yashvprabhu #360andev
    

    View Slide

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
    

    View Slide

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

    View Slide

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)
    

    View Slide

53. Image Credit
    Windows Phone - Flat design
    iOS Phone - Skeuomorphic design
    Android - Material Design
    PokemonDB
    design.google.com
    Android developer docs
    

    View Slide

54. @yashvprabhu #360andev
    github.com/yprabhu
    yprabhu.com
    dramafever.com
    We’re hiring! www.jsco.re/8ns9
    Q&A
    

    View Slide