Move a View with Animation

Objects on screen will often need to be repositioned. This can occur due to user interaction or some processing done behind the scenes. Instead of immediately updating the objects position, which would cause it to blink from one area to another, you should use an animation to move it from the starting position to its end position.

Android provides ways that allow you to reposition your view objects on screen, such as the ObjectAnimator. You can provide the end position you want the object to settle on, as well as the duration of the animation. You can combine this with time interpolators to control the acceleration or decceleration of the animation.

Change the view position with ObjectAnimator

The ObjectAnimator API provides an easy way to change the properties of a view with a specified duration. It contains static methods to create instances of ObjectAnimator depending on what type of attribute you are animating. When repositioning your views on screen you will use the translationX and translationY attributes.

Here is an example of an ObjectAnimator that moves the view to 100 pixels from the left of the screen in 2 seconds:

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

This example uses the ObjectAnimator.ofFloat() method since the translation values have to be floats. The first parameter is the view you want to animate. The second parameter is the property you are animating. Since the view needs to be moved horizontally, the translationX property is used. The last parameter is the end value of the animation. Since this value is 100, it will be that many pixels from the left of the screen.

The next method specifies how long the animation should take in milliseconds. In this example the animation will run for 2 seconds (2000 milliseconds).

The last method causes the animation to run which will update the view's position on screen.

For more information on using ObjectAnimator, see Animating with ObjectAnimator.

Add curved motion

While using the ObjectAnimator is convenient, by default it will reposition the view using a straight line between the starting and ending points. Material design relies on curves for not only the timing of an animation, but also the spatial movement of objects on the screen. Using curved motion can help give your app a more material feel while making your animations more interesting.

Use PathInterpolator

The PathInterpolator class is a new interpolator introduced in Android 5.0 (API 21). It is based on a Bézier curve or a Path object. This interpolator specifies a motion curve in a 1x1 square, with anchor points at (0,0) and (1,1) and control points as specified using the constructor arguments. One way to create a PathInterpolator is by creating a Path object and supplying it to the PathInterpolator:

// arcTo() and PathInterpolator only available on API 21+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val pathInterpolator = PathInterpolator(path)
}

// arcTo() and PathInterpolator only available on API 21+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  PathInterpolator pathInterpolator = new PathInterpolator(path);
}

You can also define a path interpolator as an XML resource:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.4"
    android:controlY1="0"
    android:controlX2="1"
    android:controlY2="1"/>

Once you have created a PathInterpolator object, you can pass it to the Animator.setInterpolator() method. The Animator will then use the interpolator to determine the timing or path curve when it is started.

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = pathInterpolator
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(pathInterpolator);
animation.start();

Define your own path

The ObjectAnimator class has new constructors that enable you to animate coordinates along a path using two or more properties at once along with a path. For example, the following animator uses a Path object to animate the X and Y properties of a view:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

Here is what the arc animation looks like:

If you don't want to create your own timing or path curves, the system provides XML resources for the three basic curves in the material design specification:

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml