Visual Continuity Material Design
-
Upload
pietro-alberto-rossi -
Category
Engineering
-
view
523 -
download
3
Transcript of Visual Continuity Material Design
![Page 1: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/1.jpg)
Visual Continuity Material Design
+PietroAlbertoRossi @sprik89
![Page 2: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/2.jpg)
What?
![Page 3: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/3.jpg)
“Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies.
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.
This is Material Design.”
Material Design
![Page 4: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/4.jpg)
Material Design
Material is the metaphor
Bold, graphic, intentional
Motion provides meaning
![Page 5: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/5.jpg)
Visual Continuity
![Page 6: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/6.jpg)
What is it?
Visual continuity is a concept that defines how two objects should work each other to permit clarity to the user.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity.
![Page 7: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/7.jpg)
How the users attention should be directed?
![Page 8: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/8.jpg)
Animation Transition Motion
![Page 9: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/9.jpg)
Animations
![Page 10: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/10.jpg)
Touch FeedbackVisual feedback when a view has been touched
<ripple xmlns:android=“…“ android:color="@android:color/black" > <item android:drawable="@drawable/bg" /> </ripple>
![Page 11: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/11.jpg)
![Page 12: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/12.jpg)
Activity TransitionVisual continuity when one activity transitions toanother
getWindow().setEnterTransition(new Fade()); getWindow().setExitTransition(new Explode());
![Page 13: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/13.jpg)
Reveal EffectIt is a clipping circle that changes radius to reveal or hide a view.
ViewAnimationUtils.createCircularReveal (myView, cx, cy, initialRadius, finalRadius)
![Page 14: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/14.jpg)
![Page 15: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/15.jpg)
CardView
![Page 16: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/16.jpg)
![Page 17: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/17.jpg)
![Page 18: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/18.jpg)
RecyclerView
![Page 19: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/19.jpg)
![Page 20: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/20.jpg)
![Page 21: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/21.jpg)
Notifications
![Page 22: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/22.jpg)
Visual changes
![Page 23: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/23.jpg)
Device lockscreenWhen setting up a secure lock screen, the user can choose to conceal sensitive details from the securelock screen. In this case the System UI considers the notification's visibility level to figure out what can safely be shown.
Notification.Builder.setVisibility() VISIBILITY_PUBLICVISIBILITY_PRIVATEVISIBILITY_SECRET
![Page 24: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/24.jpg)
Category
![Page 25: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/25.jpg)
Priority
![Page 26: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/26.jpg)
![Page 27: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/27.jpg)
Visual Continuity?
![Page 28: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/28.jpg)
Example 1
![Page 29: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/29.jpg)
Example 1
![Page 30: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/30.jpg)
Example 2
![Page 31: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/31.jpg)
Example 2
![Page 32: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/32.jpg)
Example 3
![Page 33: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/33.jpg)
Example 3
![Page 34: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/34.jpg)
Tips
![Page 35: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/35.jpg)
Ripple Effect
drawable/ripple.xml
![Page 36: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/36.jpg)
Custom Ripple Effect
drawable/background.xml
drawable/customripple.xml
![Page 37: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/37.jpg)
Reveal Effectreveal.java
![Page 38: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/38.jpg)
![Page 39: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/39.jpg)
Activity TransitionTransitionActivity.java
![Page 40: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/40.jpg)
Floating Action Buttonlayout/fablayout.xml
![Page 41: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/41.jpg)
anim/ztranslate.xml
![Page 42: Visual Continuity Material Design](https://reader033.fdocuments.in/reader033/viewer/2022061609/55a204b81a28abda648b45b8/html5/thumbnails/42.jpg)
What’s next?Material Design developer.android.com/design/material/
Example github.com/sprik/
www.sprik.it