Adaptive Design #3 CyberAgent, Inc. ߱໼ େ஍

About Me Daichi Furiya @wasabeef_jp wasabeef http://wasabeef.jp

Shadows

• Viewͷܗʹ߹͏Α͏ʹShadowΛഎܠʹམͱ͢! In the shape of its outline! ! • ਖ਼౤Ө! Use scaleX/scaleY when perspective scaling desired! ! • translationX,Yͱಉ༷ʹ؆୯ͳΞχϝʔγϣϯ! view.animate().translationZ(value) Shadows!

public boolean onTouchEvent(MotionEvent event) { ! switch (event.getAction()) { case MotionEvent.ACTION_DOWN: animate().setDuration(100).scaleX(1.2f).scaleY(1.2f).translationZ(20); return true; ! case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: animate().setDuration(100).scaleX(1).scaleY(1).translationZ(0); return true; } } Shadows! How to use them

Umbra Penumbra

Shadows! Tip • 3Dճస࣌ͷShadow͸೉͍͠! rotateX, rotateY! ! • ଞViewͱͷ઀৮࣌ͷShadowҙࣝ͢Δ! ! • ElevationΛద੾ͳߴ͞ʹઃఆ͞Ε͍ͯΔ͜ͱ

• define animations between view states! ! • Raise pressed items! ! • State list animators! ! • Simply animate the elevation Animation Shadows

Animation Shadows

! ! ! ! ! ! ! Animation Shadows

StateListAnimator anim = ! AnimatorInflater.loadStateListAnimator(! context, R.anim.button_raise);! ! v.setStateListAnimator(anim); Animation Shadows

Path Tracing

Path Tracing • Works from ! API level 1 to API level 21! PathMeasure.getSegment(…)! ! • Easier with property animations

Path path = makePath();! Path renderPath = new Path();! ! // Measure the path! PathMeasure measure = new PathMeasure(path, false);! float length = measure.getLength();! ! // Get a path segment! measure.getSegment(! 0.0f, fraction * length, renderPath, true);! ! // For Android <= 4.4! renderPath.rLineTo(0.0f, 0.0f);! canvas.drawPath(renderPath, paint); Path Tracing

public void tracePath() {! ! ValueAnimator animator = ValueAnimator.ofFloat(1.0f, 0.0f);! ! animator.addUpdateListener(new AnimatorUpdateListener() {! @Override! public void onAnimationUpdate(ValueAnimator valueAnimator) {! ! measure.getSegment(0.0f, mPathLength *! (Float) valueAnimator.getAnimatedValue(), renderPath, true);! ! invalidate();! ! }! });! animator.start();! } Path Tracing

Colors

No content

Palette! • android-support-v7-palette! ! ! • Bitmap͔ΒPaletteΛGenerate͢Δ! 6 named colors

private void colorize(Bitmap photo) {! // You can also use async versions! Palette p = Palette.generate(photo);! ! TextView titleView = ! (TextView) findViewById(R.id.title);! titleView.setTextColor(p.getVibrantColor().getRgb());! } Dynamic Palette! android.support.v7.graphics.Palette

Material Design ≒ Adaptive Design

Thanks.