Animation on Custom View using AndroidViewAnimations library in Android Tutorial

Udemy Generic 728x90

Objective

In this tutorial we learn how to implement animation on Custom view using AndroidViewAnimations library in Android Application using simple example.

 


 

 

Animation is the process of making effect or movement on the any still view.

In this tutorial, we will implement animation on the custom view using AndroidViewAnimations library. We will create a form view and implement the animation on this view.
 

Step 2

Creating project

Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.
 

Step 3

Adding support library in the dependencies

To compile the AndroidViewAnimations library, we need to add the library in the app’s dependencies. Open the app’s build.gradle file. Add the project in the dependencies. It will compile the library at run time.

<br />
dependencies {<br />
     compile 'com.nineoldandroids:library:2.4.0'<br />
     compile 'com.daimajia.easing:library:[email protected]'<br />
     compile 'com.daimajia.androidanimations:library:[email protected]'<br />
     compile 'com.android.support:recyclerview-v7:23.1.1'<br />
}<br />

 

Step 4

Implementation of Animation on any Custom view

We will call the with(), duration() and playOn method of YoYo class. These method used to make the animation on your view.

<br />
YoYo.with(Techniques.Tada) // Tada is a Animation type.<br />
    .duration(700)<br />
    .playOn(Your view);<br />

 

Step 5

Creating a layout

We will create a form view. So we need to add the EditText and Button widget in layout file. We will perform the process on click the submit button.

<br />
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;<br />
&lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;<br />
    android:orientation=&quot;vertical&quot;<br />
    android:layout_width=&quot;match_parent&quot;<br />
    android:padding=&quot;@dimen/activity_horizontal_margin&quot;<br />
    android:layout_height=&quot;match_parent&quot;&gt;</p>
<p>    &lt;LinearLayout<br />
        android:padding=&quot;@dimen/activity_horizontal_margin&quot;<br />
        android:id=&quot;@+id/edit_area&quot;<br />
        android:orientation=&quot;vertical&quot;<br />
        android:layout_width=&quot;match_parent&quot;<br />
        android:layout_height=&quot;wrap_content&quot;&gt;</p>
<p>        &lt;EditText<br />
            android:hint=&quot;Username&quot;<br />
            android:layout_width=&quot;match_parent&quot;<br />
            android:layout_height=&quot;wrap_content&quot; /&gt;</p>
<p>        &lt;EditText<br />
            android:hint=&quot;Password&quot;<br />
            android:layout_width=&quot;match_parent&quot;<br />
            android:layout_height=&quot;wrap_content&quot; /&gt;<br />
    &lt;/LinearLayout&gt;</p>
<p>    &lt;LinearLayout<br />
        android:padding=&quot;@dimen/activity_horizontal_margin&quot;<br />
        android:orientation=&quot;vertical&quot;<br />
        android:layout_width=&quot;wrap_content&quot;<br />
        android:layout_height=&quot;wrap_content&quot;&gt;</p>
<p>        &lt;Button<br />
            android:id=&quot;@+id/submit&quot;<br />
            android:text=&quot;Submit&quot;<br />
            android:layout_width=&quot;wrap_content&quot;<br />
            android:layout_height=&quot;wrap_content&quot; /&gt;<br />
    &lt;/LinearLayout&gt;</p>
<p>&lt;/LinearLayout&gt;<br />

Animation-on-Custom

 

Step 6

Implement animation on the form view

When user click submit buton, we call the setOnClickListener() method. In this method, we call the with(), duration and playOn() method of YoYo class of the library. This is used to set the animation technique and time duration to perform animation with in duration on custom view.

<br />
public class MainActivity extends Activity {<br />
    @Override<br />
    protected void onCreate(Bundle savedInstanceState) {<br />
        super.onCreate(savedInstanceState);<br />
        setContentView(R.layout.activity_main);</p>
<p>        // this is click listener method. It call when use click on the submit button<br />
        findViewById(R.id.submit).setOnClickListener(new View.OnClickListener() {<br />
            @Override<br />
            public void onClick(View v) {</p>
<p>                YoYo.with(Techniques.Tada)  // set the animation techniques<br />
                        // set the time duration, with in animation to be performed<br />
                        .duration(700)<br />
                        .playOn(findViewById(R.id.edit_area)); // set your view</p>
<p>            }<br />
        });<br />
    }<br />
}<br />


 

