Material Design

04/07/2023

04/07/2023

2

Prepared By:

Anup MajumderDept. Of CSE

Jahangirnagar University

04/07/2023

3Overview

What is Material Design? Elements Of Material Design. Principle Of Material Design. Animation Contents Of Animation.

4

What is material design?MATERIAL DESIGN CREATE A VISUAL LANGUAGE FOR USERS THAT SYNTHESIZES THE CLASSIC PRINCIPLES OF GOOD DESIGN WITH THE INNOVATION AND POSSIBILITY OF TECHNOLOGY AND SCIENCE. THIS IS MATERIAL DESIGN. THE ANDROID L DEVELOPER PROVIDES THE FOLLOWING ELEMENTS FOR US TO BUILD MATERIAL DESIGN APPS:

A NEW THEME NEW WIDGETS FOR COMPLEX VIEWS NEW APIS FOR CUSTOM SHADOWS AND ANIMATIONS

04/07/2023

04/07/2023

5Material Theme The material theme provides a new style for our app,

system widgets that let us set their color palette, and default animations for touch feedback and activity transitions.

6New Widgets

The Android L Developer Preview includes two new widgets for displaying complex views:

The new RecyclerView widget is aMore advanced version of ListView.

The new CardView widget lets usImportant pieces of information insideCards that have a consistent look andFeel.

04/07/2023

04/07/2023

7View Shadows

In addition to the X and Y properties, views in the Android L Developer have a Z property. This new property represents the elevation of a view, which determines:

The size of the shadow - Views with higher Z values cast bigger shadows.

The drawing order - Views with higher Z values appear on top of other views.

8Animations The Android L Developer provides new APIs that let us to create

custom animations for touch feedback in UI controls, view state changes, and activity transitions.

Touch feedback animations are built into several standard views such as buttons.

The new APIs let us customize these animations and add animations to our custom views.

04/07/2023

04/07/2023

9Continue…

The new animation APIs let us: Respond to touch events in our views with touch feedback

animations. Hide and show views with reveal effect animations. Switch between activities with custom activity transition

animations. Create more natural animations with curved motion. Show animations in state list drawables between view state

changes.

04/07/2023

10Principles of Material Design

Material is the metaphor :A material metaphor is the unifying theory of a rationalized space and a system of motion.Bold, graphic, intentional :These elements do far more than please the eye; they create hierarchy, meaning, and focus.Motion provides meaning :Motion is meaningful and appropriate, serving to focus attention and maintain continuity.

04/07/2023

11Animation has four contents:

o Authentic Motiono Responsive Interactiono Meaningful Transitionso Delightful Details

12Animationo Authentic Motion Perceiving an object's tangible form helps us understand how to manipulate it.

Observing an object's motion tells us whether it is light or heavy, flexible or rigid, small or large.

Contents Mass and Weight:Physical objects have mass and move only when forces are applied to them.Objects can’t start or stop instantaneously.

04/07/2023

04/07/2023

13Animationo Responsive Interaction Responsive interaction builds trust with the user and engages

them. It is thoughtful and purposeful, not random, and can be gently

whimsical but never distracting.

In material design, apps are responsive to and eager for user input: Touch, voice, mouse and keyboard are all first-class input

methods Although UI elements appear tangible, they are locked behind a

layer of glass

04/07/2023

14Animation(Responsive Interaction)Examples: Surface ReactionOne way to express this acknowledgment is through the ink metaphor, the dynamic display surface that coats every sheet of paper.

04/07/2023

15Animation(Responsive Interaction) Material Response In addition to ink-like actions on the surface, the material itself can also

respond to interaction. The material can lift up when touched or clicked, indicating an active state. Material appears from touch point. Paper appears from center of screen, breaking relationship with input.

04/07/2023

16Animation(Responsive Interaction) Radial Action

All user initiated actions have an epicenter; the place or places where their intent enters the system.

Actions should visually connect to their respective input epicenter.

Closer actions occur sooner than more distant ones, creating a ripple of actions

17AnimationMeaningful Transitions It can sometimes be difficult for a user to know where to focus their attention

in an app or how an app element got from point A to point B. Motion design should not only be beautiful, but serve a functional purpose.

04/07/2023

18Examples

Visual Continuity Transitioning between two visual states should be smooth,

appear effortless, and above all, provide clarity to the user, not confusion.

A transition has three categories of elements: Incoming elements Outgoing elements Shared elements

04/07/2023

04/07/2023

19Animation(Meaningful Transitions)Hierarchical Timing When building a transition, consider both the order in which

elements move and the timing of their movement. It Ensure that motion supports the information hierarchy.

04/07/2023

20Animation(Meaningful Transitions)Consistent Choreography As transitioning elements move around the screen. They should behave in a coordinated manner.

21AnimationDelightful Details Animation can exist within all components of an app and at all scales, from

finely detailed icons to key transitions and actions. All elements work together to construct a seamless experience and a

beautiful, functional app.

04/07/2023

Thank You

End