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
   

   View Slide

2. Agenda
   • Why do we need it?
   • What is Material Design?
   • New patterns
   • How do I start?
   

   View Slide

3. +DavidGonzalezMalmstein
   malmstein
   David González
   Technical Product Owner at Novoda
   @dggonzalez
   Google Developer Expert for Android
   

   View Slide

4. View Slide

5. Why?
   Bad user experience
   Bad platform experience
   Design inconsistency
   

   View Slide

6. Material Design
   

   View Slide

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
   

   View Slide

8. Material is a metaphor Bold, graphic, intentional Motion provides meaning
   Material principles
   

   View Slide

9. View Slide

10. Elevation
    

    View Slide

11. Raised elevation
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. Elevation
    15
    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
    

    View Slide

16. Outline
    16
    
    

    
    
    res/drawable/myrect.xml
    …
    android:background=“@drawable/myrect“/>
    res/layout/fragment_sample.xml
    

    View Slide

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
    

    View Slide

18. Define your own one
    view.setClipToOutline(true);

    view.setOutlineProvider(new
    RoundRectOutlineProvider());
    

    View Slide

19. Cards (only if you need them)
    

    View Slide

20. 20
    res/layout/view_card.xml
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto">
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">
    
    

    
    

    View Slide

21. View Slide

22. Color palette
    

    View Slide

23. Primary and Accent color
    

    View Slide

24. 24
    res/layout-v21/theme.xml
    

    parent=“android:Theme.Material.Light.DarkActionBar”>
    @color/primary
    @color/accent
    @color/primary_dark
    
    SDK 21 and above
    

    View Slide

25. 25
    res/layout/theme.xml
    
<br/><item name="colorPrimary">@color/primary</item>
<br/><item name="colorAccent">@color/accent</item>
<br/><item name="colorPrimaryDark">@color/primary_dark</item>
<br/>
    SDK 7 and above
    

    View Slide

26. View Slide

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
    

    View Slide

28. Toolbar
    

    View Slide

29. Toolbar in Material
    29
    Toolbar toolbar = (Toolbar)
    findViewById(R.id.my_awesome_toolbar);
    setActionBar(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
    

    View Slide

30. Toolbar in AppCompat
    30
    Toolbar toolbar = (Toolbar)
    findViewById(R.id.my_awesome_toolbar);
    

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

    View Slide

31. Nav Drawer
    • Bulleted list
    • Bulleted list
    • Bulleted list
    

    View Slide

32. Swipe to refresh
    

    View Slide

33. Touch feedback
    

    View Slide

34. 34
    res/drawable/item_bg.xml
    
    android:drawable="@color/white">
    
    

    View Slide

35. Reveal effect
    Animator anim =
    ViewAnimationUtils.
    createCircularReveal(
    myView,
    centerX,
    centerY,
    startRadius,
    finalRadius);
    

    anim.start();
    MyActivity.java
    

    View Slide

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();
    

    View Slide

37. Animate View state changes
    

    View Slide

38. 38
    res/drawable/mystatedrawable.xml
    
    
    android:duration="100"
    android:valueTo="5dp" />
    
    
    android:duration="100"
    android:valueTo="0" />
    
    
    

    View Slide

39. Vector drawables
    39
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/heart"/>
    res/layout/fragment_heart.xml
    

    View Slide

40. 40
    res/drawable/heart.xml
    android:height="256dp"
    android:width="256dp"
    android:viewportWidth="32"
    android:viewportHeight="32">
    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" />
    
    

    View Slide

41. Animated vector
    drawables
    41
    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
    

    View Slide

42. 42
    res/drawable/vectordrawable.xml
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600" >
    android:name="rotationGroup"
    android:pivotX="300.0"
    android:pivotY="300.0"
    android:rotation="45.0" >
    android:name="v"
    android:fillColor="#000000"
    android:pathData="M300,70 l 0,-70 70,70
    0,0 -70,70z" />
    
    
    

    View Slide

43. 43
    android:drawable="@drawable/vectordrawable" >
    android:name="rotationGroup"
    android:animation="@anim/rotation" />
    android:name="v"
    android:animation="@anim/path_morph" />
    
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />
    
    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"/>
    
    res/drawable/avd.xml
    res/anim/path_morph.xml
    res/anim/rotation.xml
    

    View Slide

44. Transitions
    

    View Slide

45. Enable transitions
    45
    getWindow().
    requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    <br/><!-- enable window content transitions --><br/><item name="android:windowContentTransitions">true</item><br/>
    res/values/theme.xml
    MainActivity.java
    

    View Slide

46. Activity transition
    46
    <br/><!-- specify enter and exit transitions --><br/><item name=“android:windowEnterTransition"><br/>@transition/explode</item><br/><item name=“android:windowExitTransition”><br/>@transition/explode</item><br/>
    res/values/theme.xml
    The easy way
    

    View Slide

47. Activity transition
    47
    getWindow().setExitTransition(new Explode());
    startActivity(intent,
    ActivityOptions.
    makeSceneTransitionAnimation(this).toBundle(
    ));
    MainActivity.java
    MainActivity.java
    

    View Slide

48. Shared element transition
    48
    <br/><!-- specify shared element transitions --><br/><item name=“android:windowSharedElementEnterTransition”><br/>@transition/change_image_transform</item><br/><item name=“android:windowSharedElementExitTransition”><br/>@transition/change_image_transform</item><br/>
    res/values/theme.xml
    The hard way
    

    View Slide

49. Shared element transition
    49
    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
    
    
    
    res/transition/my_transition.xml
    

    View Slide

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
    

    View Slide

51. How to start
    

    View Slide

52. Learn the theory
    

    View Slide

53. Look for inspiration
    

    View Slide

54. Practice on Paper
    

    View Slide

55. Priorities
    

    View Slide

56. Iterate, and do it fast
    

    View Slide

57. Questions?
    Thank you!
    

    View Slide

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
    

    View Slide