Step 7

Animation techniques

There are following animation techniques used in this library:

Attension

  • Flash – It animate the view as sudden flash light on and off.
  • Pulse – It animate the view like heart is beating.
  • RubberBand – It is starched the view and leave to re-size the view.
  • Shake – It makes the view shaking.
  • Swing – It animate, the center is fixed and left end and right end are shaking up and down.
  • Wobble – It makes the view is shaking horizontally.
  • Bounce – It makes the view bounce up.
  • Tada – It fixed the center and slight rotate the view.
  • StandUp – It animate the view like view is standing up.
  • Wave – It is similar to swing.

Attension

  • Hinge – It animate like set into the wall and hinged at the bottom.
  • RollIn – It display the view like view is rolling from left to right.
  • RollOut – It remove the view like view is rolling to right.
  • Landing – it display the view from zoom out.
  • TakingOff – It remove the element with zooming the view.
  • DropOut – It animate the view like view is dropping from top.

Bounce

  • BounceIn – It displays the view from the center.
  • BounceInDown – It animate the view like view comes from the top.
  • BounceInLeft – It animate the view like view comes from left.
  • BounceInRight – It animate the view like view comes from right.
  • BounceInUp – It animate the view like view comes from bottom.

Fade

  • FadeIn – It displays the view with fade.
  • FadeInUp – It fades the view which comes from the bottom.
  • FadeInDown – It fades the view which comes from the up.
  • FadeInLeft- It fades the view which comes to left side.
  • FadeInRight – It fades the view which comes to right side.
  • FadeOut – It’s opposite the FadeIn means remove the view with fade.
  • FadeOutDown – Its opposite the FadeInDown Animation.
  • FadeOutLeft – Its opposite the FadeInLeft Animation.
  • FadeOutRight – Its opposite the FadeInRight Animation.
  • FadeOutUp – Its opposite of FadeInUp Animation.

Flip

  • FlipInX – It displays the view via filp movement horizontally.
  • FlipOutX – It removes the view by filp movement horizontally.
  • FlipOutY – It removes the view by filp movement vertically.

Rotate

  • RotateIn – It rotate the view at 360 degree.
  • RotateInDownLeft – It rotate the view from left to down.
  • RotateInDownRight – It rotate the view from right to down.
  • RotateInUpLeft – It rotate the view from left to up.
  • RotateInUpRight – It rotate the view from right to up.
  • RotateOut – It rotate view to remove at 360 degree.
  • RotateOutDownLeft – It remove the view by rotation to left down.
  • RotateOutDownRight – It remove the view by rotation to right down.
  • RotateOutUpLeft – It remove the view by rotation to left up.
  • RotateOutUpRight – It remove view by rotation to right up.

Slide

  • SlideInLeft – It displays view by sliding from left.
  • SlideInRight – It displays view by sliding from right.
  • SlideInUp – It displays view by sliding from up.
  • SlideInDown – It displays view by sliding from down.
  • SlideOutLeft – It removes view by sliding to left.
  • SlideOutRight – It removes view by sliding to right.
  • SlideOutUp – It removes view by sliding to up.
  • SlideOutDown – It remove the view by sliding to down.

Zoom

  • ZoomIn – It displays with zooming movement.
  • ZoomInDown – It zoom the view and it come from down.
  • ZoomInLeft – It zoom the view and it come from left.
  • ZoomInRight – It zoom the view and it come from right.
  • ZoomInUp – It zoom the view and it come from up.
  • ZoomOut – It zoom out the view.
  • ZoomOutDown – It zoom out the view to down.
  • ZoomOutLeft – It zoom out the view to left.
  • ZoomOutRight – It zoom out the view to right.
  • ZoomOutUp – It zoom out the view to up.

 

Udemy Generic 728x90

Spread the word. Share this post!