What Material Design means to Android

What Material Design means to Android

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

820df515de752bffa0ce2644a7927186?s=128

David González

November 21, 2014
Tweet

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

  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
  9. None
  10. Elevation

  11. Raised elevation

  12. None
  13. None
  14. None
  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>
  21. 21

  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
  26. None
  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