Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adaptive Design

Adaptive Design

Android
- Shadow
- Path Tracing
- Palette

6dd0483f1353a4a359e92633cfd65c64?s=128

Daichi Furiya (Wasabeef)

November 27, 2014
Tweet

Transcript

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

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

  3. Shadows

  4. • Viewͷܗʹ߹͏Α͏ʹShadowΛഎܠʹམͱ͢! In the shape of its outline! ! •

    ਖ਼౤Ө! Use scaleX/scaleY when perspective scaling desired! ! • translationX,Yͱಉ༷ʹ؆୯ͳΞχϝʔγϣϯ! view.animate().translationZ(value) Shadows!
  5. 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
  6. Umbra Penumbra

  7. Shadows! Tip • 3Dճస࣌ͷShadow͸೉͍͠! rotateX, rotateY! ! • ଞViewͱͷ઀৮࣌ͷShadowҙࣝ͢Δ! !

    • ElevationΛద੾ͳߴ͞ʹઃఆ͞Ε͍ͯΔ͜ͱ
  8. • define animations between view states! ! • Raise pressed

    items! ! • State list animators! ! • Simply animate the elevation Animation Shadows
  9. <ImageButton! android:layout_width=“40dp”! android:layout_height=“40dp“! android:background="@drawable/info_background"! android:src="@drawable/ic_star"! android:elevation="4dp"! android:stateListAnimator="@anim/button_raise" /> Animation Shadows

  10. <selector>! <item! android:state_enabled="true"! android:state_pressed="true">! <objectAnimator! android:duration="@android:integer/config_shortAnimTime"! android:propertyName="translationZ"! android:valueTo="@dimen/button_press_elevation"! android:valueType="floatType" />!

    </item>! <item>! <objectAnimator! android:duration="@android:integer/config_shortAnimTime"! android:propertyName="translationZ"! android:valueTo="@dimen/button_elevation"! android:valueType="floatType" />! </item>! </selector> Animation Shadows
  11. StateListAnimator anim = ! AnimatorInflater.loadStateListAnimator(! context, R.anim.button_raise);! ! v.setStateListAnimator(anim); Animation

    Shadows
  12. Path Tracing

  13. Path Tracing • Works from ! API level 1 to

    API level 21! PathMeasure.getSegment(…)! ! • Easier with property animations
  14. 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
  15. 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
  16. Colors

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

  19. 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
  20. Material Design ≒ Adaptive Design

  21. Thanks.