What Material Design means to Android

Why do we need Material Design, what new patterns are introduced and how to implement it.

Transcript

1. What Material means to Android
2. Agenda • Why do we need it? • What is Material Design? • New patterns • How do I start?
3. +DavidGonzalezMalmstein malmstein David González Technical Product Owner at Novoda @dggonzalez Google Developer Expert for Android
5. Why? Bad user experience Bad platform experience Design inconsistency
6. Material Design
7. Goals Unified experience across platforms and different device sizes Visual language that synthesises classic principles of good design Provide guidelines in order to create appealing Android applications
8. Material is a metaphor Bold, graphic, intentional Motion provides meaning Material principles
10. Elevation
11. Raised elevation
15. Elevation 15 <ImageView
 android:id="@+id/my_textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:elevation="5dp"/> view.animate().translationZ(5).start(); res/layout/fragment_sample.xml SampleFragment.java
16. Outline 16 <shape android:shape="rectangle"> <solid android:color="#42000000" />
 <corners android:radius="5dp" /> </shape> res/drawable/myrect.xml <ImageView
 … android:background=“@drawable/myrect“/> res/layout/fragment_sample.xml
17. 17 static class OvalOutlineProvider extends ViewOutlineProvider{ @Override
 public void getOutline(View view, Outline outline) { outline.setOval(0, 0, view.getWidth(), view.getHeight(), 10); } } OvalOutlineProvider.java
18. Define your own one view.setClipToOutline(true);
 view.setOutlineProvider(new RoundRectOutlineProvider());
19. Cards (only if you need them)
20. 20 res/layout/view_card.xml <LinearLayout xmlns:android="" xmlns:tools="http://schemas.android.com/tools" xmlns:card_view="http://schemas.android.com/apk/res-auto"> <android.support.v7.widget.CardView android:id="@+id/card_view" android:layout_gravity="center" android:layout_width="200dp" android:layout_height="200dp" card_view:cardCornerRadius="4dp"> </android.support.v7.widget.CardView> 
 </LinearLayout>
22. Color palette
23. Primary and Accent color
24. 24 res/layout-v21/theme.xml 
 <style name="AppTheme" parent=“android:Theme.Material.Light.DarkActionBar”> <item name="android:colorPrimary">@color/primary</item> <item name="android:colorAccent">@color/accent</item> <item name=“android:colorPrimaryDark">@color/primary_dark</item> </style> SDK 21 and above
25. 25 res/layout/theme.xml <style name=“AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <item name="colorPrimary">@color/primary</item>
 <item name="colorAccent">@color/accent</item>
 <item name="colorPrimaryDark">@color/primary_dark</item>
 </style> SDK 7 and above
