Animations In Android
There are four types of animations in android:
1. Translate Animation - to move the object from one place to another place.
2. Scale Animation - to resize the object or zoom the object.
3. Rotate Animation- to rotate the object clockwise or anti-clockwise.
4. Fade Animation - to make visible and invisible the object.
And for each animation we can add the effects, in android framework we call it as Interpolators, those are:
|
|
An interpolator whose rate
of change starts andends slowly
but accelerates through the middle.
|
|
|
An interpolator whose rate
of change starts out slowly
and then accelerates.
|
|
|
An interpolator whose change
starts backward then flings forward.
|
|
|
An interpolator whose change
starts backward, flings forward and
overshoots the target value, then finally
goes back to the final value.
|
|
|
An interpolator whose change bounces
at the end.
|
|
|
An interpolator whose animation repeats
for a specified number of cycles.
|
|
|
An interpolator whose rate of change
starts out quickly and and then
decelerates.
|
|
|
An interpolator whose rate of change
is constant.
|
|
|
An interpolator whose change flings
forward and overshoots the last value
then comes back.
|
|
|
An interface that allows you to
implement your own interpolator.
|
Here we are going to see
simple experiment with all four animations and few interpolators. Follow the below steps:
1. Create a new android studio project. And go to
web browser download a ball image.
2. Copy that ball image and paste it inside the drawable folder in the project.
3. Go to activity_main.xml and add an ImageView and set this ball image to the ImageView.
4. Also add seven buttons in the layout.
5. first four buttons are to make animation and last three buttons are to add effects.
6. Add onClick for each and every button and create the equivalent method in MainActivity.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.animation.MainActivity">
<ImageView
android:id="@+id/ball_img"
android:layout_width="68dp"
android:layout_height="69dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="@drawable/ball"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="7dp"
android:layout_marginStart="16dp"
android:text="Translate"
android:onClick="translate"
app:layout_constraintBaseline_toBaselineOf="@+id/button2"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scale"
android:onClick="scale"
app:layout_constraintBaseline_toBaselineOf="@+id/button3"
app:layout_constraintEnd_toStartOf="@+id/button3"
app:layout_constraintStart_toEndOf="@+id/button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginEnd="1dp"
android:text="Rotate"
android:onClick="rotate"
app:layout_constraintBottom_toTopOf="@+id/button7"
app:layout_constraintEnd_toStartOf="@+id/button4"
app:layout_constraintStart_toEndOf="@+id/button2" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:text="Fade"
android:onClick="fade"
app:layout_constraintBaseline_toBaselineOf="@+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button3" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginStart="32dp"
android:text="Bounce"
android:onClick="bounce"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginStart="21dp"
android:text="OverShoot"
android:onClick="overShoot"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@+id/button5" />
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:text="Accelarate"
android:onClick="accelarate"
app:layout_constraintBaseline_toBaselineOf="@+id/button6"
app:layout_constraintStart_toEndOf="@+id/button6" />
</android.support.constraint.ConstraintLayout>
7. Create new folder for animation. Right click on
res folder
-> go to
New -> Android resource directory.
8. A new window will be open in that choose
Resource type as
anim and
Directory name as
anim.
9. A new
anim folder will be created under
res folder.
10. And right click on
anim folder and create
4 Animation resource file.
11. Give the name as
translate and click
OK.
12. Same way create other 3 files, and name those as scale, rotate and fade.
13. Copy the below text paste inside each and every xml file.
translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="1000" />
<translate
android:startOffset="1000"
android:fromXDelta="0%p"
android:toXDelta="-75%p"
android:duration="1000"/>
</set>
scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.5"
android:toXScale="3.0"
android:pivotX="0%"
android:pivotY="0%"
android:fromYScale="0.5"
android:toYScale="3.0"
android:duration="1000" />
<scale
android:startOffset="1000"
android:fromXScale="3.0"
android:toXScale="0.5"
android:pivotX="0%"
android:pivotY="0%"
android:fromYScale="3.0"
android:toYScale="0.5"
android:duration="1000"/>
</set>
rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"/>
<rotate
android:fromDegrees="360"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:startOffset="1000"/>
</set>
fade.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000" />
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="1000"
android:duration="1000" />
</set>
14. Go to
MainActivity.java and load the animation for the image.
MainActivity.java
package com.example.animation;
import android.app.Activity;
import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.BounceInterpolator;
import android.view.animation.OvershootInterpolator;
import android.widget.ImageView;
public class MainActivity extends Activity {
private Animation anim;
private ImageView mBallImage;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
mBallImage = (ImageView) findViewById(R.id.ball_img);
}
public void translate(View view) {
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
mBallImage.startAnimation(anim);
}
public void scale(View view) {
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
mBallImage.startAnimation(anim);
}
public void rotate(View view) {
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
mBallImage.startAnimation(anim);
}
public void fade(View view) {
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.fade);
mBallImage.startAnimation(anim);
}
public void bounce(View view) {
anim.setInterpolator(new BounceInterpolator());
mBallImage.startAnimation(anim);
}
public void overShoot(View view) {
anim.setInterpolator(new OvershootInterpolator());
mBallImage.startAnimation(anim);
}
public void accelarate(View view) {
anim.setInterpolator(new AccelerateInterpolator());
mBallImage.startAnimation(anim);
}
}
15. Done. Run the code and check all these animations.
