Material Design. +Ran Nachmany

Transcription

1 Material Design +Ran Nachmany

2 MATERIAL DESIGN

3 A coherent cross-platform experience

4 A coherent cross-platform experience A more flexible design system for Android

5 A coherent cross-platform experience A more flexible design system for Android A rational approach to visual, interaction, and motion design

6 Tangible Print-like Meaningful Adaptive surfaces design motion design

7 Tangible Print-like Meaningful Adaptive surfaces design motion design

8 Tangible Print-like Meaningful Adaptive surfaces design motion design

9 Tangible Print-like Meaningful Adaptive surfaces design motion design

10 Tangible Print-like Meaningful Adaptive surfaces design motion design

11 1 Tangible surfaces

12

13 Constrained depth

14 Interaction cues (scrolling and pinning)

15 Surface reaction

16 Z-eam me up, Scotty Elevation The base Z-depth of a View Z= + The transient delta Translation Z

17 Z-eam me up, Scotty <ImageView... android:elevation="8dp" /> view.animate().translationz( ).start();

18 StateListAnimator <ImageView android:layout_width= wrap_content android:layout_height= wrap_content android:elevation="8dp" /> Note: the Button provides this automatically

19 StateListAnimator anim/my_state_list_animator.xml <selector> </selector>

20 StateListAnimator anim/my_state_list_animator.xml <selector> <item android:state_pressed="true" android:state_enabled="true"> <objectanimator android:propertyname="translationz" android:valueto="8dp" android:valuetype="floattype"/> </item> </selector>

21 StateListAnimator anim/my_state_list_animator.xml <selector> <item> <objectanimator android:propertyname="translationz" android:valueto="0" android:valuetype="floattype"/> </item> </selector>

22 Outline A view s outline defines the shadow it casts By default, the outline is derived from the view s background <shape android:shape="oval"> <solid /> </shape>

23 Outline But you can do much more with Outline. Say you want an avatar clipped within a circle static class OvalOutlineProvider extends ViewOutlineProvider public void getoutline(view view, Outline outline) { outline.setoval(0, 0, view.getwidth(), view.getheight()); } } view.setoutlineprovider(new OvalOutlineProvider());

24 Cards A card is a piece of paper that contains a unique data set of related, heterogeneous information.

25 Cards A card is a piece of paper that contains a unique data set of related, heterogeneous information. outline elevation

26 Cards <android.support.v7.widget.cardview android:layout_width="match_parent" android:layout_height="wrap_content"> <-- Your card content --> </android.support.v7.widget.cardview>

27 Don t over cardify x

28 2 Print-like design

29

30

31

32 Front View Side View

33 YES NO

34 Refined typography

35 Refined typography

36 Typographic scale Display 4 Display 3 Display 2 Display 1 Headline Title Subhead Body 2 Body 1 Caption Menu Button

37 Typographic Display 4 scale Display 3 Display 2 Display 1 android:fontfamily= sans-serif-medium Headline Title Subhead Body 2 Body 1 Caption Menu Button

38 Display 4 Display 3 Display 2 android:textappearance.material. Display 1 Headline Title Subhead Body 2 Body 1 Caption Menu Button

39 Display 4 Display 3 Display 2 TextAppearance.AppCompat. Display 1 Headline Title Subhead Body 2 Body 1 Caption Menu Button

40 Bold color

41 Primary + Accent

42 colorprimarydark colorprimary coloraccent

43 Theme.Material API v21 and above <style name= MyAwesomeTheme" parent= android:theme.material.light.darkactionbar > <item <item name= <item name= </resources>

44 Theme.AppCompat API v7 and above <style name= MyAwesomeTheme" parent= Theme.AppCompat.Light.DarkActionBar > <item <item <item </resources>

45 Content can provide color

46 Light Vibrant Vibrant Dark Vibrant Light Muted Muted Dark Muted

47 P Palette p = Palette.generate(bitmap); Swatch vibrant = p.getvibrantswatch(); Swatch darkvibrant = p.getdarkvibrantswatch(); Swatch lightvibrant = p.getlightvibrantswatch(); Swatch Swatch Swatch

48 What s in a Swatch? getrgb() The RGB value of this Swatch (aka the colour) gettitletextcolor() ARGB color for legible title text over this Swatch Title Body getbodytextcolor() ARGB color for legible body text over this Swatch gethsl() The HSL value of this Swatch getpopulation() The relative amount of pixels this colour represents

49 3 Meaningful motion

50 Activity transitions 1. Enable the feature From your theme <style name="mytheme" parent= android:theme.material"> <-- enable window content transitions --> <item name="android:windowcontenttransitions">true</item> </style> From your Activity requestwindowfeature(window.feature_content_transitions);

51 Activity transitions 2. Specify the shared element(s) layout/album_details.xml <ImageView... />

52 Activity transitions 3. Start the Activity (transition) Intent intent =... // setup Intent as usual String transitionname = getstring(r.string.transition_album_cover); ActivityOptionsCompat opts = ActivityOptionsCompat.makeSceneTransitionAnimation( activity, albumcoverview, transitionname // Our starting Activity // The view which starts the transition // The transitionname of the view we re transitioning to ); // Now start the Activity, using our options bundle ActivityCompat.startActivity(activity, intent, opts.tobundle());

53 Asymmetric motion

54 Users initiate change

55 RippleDrawable New (v21+) Bound to another Drawable <ripple android:color=?android:colorcontrolhighlight > <item> <shape android:shape="rectangle"> <solid /> </shape> </item> </ripple>

56 RippleDrawable New (v21+) Bound to an invisible mask <ripple android:color=?android:colorcontrolhighlight > <item <shape android:shape="rectangle"> <solid /> </shape> </item> </ripple>

57 RippleDrawable New (v21+) Unbounded <ripple android:color=?android/colorcontrolhighlight />

58 Ripples Bounded ripple android:selectableitembackground Unbounded ripple New (v21+) android:selectableitembackgroundborderless

59 Circular Reveal

60 Circular Reveal Animator reveal = ViewAnimationUtils.createCircularReveal( viewtoreveal, // View to reveal centerx, centery, // mask centre x // mask centre y startradius, // mask start radius endradius); // mask end radius reveal.start();

61 4 Adaptive design

62

63 Keylines

64 Increments 64dp 56dp

65 Think in blocks

66 Toolbar

67 Toolbar

68 Toolbar New (v21+) Place it within your layouts <Toolbar android:layout_height=?android:actionbarsize android:layout_width= match_parent android:background=?android:colorprimary /> Then in your Activity/Fragment Toolbar toolbar = findviewbyid(r.id.my_toolbar); setactionbar(toolbar);

69 Toolbar (AppCompat) New (v7+) Place it within your layouts <android.support.v7.widget.toolbar android:layout_height=?actionbarsize android:layout_width= match_parent android:background=?colorprimary /> Then in your ActionBarActivity/Fragment Toolbar toolbar = findviewbyid(r.id.my_toolbar); setsupportactionbar(toolbar);

70 Banesy Top Tip Window provided Progress Bars no longer work <Toolbar...> <ProgressBar... android:gravity="top end" /> </Toolbar>

71 MATERIAL DESIGN

72 Q?