Android Material Design

by Unknown Thursday, February 18, 2016 0 comments Android Material Android New Concepts Android news Android Tutorial Material Design

Overview

Android Material Design gives new visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

• Rational space and a system of motion.
• Print based design(typography,grids,space,scale,color and use of imagery).
• Motion is meaningful.

Material Environment:

Android Material Design is gives 3D world which means all objects have x,y,and z dimensions. It contains Shadow and Light effects to all object .

Material Properties:

1. Physical Properties – it can vary x & y dimensions and not Z dimension (it should be uniform thickness).
2. Transform Properties – it can grow and shrinks only along its plane.(never bends or folds).
3. Movement Properties -it moves along any axis with its plane .

Material Elevation and Shadow:

1. Elevation – it is relative depth between two surfaces objects along the z-axis
2. Shadow – it gives objects depth and directional movement . It indicates the amount of separation between surfaces.
3. Object relationship – Object can move independently of each other .Parent-Child Relationship . The child in each of these relationship refers to an element that is a subordinate to its Parent element.

Elevation (dp)	Component
24	Dialog Picker
16	NavDrawer RightDrawer ModalBottomSheet
12	Floating action button
9	Sub-menu(+1dp for each sub menu)
8	Menu Card Raised Button
6	Floating action button(Resting elevation) Snackbar
4	AppBar
3	Refresh indicator Quick entry/Search bar(Scrolled state)
2	Card(Resting) Raised button(Resting) Quick entry /Search bar(Resting)
1	Switch

Consistent choreography:

Secondary color:
Grid:
Parent to Child: Exploring deeper levels, or screens, of an app is a hierarchical journey that starts at a parent screen. From there, a user can explore multiple possible sub- screens, which are children to the parent screen.

Animation:

Responsive Interaction:

• Touch, voice, mouse, and keyboard are all equally important input methods.
• UI elements appear tangible, even though they are behind a layer of glass (the device screen). To bridge that gap, visual and motion cues acknowledge input immediately and animate in ways that look and feel like direct manipulation.

Responsive interaction elevates an application from an information-delivery service to an experience that communicates using multiple visual and tactile responses.

1.Surface Reaction:

Instant visual confirmation at the point of contact :under the pad of a finger for touch, at the microphone for voice, or in the appropriate field for a keyboard press.

2.Material Response:

Like surface reactions, material can lift up when touched, indicating an active state. On touch, the user can generate new or transform existing material, or directly manipulate sheets of material by dragging or flinging them. Material can be resized linearly or radially.

3.Radial Action:

Add clarity to user input through visual reactions to user input. Radial action is the visual ripple of ink spreading outward from the point of input.

Transitions

Visual Continuity :

Transitioning between two visual states should be clear, smooth, and effortless. A well-designed transition tells the user where to focus their attention.

Hierarchical Timing:

When building a transition, consider the order and timing of element movement. Ensure that motion supports the information hierarchy, conveying what content is most important by creating a path for the eye to follow.

The paths elements travel along should make sense and be orderly and in coordinate manner.

Style:

Color palette:

Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors in Android Material Design.

Primary color:

When using a primary color in your palette, this color should be the most widely used across all screens and components.

Palettes with a secondary color may use this color to indicate a related action or information. The secondary color may be a darker or lighter variation of the primary color.

Accent color:

The accent should be used for the floating action button and interactive elements, such as:

Text fields and cursors,Text selection,Progress bars,Selection controls, buttons, and sliders,Links.

Layouts:

Metrics & key lines:

Baseline grids:

All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid.  

Key-lines & Spacing:

key lines, spacing guidance, and sample screens for elements on mobile, tablet, and desktop.

Statusbar:24dp

Title:80dp

Subtitle: 48dp

List Item:72dp

Toolbar: 56dp

Account menu and list items: 48dp

Space between content areas: 8dp

Navigation right margin: 56dp

Screen edge left and right margins: 24dp

Content left margin from screen edge: 80dp

Card left and right padding: 24dp

Card content left padding: 104dp

Status bar and space above list: 24dp

Space between content areas: 8dp

Screen edge left and right padding: 24dp

Icons’ vertical center distance from screen edge: 52dp

Nav item left padding from screen edge: 104dp

Content left margin from screen edge: 80dp

Card left and right padding: 32dp

Card nav item left padding: 96dp

Subtitle, list item, and slider: 48dp

Material designs responsive UI is based on a 12-column grid layout. This grid creates visual consistency between layouts, while allowing flexibility across a wide variety of designs. The number of grid columns varies based on the breakpoint system.

Components:

Bottom Sheets

A bottom sheet is a sheet of material that slides up from the bottom edge of the screen. A bottom sheet can be a temporary modal surface or a persistent structural element of an app.

1.Modal bottom sheets slide in over an app’s content.

2.Persistent bottom sheets are an integral part of an app’s layout.

Font and color

• Text: Roboto Regular 16sp,  #000 87%
• Title (optional): Roboto Regular 16sp, #000 54%
• Default bottom sheet background fill: #FFF
• Transparent overlay fill: #000 20%

Button:

A button clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.

There are three standard types of buttons:

• Floating action button: A circular material button that lifts and displays an ink reaction on press.
• Raised button: A typically rectangular material button that lifts and displays ink reactions on press.
• Flat button: A button made of ink that displays ink reactions on press but does not lift.

Card: A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.

Card collections only scroll vertically.

Cards can be constructed using blocks of content which include: 1. An optional header 2. A primary title 3. Rich media 4. Supporting text 5. Actions

Metrics & Key-line in Cards :

Primary title top padding: 24dp Primary title bottom padding: 16dp Action button row padding: 8dp Supporting text top padding: 16dp Supporting text bottom padding: 24dp Supporting text: 14sp

Elevation Card resting elevation: 2dp Card raised elevation: 8dp

Chip: Complex entities in small block .it may contain photo,short title and brief information. it may also contain icon.

Snackbars: Snackbar appears on the bottom of the screen for showing a brief information.it can contain an action and only one snackbar on screen at a time.

Steppers: Steppers covey progress through numbered steps.

Tabs: Switch between different views or functional aspects of an app. Tabs control the display of content in a consistent location.

Text fields: User to input text,select text and lookup data .

Tooltips: Tooltips are labels that appear on hover and focus when the user hovers over an element with the cursor, focuses on an element using a keyboard (usually through the tab key), or upon touch (without releasing) in a touch UI.

Patterns:

Fingerprint:

Fingerprint detection can be used to unlock a device, sign in to apps, and authenticate purchases with Google Play and some third-party apps.

Fingerprint is not as secure as a strong PIN or password.

Permissions:

Permission requests should be simple, transparent, and understandable. When requesting access, apps should ensure that either the feature itself or an explanation provided makes it clear why a permission is needed.

Runtime Permissions:

Apps may request permission to access information or use device capabilities at any time after installation. When a user needs to perform an action in an app, such as using the device camera, the app may request permission at that moment.

Users may also allow or deny the permissions of any app from Android Settings anytime after installation.

Denied Permissions:

Provide feedback whenever a permission is denied.

Navigational Transitions: Movements between states in an app such as from a high-level view to a detailed view. Most, but not all, transitions are hierarchical in nature.

Sibling to Sibling: Sibling transitions are transitions that occur between elements at the same level of hierarchy