Animating fragment navigation

Navigating between fragments is easy to do, but it appears very sharp and does not provide a smooth user experience. We can improve this by adding transitions to the navigation.

How to do it...

When navigating between fragments, we can add an animation, or rather a transition to make the overall change seem less sharp and more appealing:

1. One of the simplest ways to add animations to transitions is to simply make use of the built-in animations, such as fade or open. This is set by calling the SetTransition() method:

   SupportFragmentManager
     .BeginTransaction()
     .SetTransition(FragmentTransaction.TransitFragmentOpen)
     .Replace(Resource.Id.fragmentContainer, content)
     .AddToBackStack(null)
     .Commit();

In order to create more fragment transitions, we have to create animations. This is a relatively straightforward process, but it does differ depending on the Android version we are supporting. Typically, we would create either two or four separate animations, for each stage of the transition:

1. For Android versions below 3.0, we can make use of animation resource files, saved in the anim resource folder. Here is an example of one of the required animations, card_slide_in_bottom.xml:

   <?xml version="1.0" encoding="utf-8"?>
   <translate   xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/decelerate_interpolator"
     android:fromYDelta="50%p"
     android:toYDelta="0"
     android:duration="@android:integer/config_mediumAnimTime"/>

2. In order to use these custom animations in the actual navigation, specify the four animation resources to use in the SetCustomAnimations() method:

   SupportFragmentManager
     .BeginTransaction()
    .SetCustomAnimations(
    Resource.Animation.card_slide_in_bottom,
    Resource.Animation.card_slide_out_top,
    Resource.Animation.card_slide_in_top,
    Resource.Animation.card_slide_out_bottom)
     .Replace(Resource.Id.fragmentContainer, content)
     .AddToBackStack(null)
     .Commit();

Similar to using animations, on Android versions 3.0 and above, we have to make use of the new ObjectAnimator and ValueAnimator types. Let's take a look at the following steps:

1. Here is an example of one resource, card_flip_left_in.xml, saved in the animator resource folder:

   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android" >
     <objectAnimator
       android:valueFrom="1.0"
       android:valueTo="0.0"
       android:propertyName="alpha"
       android:duration="0"/>
     <objectAnimator
       android:valueFrom="-180"
       android:valueTo="0"
       android:propertyName="rotationY"
       android:interpolator="@android:anim/accelerate_decelerate_interpolator"
       android:duration="@integer/card_flip_time_full"/>
     <objectAnimator
       android:valueFrom="0.0"
       android:valueTo="1.0"
       android:propertyName="alpha"
       android:startOffset="@integer/card_flip_time_half"
       android:duration="1" />
   </set>

2. To add custom animations on Android versions 3.0 and above, we use these animators:

   FragmentManager
     .BeginTransaction()
    .SetCustomAnimations(
    Resource.Animator.card_flip_right_in,
    Resource.Animator.card_flip_right_out,
    Resource.Animator.card_flip_left_out,
    Resource.Animator.card_flip_left_in)
     .Replace(Resource.Id.fragmentContainer, content)
     .AddToBackStack(null)
     .Commit();

How it works...

Setting animations between fragment navigations just requires that we invoke a single method, with values of the various animation resources.

The simplest way to add an animation is to use one of the predefined transitions. These simple animations are specified using the SetTransition() method and passing a value from the FragmentTransaction type. The available animations are: TransitFragmentOpen, TransitFragmentClose, and TransitFragmentFade. The first two are usually used by the Android system; however, the last one can also be used by our app.

A more flexible means for specifying an animation is to use the SetCustomAnimations() method. This method takes four parameters, push enter, push exit, pop enter, and pop exit. Depending on the target Android version, we will either specify Animation resources (Android versions below 3.0) or Animator resources (Android version 3.0 and above). The first two animations apply to the transitions taking place when a new transaction is being placed on the stack, and the last two are for when the transaction is popped off the stack.

A view animation, which is available from the versions of Android below 3.0, can perform a series of simple transformations (position, size, rotation, and transparency) on the contents of a View object. These animation resources are placed in the anim folder, and each resource can contain combinations of the various transformations.

Property animators, introduced in Android version 3.0, provide a framework that allows us to animate any object's properties over time, even if that object is not a view. These animation resources are placed in the animator resource folder and are not available for the older Android versions.

The view animation system is relatively limited in that it only provides the ability to animate View objects and only a few aspects of them. The view animation system also only modifies where the view was drawn and not the actual view.

See also

• Animating view and object properties
• Animating views on the UI