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