Material design

Post on 09-Dec-2014

590 views 0 download

Tags:

description

Android Material Design. New age for amazing apps. Tips and tricks. The 3rd Dnepropetrovsk Android Practice Leaders Community Meet-Up, that took place ob Sept 18, 2014. Ilya Lisovoy, a true fan of mobile development and Android developer in particular, tells about: - new android philosophy in material design - beauty volume and shadows of UI elements - new android views : RecyclerView, CardView, Palette - animations and activity transition effects The presentation will be interesting for all Android developers.

Transcript of Material design

Ilya Lisovoy

USEFUL LinksIntroduction to Material

Contents

Material for Android

Apps with material

USEFUL Links

Visual language for our users that synthesizes the classic principles of good design with the innovation of technology.

This is material design.

USEFUL Links

Goals

USEFUL Links

Material is metaphor

Principles

Graphic Motion provides meaning

USEFUL Links

Motion animation

USEFUL Links

Responsive Interaction

USEFUL Links

Meaningful Transitions

USEFUL Links

Delightful Details

USEFUL Links

Style

USEFUL Links

Color Pallete

USEFUL Links

UI Color Application

USEFUL Links

Typeface Roboto

USEFUL Links

How to use font

USEFUL Links

Flat design for icons

USEFUL Links

Use more place for image

USEFUL Links

More real things in material design

USEFUL Links

Focus on main

USEFUL Links

No effects for photo

USEFUL Links

Scale layouts for all devices

USEFUL Links

Metrics

USEFUL Links

Flat and real dynamic design

USEFUL Links

Material in android

USEFUL Links

Apply the Material Theme

USEFUL Links

Customize color in theme

USEFUL LinksThe material theme is only available in the Android L

Developer Preview.

Compatibility

android.support.v7.widget.RecyclerView

android.support.v7.widget.CardView

USEFUL Links

RecyclerView

USEFUL LinksViewHolder by default

Layout manager

ItemAnimator

RecyclerView

USEFUL Links

RecyclerView example

USEFUL LinksShadows

CardView

Rounded corners

Box for content

USEFUL Links

Pallete

Bitmap

Vibrant color (Normal, Light, Dark)

Muted color (Normal, Light, Dark)

USEFUL Links

Shadows

USEFUL Links

Shadow evaluation

USEFUL Links Touch feedback

Animations

Reveal effect

Curved motion

Activity transitions

View state changes

USEFUL LinksRippleDrawable class

Touch feedback

?android:attr/selectableItemBackground

android:colorControlHighlight

USEFUL Links

Touch feedback

USEFUL Links

Activity transitions

USEFUL LinksMaterial design from Google http://www.google.com/design/spec/material-design

Useful links

Material design for androidhttp://developer.android.com/preview/material/index.html

Angular material designhttps://material.angularjs.org/#/

Apps with material designhttp://www.androidauthority.com/best-material-design-apps-for-android-523420/

Questions time

Thank you for Attention

Contact information

ip.lisoviy@gmail.com

ilya.lisovyy

id=227112207

vk.com/lisway