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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Why? @yashvprabhu #360andev

Slide 3

Slide 3 text

What is Material Design? @yashvprabhu #360andev

Slide 4

Slide 4 text

Skeuomorphic vs. Flat vs. Material Design

Slide 5

Slide 5 text

Components Layout Animation Style @yashvprabhu #360andev

Slide 6

Slide 6 text

Style Color Theme Typography Imagery

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Theme Theme.Holo & Theme. AppCompat

Slide 9

Slide 9 text

How do I apply a theme? <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> @yashvprabhu #360andev

Slide 10

Slide 10 text

Mat erial Palette materialpalette.com

Slide 11

Slide 11 text

Material Palette

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Style Color Theme Typography Imagery Recap

Slide 18

Slide 18 text

Layout Keylines & Grids Device Metrics Responsive UI Breakpoints

Slide 19

Slide 19 text

Keylines & Grids

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Device metrics design.google.com/devices

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Layout Keylines & Grids Device Metrics Responsive UI Breakpoints Recap

Slide 26

Slide 26 text

Animation Surface Reaction Shadow

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Animation Surface Reaction Shadow Recap

Slide 29

Slide 29 text

Components Button FloatingActionButton CardView RecyclerView Toolbar & Appbar CoordinatorLayout

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Button Flat Raised FloatingActionButton (FAB)

Slide 33

Slide 33 text

Button Demo

Slide 34

Slide 34 text

Post-21 (Lollipop)

Slide 35

Slide 35 text

Pre-21 (Lollipop) workaround

Slide 36

Slide 36 text

Floating Action Button Default Elevation: 6 dp

Slide 37

Slide 37 text

FAB widget

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

CardView …..

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Under the hood Recycler View Layout Manager Adapter Dataset Item Animator

Slide 42

Slide 42 text

Add RecyclerView to your layout

Slide 43

Slide 43 text

View Item

Slide 44

Slide 44 text

Appbar, Toolbar, ActionBar?

Slide 45

Slide 45 text

Common Pattern

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Common Pattern

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Components Button FloatingActionButton CardView RecyclerView Toolbar & Appbar CoordinatorLayout Recap

Slide 52

Slide 52 text

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)

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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