How To Implement Animations in Android L Applications

Android L has been already released for developers and expected to be available in the market this fall. With the developer preview, it has already unleashed many of the incredible features and there is a plethora of other features that are yet to be unveiled.

If you are an Android app developer, you would love to know about one of the most interesting features that Android L offer, that is, it has revealed a bundle of latest animations, which can make your application appear more interactive and attractive.

Here is a list of a few of these up-to-the-minute animations along with a noteworthy tutorial that explains their implementation in an application.

#1. The Circular Reveal Effect

Altering the visibility of an element on the screen creates an amazing visual effect. The ValueAnimator offers a great option that can enhance the look and feel of the app with the circular reveal effect. For this what you need to do is, just implement the ViewAnimationUtil.createCircularReveal method and change the view visibility at a particular instant via an animation listener.

To hide and reveal a view, you will need to implement two similar methods. Let’s have a look at the code snippet for the two methods.

private void hideImageCircular() {
    int x = getX();
    int y = getY();
    int radius = getRadius();
    ValueAnimator anim =
            ViewAnimationUtils.createCircularReveal(mImageView, x, y, radius, 0);
    anim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            mImageView.setVisibility( View.INVISIBLE );
        }
    });
    anim.start();
}
private void revealImageCircular() {
    int x = getX();
    int y = getY();
    int radius = getRadius();
    ValueAnimator anim =
            ViewAnimationUtils.createCircularReveal(mImageView, x, y, 0, radius);
    anim.setDuration( 1000 );
    anim.addListener( new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
            super.onAnimationStart(animation);
            mImageView.setVisibility( View.VISIBLE );
        }
    });
    anim.start();

In the above code:

  1. The method revealImageCircular() has given a duration set , which defines the time to complete the entire animation on, however, hideImageCircular() method works instantly.
  2. The methods getX() and getY() are used to fetch the center point of the image for the provided X and Y axes.
  3. The method getRadius() has been used to just return the width of the view.

#2. The Ripples and Accents Effect

If you are not aware of any above mentioned technical points you may opt for Android Apps Developer for hire who can provide platform that now supports a slew of predefined style attributes that are associated with particular parts of the application, you can easily introduce two quite simple and beautiful animations into the User Interface widget of the app. These are ripples and accents.

Ripples offers a great way to acknowledge the user action on the UI element of the app. You can set a color for ripples by assigning a color value to the attribute “colorControlHighlight” in your app theme. Using the following line of code:

<item name=”android:colorControlHighlight”>#ColorCode</item>

Similarly, you can use the “colorAccent” property within the styles folder for setting a preferred color to the UI widgets like checkboxes; you can choose any color that perfectly fits your app theme without implementing state drawables and various images. You can add the following line of code:

<item name=”android:colorAccent”>#ColorCode</item>

#3. The Activity Transitions Effect

Android L also facilitates developers to implement activity transition animations for polishing the visual appearance of the app with animations like fading, exploding and sliding. For implementing these transitions, you will need to request the content transitions feature prior to setting the content view, while entering and exiting the activities. For this you can use the following lines of code:

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

For setting the transitions via style, one can simply use the two methods –

  • getWindow().setExitTransition( Transition )
  • getWindow().setEnterTransition( Transition )

These two methods will tell your activities about how to react while opening and closing.

For explode transition:
The code for moving from the MainActivity to another activity is – ExplodeAnimationActivity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    getWindow().setEnterTransition( new Explode() );
    getWindow().setExitTransition( new Explode() );
    setContentView(R.layout.activity_explode_animation);
}
@Override
public void onBackPressed() {
    super.onBackPressed();
    finishAfterTransition();
}

The code for moving from the ListFragment to another activity is – ListFragment:

getActivity().getWindow().setExitTransition( new Explode() );
intent = new Intent( getActivity(), ExplodeAnimationActivity.class );
startActivity( intent );

In the above code, the onBackPressed method is quite imperative, since it tells the operating system that the animation must complete before it hides  the second activity calling. You can use the above mentioned lines of code for implementing the three different types of activity transitions.

Moreover, you can also deploy another useful tool – Transition.TransitionListener. When this tool is implemented while entering or leaving the transition, it will let you operate several tasks as and when desired during the animation life cycle; it thus, will offer you an amazing control and allow you to define how your application must act. However, it is advisable to remove this Listener in onDestroy, so as for preventing a leak.

For implementing the Transition.TransitionListener, you can use the following lines of code –

getWindow().getEnterTransition().addListener( new Transition.TransitionListener {
    @Override
    public void onTransitionStart(Transition transition) {
    }
    @Override
    public void onTransitionEnd(Transition transition) {
    }
    @Override
    public void onTransitionCancel(Transition transition) {
    }
    @Override
    public void onTransitionPause(Transition transition) {
    }
    @Override
    public void onTransitionResume(Transition transition) {
    }
});

For Fade Transition:

For Slide Transition:

Wrapping Up:

You can deploy simple yet impactful animations in your application and create an impressive and highly interactive app for upcoming Android L. you can use the above mentioned animation effects in a simple and convenient fashion by implementing the specified lines of code.

Author Bio:

Juana Steves is a veteran technical writer associated with Xicom Technologies – a renowned Android Apps Development Company in India. You can get in touch with her, in order to opt Android App Developer for hire as per her best suggestions.

Speak Your Mind

*

CommentLuv badge