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 icon – widgets • computing power • a device & a toy

Why? ● computing power ● ‘new’ Android ● natural interaction ● unification

Natural interaction

User interface https://pl.wikipedia.org/

Don’t surprise the user ● physics ● consistency ● cleariness ● feedback

Metrics and keylines

Consistency ● icons ● colors ● navigation ● hero transitions ● animations ● point of origin ● mass, momentum & friction

Consistency 2

Consistency 3

Consistency 4

Views and layouts

Views and layouts 2

Views and layouts 3

Cards • layouts • rounded corners • shadow

Will it blend? • slow devices • long animations • simple apps • custom apps • the apps

Material Design ● set of rules for designers ● lacks implementation ● hard to implement

„ Physical properties ”

AppCompat ● makes things compile ● Theme ● basic views ● Toolbar, SwitchCompat, ...

3rd party libraries ● android arsenal ● awesome android ● android weekly

Mäaterial http://themancaveblog.com/

Material UI ● floating action button ● elevation & shadows ● ripples ● state animators ● custom drawing order ● hit areas ● vector graphics ● rounded corners

Floating action button • crircle 56dp • shadow • ripple • icon • placement

Shadows ● Lollipop only ● elevation

Shadows 2 ● simple, flat shapes ● ScriptIntrisincBlur ● getting rid of clipping

Ripples ● touch feedback ● RippleDrawable ● androidxref.com ● onTouchEvent ● rendering thread :(

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; }

Hit area ● isTransformedTouchPointInView ● getHitRect

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);

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);

Other features ● state animators ● drawableStateChanged ● hero transitions ● layout animations ● icon animations

Links • www.google.com/design/ • androidxref.com • github.com/ZieIony/Carbon • code.google.com/p/androidsvg