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

[Dmytro Danylyk] Android L Animation

[Dmytro Danylyk] Android L Animation

Presentation from GDG DevFest - the biggest Google related event in Ukraine. October 24-25, Lviv. Learn more at http://devfest.gdg.org.ua/

Google Developers Group Lviv

October 25, 2014
Tweet

More Decks by Google Developers Group Lviv

Other Decks in Programming

Transcript

  1. Dmytro Danylyk

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"/>
    Android L Developer Preview new touch feedback mechanism.
    , a typically rectangular button made of paper
    that lifts and emits ink reactions on press.

    View Slide

  6. ...
    android:background="?android:attr/selectableItemBackground"/>
    , a button made of ink that emits ink reactions on
    press but does not lift.

    View Slide

  7. <br/><item name="android:colorControlHighlight">@android:color/holo_purple</item><br/>
    To change the default touch feedback color, use the theme's
    attribute.

    View Slide







  8. To change the default touch feedback color, of single view use
    ripple drawable.

    drawable/ripple.xml​​

    View Slide

  9. ...
    android:background="?android:attr/selectableItemBackgroundBorderless"/>
    To make ripple extends beyond the view bounds.

    View Slide

  10. View Slide

  11. ValueAnimator anim =
    ViewAnimationUtils.createCircularReveal(
    view,
    centerX,
    centerY,
    startRadius,
    endRadius
    );
    The method enables you to animate a clipping
    circle to reveal or hide a view.

    View Slide

  12. View Slide

  13. Path path = new Path();
    path.addCircle(x, y, radius, Path.Direction.CW);
    ObjectAnimator animator =
    ObjectAnimator.ofFloat(view, View.X, View.Y, path);
    animator.setDuration(1000);
    animator.start();
    The class has new constructors that enable you to
    animate coordinates along a path.

    View Slide

  14. View Slide




  15. android:propertyName="translationZ"
    android:duration="100"
    android:valueTo="4"
    android:valueFrom="0"
    android:valueType="floatType"/>


    ...

    The new class lets you define animators that
    run when the state of a view changes.
    anim/selector.xml​​
    android:stateListAnimator="@anim/selector"/>

    View Slide

  16. View Slide








  17. android:toId="@+id/state_off">




    ...







    drawable-v21/icon_anim.xml​​
    The new class lets you create drawables
    that show animations between state changes of the associated view.

    View Slide

  18. View Slide





































  19. *Nightly build

    View Slide

  20. Open Source
    Ice Cream Sandwitch
    Scalable graphic
    Declaration via XML
    Web app

    View Slide

  21. View Slide

  22. View Slide

  23. <br/><item name="android:windowContentTransitions">true</item><br/><item name="android:windowEnterTransition">@transition/fade</item><br/><item name="android:windowExitTransition">@transition/fade</item><br/>
    values-v21/styles.xml​​
    - moves views in or out of the scene.
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    getWindow().setEnterTransition(new Explode());
    getWindow().setExitTransition(new Explode());
    }
    xml
    programmatically
    - moves views in or out from one of the edges of the scene.
    - moves views in or out from the center of the scene.

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. A determines how views that are shared
    between two activities transition between these activities.
    - animates the changes in clip bounds of target
    views.
    - animates the changes in layout bounds of target
    views.
    - animates the changes in scale and rotation of
    target views.
    - animates changes in size and scale type for an
    image view.

    View Slide

  28. View Slide

  29. To make a screen transition animation between two activities that
    have a shared element:
    1. Enable window content transitions in your style.
    true
    @transition/move_image
    @transition/move_image
    2. Specify a shared elements transition in your style.

    transition/move_image.xml

    View Slide

  30. 4. Use the method.
    android:id="@+id/photo"
    android:viewName="photo_hero" />
    3. Assign a common name to the shared elements in
    both layouts with the attribute.
    ImageView hero = (ImageView) findViewById(R.id.photo);
    ActivityOptions options =
    ActivityOptions.makeSceneTransitionAnimation(this, hero, "photo_hero");
    startActivity(intent, options.toBundle());
    5. Set image view source inside Details Activity method.

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. // Check if we're running on Android 5.0 or higher
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Call some material design APIs here
    } else {
    // Implement this feature without material design
    }
    Activity transitions
    Touch feedback
    Reveal animations
    Path-based animations
    Animated selectors
    Vector drawables

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide