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
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