Exploring Advanced Animation Techniques in Android: MotionLayout and Property Animations
Published: 2023-06-28 21:19:13



Animations provide visual feedback and enhance the user experience in your app, making it more intuitive and engaging. Android offers advanced animation techniques like MotionLayout and Property Animations. This article will guide you through these techniques with sample code and references.

## MotionLayout

MotionLayout is a type of layout derived from ConstraintLayout that allows you to animate changes to your app's user interface. It provides a rich set of features for managing motion and widget animation in your apps.

For instance, let's create an animation where an image transitions from the top-left corner of the screen to the center as we drag a slider.

First, we define our `MotionScene` in an XML file, which is a description of the animations to perform:

```xml
<!-- res/xml/motion_scene.xml -->
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Transition
        app:constraintSetStart="@+id/start"
        app:constraintSetEnd="@+id/end"
        app:duration="1000">
        <OnSwipe
            app:dragDirection="dragRight"
            app:touchAnchorId="@+id/slider" />
    </Transition>
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/image">
            <Layout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </Constraint>
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/image">
            <Layout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />
        </Constraint>
    </ConstraintSet>
</MotionScene>
```

Then, we apply this `MotionScene` to a `MotionLayout` in our layout file:

```xml
<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.motion.widget.MotionLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:layoutDescription="@xml/motion_scene"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/image" />

    <SeekBar
        android:id="@+id/slider"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
```
You can learn more about `MotionLayout` [here](https://developer.android.com/training/constraint-layout/motionlayout).

## Property Animations

Android's Property Animation API allows you to animate properties of any object, not just views. It supports a higher level of customization and flexibility compared to view animations.

For instance, let's animate the rotation of an image over 5 seconds:

```java
ImageView image = findViewById(R.id.image);
ObjectAnimator animation = ObjectAnimator.ofFloat(image, "rotation", 0f, 360f);
animation.setDuration(5000);
animation.setInterpolator(new LinearInterpolator());
animation.start();
```

In the

 code above, `ObjectAnimator.ofFloat(image, "rotation", 0f, 360f)` creates an animation that rotates `image` from 0 to 360 degrees. `animation.setDuration(5000)` sets the duration to 5 seconds, and `animation.setInterpolator(new LinearInterpolator())` applies a linear pace to the animation. Finally, `animation.start()` starts the animation.

For more complex sequences of animations, use `AnimatorSet`:

```java
ObjectAnimator rotate = ObjectAnimator.ofFloat(image, "rotation", 0f, 360f);
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(image, "alpha", 1f, 0f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(rotate).before(fadeOut);
animatorSet.setDuration(5000);
animatorSet.start();
```
In this example, `animatorSet.play(rotate).before(fadeOut)` sets the `fadeOut` animation to play after the `rotate` animation. 

More about Property Animations can be found [here](https://developer.android.com/guide/topics/graphics/prop-animation).

In conclusion, animations play a significant role in enhancing the user experience and making your Android app more lively and engaging. Android offers a variety of powerful tools and techniques, such as MotionLayout and Property Animations, which give developers great control and flexibility over their animations. By mastering these techniques, you can take your app to the next level.