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

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

Yash Prabhu

July 28, 2016
Tweet

More Decks by Yash Prabhu

Other Decks in Technology

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