Using Custom Animations for Google’s Material Design

Written by Saran on January 29, 2015

Custom Animations are probably Google’s most noticeable addition to Material Design. What they let you achieve is a variety of effects when a certain action or input is observed within an Activity. For the purposes of this post I will be using a few of developer oriented terms such as Intent and Activity so if you are unfamiliar with them, then I do advise you to just look up these terms. Now Material Design is different with most things because of the 3D approach it entails which is why a lot of its animations are implemented and run differently as well. It’s a good idea certainly as it adds a touch of simplicity to the apps and sites you come up with. Custom animations are a by product of that; they let you implement different aesthetic affects to your UI, creating an environment which engages and appeals to the user.Now there are certain aspects within Custom Animations which Google glosses over.

Touch feedback
Circular Reveal
Activity transitions
Curved motion
View state changes

Touch Feedback

This feedback is used to provide instant effects at the point of contact in an Android activity.The RippleDrawable class is the default class for the animations effect over touch states. You can add this snippet to the XML file to add the effect. You also have the option to add a different color to the RippleDrawable object by calling upon the android:colorControlHighlight attribute.

?android:attr/selectableItemBackground for a bounded ripple
?android:attr/selectableItemBackgroundBorderless for a ripple that extends beyond the view

Activity transitions

You can also show a transition in an activity by using the following snip of code. Transitions add connectivity between different elements of an activity and show relation to the users. The following code is for the exit transition. Now notice that transition states can vary in being custom but there are certain states of the transition which are categorized in their timing within the Activity’s life cycle.

An enter transition determines how views in an activity enter the scene.
An exit transition determines how views in an activity exit the scene..
A shared elements transition determines how views that are shared between two activities transition between these activities.

There are also three primary kinds of animations which are thus far available for you to experiment with in transitions.

explode - Moves views in or out from the center of the scene.
slide - Moves views in or out from one of the edges of the scene.
fade - Adds or removes a view from the scene by changing its opacity.

public class MyActivity extends Activity {

JAVA

@Override
    protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        // enable transitions
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        setContentView(R.layout.activity_my);
    }

    public void onSomeButtonClicked(View view) {
        getWindow().setExitTransition(new Explode());
        Intent intent = new Intent(this, MyOtherActivity.class);
        startActivity(intent,
                      ActivityOptions
                          .makeSceneTransitionAnimation(this).toBundle());
    }
}

The other transitions can be Slide or Fade so instead of Explode in the above code you can use either of those to set up a transition for your created button or touch area. Conversely, you can also specify the enter transition for any activity by using the setEnterTransition method instead of setExitTransition etc.Alternately you can also setup a transition for the activation of an activity. The transition gets activated when you launch another activity as

JAVA

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Curved Motion

Custom patterns are extensively rendered within Material for time interpolation and movement patterns. Curved Motion is the feature that allow you to work across custom curve drawing and rendering and can be a particularly useful feature to add more aesthetic detail to your app’s design.

The PathInterpolator class is a new interpolator 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. You can also define a path interpolator as an XML resource:

JAVA

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

The Pathinterpolator class’s object can also be passed to Animator.setInterpolator() method and that’s an extension from the ObjectAnimator that allows you to animate co-ordinates along a path using multiple properties at once.

JAVA

ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

The above example uses a Path object to draw the X and Y properties of a view.

The Reveal Effect

My last covered topic for this post is on Reveal which gives you a custom animation when you enable or hide a UI element.To reveal a previously invisible view using this effect:

JAVA

// previously invisible view
View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());

// create the animator for this view (the start radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);

// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();

The ViewAnimationUtils.createCircularReveal() method lets you animate a clipping circle to reveal or hide a view.The Hide View code differs in the manner that you have to create a listener for the View before you can use myView.setVisiblity(View.INVISIBLE)

Other Aspects

Digging deeper from Activity transitions can take you to View state changes so you can even define animations for Views and other Vectors within your app. That is of course a drilled down version of custom animations but the idea here is that you developers get playing with what Material is offering. The core motivation behind Material is to get the designers excited and worry less about conventions and standards whereas it’s also about making app developers be more centered on giving an aesthetic in the application that caters to the customer’s needs. Customized animations and effects are a great way to achieve that but as you will see with Google, Material is a lot more comprehensive and a lot more extendable.Source: https://developer.android.com

Article written by guest author Uzair Tajjuddin.Uzair Tajjuddin is a blogger by passion who love to write on different web design and development related topics.