[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/

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