Animation In Android

Animation In Android Example

In this tutorial we will learn to implement the Android Animation with a simple example in Android Studio.

There are two types of animations in Android:

Tween Animation.

Creates an animation with a series of transformation with a single image

Frame Animation.
Creates an animation with the sequence of images.

Example:

Create a new project as AnimationInAndroid in Android Studio.
Create a new directory(folder) in res and name it as anim.
Create the following animation xml's in anim folder, these xml's are for tween animation.

File: bounce.xml:

In this xml, if we click on the image the image will bounce from the upwards.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Bounce animation-->
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

File: move.xml:


In this xml, if we click on the image the image will move from right to left.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Move animation-->
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="75%p"
        android:duration="1000" />

</set>

File: rotate.xml:


In this xml, if we click on the image the image will rotate.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate animation-->
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="10000"
        android:repeatMode="restart"
        android:repeatCount="infinite" />

</set>

File: scale.xml:

In this xml, if we click on the image the image will scale.


<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Scale animation-->
    <alpha
        android:duration="10000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

File: zoom.xml:

In this xml, if we click on the image the image will zoom in.


<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Zoom animation-->
    <scale
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3" >
    </scale>

</set>


In main layout do the following design.

File: activity_main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.hss_24.animationinandroid.MainActivity">

    <TextView
        android:gravity="center_horizontal"
        android:text="ANDROID LOVERS"
        android:textSize="22sp"
        android:textStyle="bold"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:gravity="center_horizontal"
        android:text="This is Tween Animation"
        android:textSize="22sp"
        android:textStyle="bold"
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ImageView
        android:layout_marginTop="10dp"
        android:id="@+id/img_tween"
        android:src="@drawable/ic_launcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/frame"
        android:layout_marginTop="60dp"
        android:text="click to show frame animation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


</LinearLayout>



Do the code for tween animation in main java file as follows.

File: MainActivity.java
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    public int clickcount=1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ImageView img=(ImageView)findViewById(R.id.img_tween);
        Button btn_frame=(Button)findViewById(R.id.frame);

        //   tween animation imageview
        img.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //   click count for imageview
                if (clickcount == 1) {
                    //   loading animation and setting it in imageview
                    Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.zoom);
                    img.startAnimation(animation);
                    Toast.makeText(MainActivity.this, "Zoom", Toast.LENGTH_SHORT).show();
                } else if (clickcount == 2) {
                    Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
                    img.startAnimation(animation);
                    Toast.makeText(MainActivity.this, "scale", Toast.LENGTH_SHORT).show();
                } else if (clickcount == 3) {
                    Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
                    img.startAnimation(animation);
                    Toast.makeText(MainActivity.this, "Rotate", Toast.LENGTH_SHORT).show();
                } else if (clickcount == 4) {
                    Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
                    img.startAnimation(animation);
                    Toast.makeText(MainActivity.this, "Move", Toast.LENGTH_SHORT).show();
                } else if (clickcount == 5) {
                    Animation animation = AnimationUtils.loadAnimation(getApplication(), R.anim.bounce);
                    img.startAnimation(animation);
                    Toast.makeText(MainActivity.this, "bounce", Toast.LENGTH_LONG).show();
                }

                if (clickcount == 5) {
                    clickcount = 1;
                } else {
                    clickcount++;
                }

            }
        });
        btn_frame.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(MainActivity.this, Frame.class);
                startActivity(i);
            }
        });

    }

}



Create a new Activity for frame animation and name it as Frame.
Do the following design in frame layout, as follows

File: activity_frame.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hss_24.animationinandroid.Frame">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="ANDROID LOVERS"
        android:textSize="22sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center_horizontal"
        android:text="This is Frame Animation"
        android:textSize="22sp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/img_frame"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" />

</LinearLayout>


Download the following images and paste it in the drawable folder.

   Images.zip

Create a new drawable xml, right click on drawable folder -> New -> Drawable resource file and name it as frame.
After creating the frame.xml set the images that you have in your drawable folder and set the duration.

File: frame.xml:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/frame0a" android:duration="50"/>
    <item android:drawable="@drawable/frame1a" android:duration="50"/>
    <item android:drawable="@drawable/frame2a" android:duration="50"/>
    <item android:drawable="@drawable/frame3a" android:duration="50"/>
    <item android:drawable="@drawable/frame4a" android:duration="50"/>
    <item android:drawable="@drawable/frame5a" android:duration="50"/>
    <item android:drawable="@drawable/frame6a" android:duration="50"/>
    <item android:drawable="@drawable/frame7a" android:duration="50"/>
    <item android:drawable="@drawable/frame8a" android:duration="50"/>
    <item android:drawable="@drawable/frame9a" android:duration="50"/>
    <item android:drawable="@drawable/frame10a" android:duration="50"/>
    <item android:drawable="@drawable/frame11a" android:duration="50"/>
    <item android:drawable="@drawable/frame12a" android:duration="50"/>

</animation-list>


Do the following code in Frame.java file, as follows.

File: Frame.java:
import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class Frame extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame);

        //   frame animation imageview
        final ImageView frame = (ImageView) findViewById(R.id.img_frame);
        //  set frame drawable to imageview
        frame.setBackgroundResource(R.drawable.frame);

        //   start frame animatio
        ((AnimationDrawable) frame.getBackground()).start();

        frame.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //   activate animation if it is not activated
                frame.setActivated(!frame.isActivated());
            }
        });
    }
}



Run the Application and enjoy the animation..


Output:
















Download project here














Thank You!!!

Please like and share...

Android Lovers 'n' Baig

Search This Blog

Animation In Android

Animation In Android Example

Comments

Post a Comment