27. Palette API 27 dependencies { compile ‘com.android.support:palette-v7:21.0.+' } build.gradle Palette p = Palette.generate(bitmap); 
 Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { public void onGenerated(Palette palette) { // Do something with colors…} } ); MainFragment.java
28. Toolbar
29. Toolbar in Material 29 Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar); setActionBar(toolbar); <Toolbar android:id="@+id/my_awesome_toolbar" android:layout_height="wrap_content" android:layout_width=“match_parent" android:minHeight="?android/actionBarSize" android:background="?android/colorPrimary"/> res/layout/toolbar.xml MainActivity.java
30. Toolbar in AppCompat 30 Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar); 
 setSupportActionBar(toolbar); <android.support.v7.widget.Toolbar android:id="@+id/my_awesome_toolbar"
 android:layout_height="wrap_content"
 android:layout_width="match_parent"
 android:minHeight="?actionBarSize" android:background="?colorPrimary" />
 res/layout/toolbar.xml MainActivity.java
31. Nav Drawer • Bulleted list • Bulleted list • Bulleted list
32. Swipe to refresh
33. Touch feedback
34. 34 res/drawable/item_bg.xml <ripple android:color="#ffff0000"> <item android:id="@android:id/mask" android:drawable="@color/white"> <ripple />
35. Reveal effect Animator anim = ViewAnimationUtils. createCircularReveal( myView, centerX, centerY, startRadius, finalRadius); 
 anim.start(); MyActivity.java
36. MyActivity.java final View myView = findViewById(R.id.my_view); Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0); anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); myView.setVisibility(View.INVISIBLE); } }); anim.start();
37. Animate View state changes
38. 38 res/drawable/mystatedrawable.xml <selector xmlns:android=“…”/> <item android:state_pressed="true"> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="5dp" /> </item> <item android:state_pressed="false"> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="0" /> </item> </selector>
39. Vector drawables 39 <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/heart"/> res/layout/fragment_heart.xml
40. 40 res/drawable/heart.xml <vector xmlns:android=“…” android:height="256dp" android:width="256dp" android:viewportWidth="32" android:viewportHeight="32"> <path android:fillColor="@color/orange" android:pathData="M20.5,9.5 c-1.955,0,-3.83,1.268,-4.5,3 c-0.67,-1.732,-2.547,-3,-4.5,-3 C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5 c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z" /> </vector>
41. Animated vector drawables 41 <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background=“@drawable/avd.xml"/> res/layout/fragment_animated_vd.xml @Override public void onClick(View v) { ((AnimatedVectorDrawable) iv.getBackground()).start(); } MainActivity.java
42. 42 res/drawable/vectordrawable.xml <vector xmlns:android=“…” android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
43. 43 <animated-vector xmlns:android=“…" android:drawable="@drawable/vectordrawable" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target android:name="v" android:animation="@anim/path_morph" /> </animated-vector> <objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" /> <set xmlns:android=“…”> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType"/> </set> res/drawable/avd.xml res/anim/path_morph.xml res/anim/rotation.xml
44. Transitions
45. Enable transitions 45 getWindow(). requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); <style name="BaseAppTheme" parent="android:Theme.Material"> <!-- enable window content transitions --> <item name="android:windowContentTransitions">true</item> </style> res/values/theme.xml MainActivity.java
46. Activity transition 46 <style name="BaseAppTheme" parent=“android:Theme.Material”> <!-- specify enter and exit transitions --> <item name=“android:windowEnterTransition"> @transition/explode</item> <item name=“android:windowExitTransition”> @transition/explode</item> </style> res/values/theme.xml The easy way
47. Activity transition 47 getWindow().setExitTransition(new Explode()); startActivity(intent, ActivityOptions. makeSceneTransitionAnimation(this).toBundle( )); MainActivity.java MainActivity.java
48. Shared element transition 48 <style name="BaseAppTheme" parent=“android:Theme.Material”> <!-- specify shared element transitions --> <item name=“android:windowSharedElementEnterTransition”> @transition/change_image_transform</item> <item name=“android:windowSharedElementExitTransition”> @transition/change_image_transform</item> </style> res/values/theme.xml The hard way
49. Shared element transition 49 <ImageView android:layout_width="200dp" android:layout_height="200dp" android:id="@+id/robotoView" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:background=“@drawable/magic” android:transitionName=“@transition/my_transition”/> res/layout/fragment_sample.xml <transitionSet xmlns:android=“…”> <changeImageTransform/> </transitionSet> res/transition/my_transition.xml
50. Start the Activity 50 imgContainerView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(this, Activity2.class); ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, androidRobotView, transitionName); startActivity(intent, options.toBundle());
 FragmentSample.java
51. How to start
52. Learn the theory
53. Look for inspiration
54. Practice on Paper
55. Priorities
56. Iterate, and do it fast
57. Questions? Thank you!
58. Further reading • Novoda Blog on Material Design • Material Design Guidelines • Intro to Material Design • Material Design Checklist • Material Design for Pre-Lollipop with AppCompat • Nick Butcher and Chris Banes at Droidcon UK 2014