SLIDE 1
Material Design
in practice
Marcin Korniluk
Material Design in practice Marcin Korniluk material design promo - - PowerPoint PPT Presentation
Material Design in practice Marcin Korniluk material design promo - - PowerPoint PPT Presentation
Material Design in practice Marcin Korniluk material design promo video What is Material Design? design language Metro Snow White set of rules no implementation Evolution skeumorphism icons & purposes save
SLIDE 2
SLIDE 3
SLIDE 4
What is Material Design?
- design language
– Metro – Snow White
- set of rules
- no implementation
SLIDE 5
Evolution
- skeumorphism
- icons & purposes
– save icon – widgets
- computing power
- a device & a toy
SLIDE 6
Why?
- computing power
- ‘new’ Android
- natural interaction
- unification
SLIDE 7
Natural interaction
SLIDE 8
User interface
https://pl.wikipedia.org/
SLIDE 9
Don’t surprise the user
- physics
- consistency
- cleariness
- feedback
SLIDE 10
Metrics and keylines
SLIDE 11
Consistency
- icons
- colors
- navigation
- hero transitions
- animations
- point of origin
- mass, momentum & friction
SLIDE 12
Consistency 2
SLIDE 13
Consistency 3
SLIDE 14
Consistency 4
SLIDE 15
Views and layouts
SLIDE 16
Views and layouts 2
SLIDE 17
Views and layouts 3
SLIDE 18
Cards
- layouts
- rounded corners
- shadow
SLIDE 19
Will it blend?
- slow devices
- long animations
- simple apps
- custom apps
- the apps
SLIDE 20
SLIDE 21
Material Design
- set of rules for designers
- lacks implementation
- hard to implement
SLIDE 22
„Physical properties”
SLIDE 23
AppCompat
- makes things compile
- Theme
- basic views
- Toolbar, SwitchCompat, ...
SLIDE 24
3rd party libraries
- android arsenal
- awesome android
- android weekly
SLIDE 25
Mäaterial
http://themancaveblog.com/
SLIDE 26
Material UI
- floating action button
- elevation & shadows
- ripples
- state animators
- custom drawing order
- hit areas
- vector graphics
- rounded corners
SLIDE 27
Floating action button
- crircle 56dp
- shadow
- ripple
- icon
- placement
SLIDE 28
Shadows
- Lollipop only
- elevation
SLIDE 29
Shadows 2
- simple, flat shapes
- ScriptIntrisincBlur
- getting rid of clipping
SLIDE 30
Ripples
- touch feedback
- RippleDrawable
- androidxref.com
- onTouchEvent
- rendering thread :(
SLIDE 31
Custom drawing order
- getChildDrawingOrder
- ViewPager
- elevation
if (views == null || views.size() != getChildCount()) { views = new ArrayList<View>(); for (int i = 0; i < getChildCount(); i++) views.add(getChildAt(i)); } Collections.sort(views, new ElevationComparator()); @Override protected int getChildDrawingOrder(int childCount, int child) { return views != null ? indexOfChild(views.get(child)) : child; }
SLIDE 32
Hit area
- isTransformedTouchPointInView
- getHitRect
SLIDE 33
Vector graphics
- svg parser & renderer
- render to bitmap
- ImageView
int width = getWidth() - getPaddingLeft() - getPaddingRight(); int height = getHeight() - getPaddingTop() - getPaddingBottom(); if (width <= 0 || height <= 0) return; bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); svg.setDocumentWidth(width); svg.setDocumentHeight(height); svg.renderToCanvas(canvas); setImageBitmap(bitmap);
SLIDE 34
Rounded corners
- clipping
- texturing
- drawing rounded backgrounds
textureCanvas.drawColor(0, PorterDuff.Mode.CLEAR); super.draw(textureCanvas); RectF rect = new RectF(); rect.bottom = getHeight(); rect.right = getWidth(); canvas.drawRoundRect(rect, cornerRadius, cornerRadius, paint);
SLIDE 35
Other features
- state animators
- drawableStateChanged
- hero transitions
- layout animations
- icon animations
SLIDE 36
Links
- www.google.com/design/
- androidxref.com
- github.com/ZieIony/Carbon
- code.google.com/p/androidsvg