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/

3a6de6bc902de7f75c0e753b3202ed52?s=128

Google Developers Group Lviv

October 25, 2014
Tweet

More Decks by Google Developers Group Lviv

Other Decks in Programming

Transcript

  1. Dmytro Danylyk

  2. None
  3. None
  4. None
  5. <Button 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.
  6. <Button ... android:background="?android:attr/selectableItemBackground"/> , a button made of ink that

    emits ink reactions on press but does not lift.
  7. <style name="AppTheme" parent="android:style/Theme.Material"> <item name="android:colorControlHighlight">@android:color/holo_purple</item> </style> To change the default

    touch feedback color, use the theme's attribute.
  8. <ripple android:color="@android:color/holo_purple"> <!--mask defines the bounds for the ripple animation-->

    <item android:id="@android:id/mask"> <shape android:shape="rectangle" /> </item> </ripple> To change the default touch feedback color, of single view use ripple drawable. <Button android:background="@drawable/ripple"/> drawable/ripple.xml​​
  9. <Button ... android:background="?android:attr/selectableItemBackgroundBorderless"/> To make ripple extends beyond the view

    bounds.
  10. None
  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.
  12. None
  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.
  14. None
  15. <selector> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="4" android:valueFrom="0" android:valueType="floatType"/>

    </set> </item> ... </selector> The new class lets you define animators that run when the state of a view changes. anim/selector.xml​​ <android.support.v7.widget.CardView android:stateListAnimator="@anim/selector"/>
  16. None
  17. <animated-selector> <item android:state_checked="true" android:id="@+id/state_on"> <bitmap android:src="@drawable/ic_done_anim_030" /> </item> <item android:state_checked="false"

    android:id="@+id/state_off"> <bitmap android:src="@drawable/ic_plus_anim_030" /> </item> <transition android:fromId="@+id/state_on" android:toId="@+id/state_off"> <animation-list> <item android:duration="16"> <bitmap android:src="@drawable/ic_plus_anim_000" /> </item> ... </item> <item android:duration="16"> <bitmap android:src="@drawable/ic_plus_anim_030" /> </item> </animation-list> </transition> </animated-selector> drawable-v21/icon_anim.xml​​ The new class lets you create drawables that show animations between state changes of the associated view.
  18. None
  19. <animation> </animation> <animation> <frame> </frame> </animation> <animation> <frame> <line x1="0"

    y1="0" x2="1" y2="1"/> </frame> </animation> <animation> <frame> <line x1="0" y1="0" x2="1" y2="1"/> <line x1="1" y1="0" x2="0" y2="1"/> </frame> </animation> <animation> <frame> <line x1="0" y1="0" x2="1" y2="1"/> <line x1="1" y1="0" x2="0" y2="1"/> </frame> <frame> <line x1="1" y1="0" x2="0.5" y2="1"/> </frame> </animation> <animation> <frame> <line x1="0" y1="0" x2="1" y2="1"/> <line x1="1" y1="0" x2="0" y2="1"/> </frame> <frame> <line x1="1" y1="0" x2="0.5" y2="1"/> <line x1="0.5" y1="1" x2="0" y2="0.5"/> </frame> </animation> *Nightly build
  20. Open Source Ice Cream Sandwitch Scalable graphic Declaration via XML

    Web app
  21. None
  22. None
  23. <style name="BaseAppTheme" parent="android:Theme.Material.Light"> <item name="android:windowContentTransitions">true</item> <item name="android:windowEnterTransition">@transition/fade</item> <item name="android:windowExitTransition">@transition/fade</item> </style>

    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.
  24. None
  25. None
  26. None
  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.
  28. None
  29. To make a screen transition animation between two activities that

    have a shared element: 1. Enable window content transitions in your style. <item name="android:windowContentTransitions">true</item> <item name="android:windowSharedElementEnterTransition">@transition/move_image</item> <item name="android:windowSharedElementExitTransition">@transition/move_image</item> 2. Specify a shared elements transition in your style. <moveImage/> transition/move_image.xml
  30. 4. Use the method. <ImageView 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.
  31. None
  32. None
  33. None
  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
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None