March 26, 2016

In this tutorial I’m going to show you how to apply animation through xml. All we need to do is create a folder in the res and name it as anim, and will put all the animation file in this folder. Android provided us a class called ‘Animation’. Below is the description of implementing an animation in your program.


Blink.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:interpolator="@android:anim/accelerate_interpolator"
        android:duration="800"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>
</set>


Bounce.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/bounce_interpolator">
    <scale
        android:duration="800"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

clockwise.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="5000" >
    </rotate>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:startOffset="5000"
        android:fromDegrees="360"
        android:toDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="5000" >
    </rotate>
</set>

fadein.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />
</set>

fadeout.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />
</set>

movetoright.xml
<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="80%p"
        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="700"
        android:repeatMode="restart"
        android:repeatCount="infinite"
        android:interpolator="@android:anim/cycle_interpolator"/>
</set>

sequential.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromXDelta="0%p"
        android:startOffset="300"
        android:toXDelta="75%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="1100"
        android:toYDelta="70%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromXDelta="0%p"
        android:startOffset="1900"
        android:toXDelta="-75%p" />
    <translate
        android:duration="800"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="2700"
        android:toYDelta="-70%p" />
    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/cycle_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:startOffset="3800"
        android:toDegrees="360" />
</set>

slide.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="800"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

slideup.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        android:duration="800"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="0.0" />
</set>

together.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator">
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="4000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="4"
        android:toYScale="4">
    </scale>
    <!-- Rotate 180 degrees -->
    <rotate
        android:duration="500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="restart"
        android:toDegrees="360" />
</set>

zoomin.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3"
        android:toYScale="3" >
    </scale>
</set>

zoomout.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" >
    </scale>
</set>

The above are the certain animations, below is the activity.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.animation.MainActivity"
    tools:showIn="@layout/activity_main">
    <TextView
        android:id="@+id/textAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:text="TechnoBlogger" />
    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <Button
                android:id="@+id/buttonZoomIn"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textAnimation"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="50dp"
                android:text="Zoom In" />
            <Button
                android:id="@+id/buttonZoomOut"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Zoom Out" />
            <Button
                android:id="@+id/buttonFadeIn"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Fade In" />
            <Button
                android:id="@+id/buttonFadeOut"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Fade Out" />
            <Button
                android:id="@+id/buttonBlink"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Blink" />
            <Button
                android:id="@+id/buttonRotate"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Rotate" />
            <Button
                android:id="@+id/buttonClockwise"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Clockwise" />
            <Button
                android:id="@+id/buttonMove"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Move" />
            <Button
                android:id="@+id/buttonSlideUp"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Slide Up" />
            <Button
                android:id="@+id/buttonSlideDown"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Slide Down" />
            <Button
                android:id="@+id/buttonBounce"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Bounce" />
            <Button
                android:id="@+id/buttonSequential"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Sequential" />
            <Button
                android:id="@+id/buttonTogether"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:text="Together" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

MainActivity.java
package com.animation;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    Animation _animate;
    Button _buttonFadeIn, _buttonFadeOut, _buttonZoomIn, _buttonZoomOut, _buttonBlink, _buttonRotate,
            _buttonBounce, _buttonMove, _buttonSlideDown, _buttonSlideUp, _buttonClockwise, _buttonTogether, _buttonSequential;
    TextView textAnimate;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textAnimate = (TextView) findViewById(R.id.textAnimation);
        _buttonFadeIn = (Button) findViewById(R.id.buttonFadeIn);
        _buttonFadeOut = (Button) findViewById(R.id.buttonFadeOut);
        _buttonZoomIn = (Button) findViewById(R.id.buttonZoomIn);
        _buttonZoomOut = (Button) findViewById(R.id.buttonZoomOut);
        _buttonBlink = (Button) findViewById(R.id.buttonBlink);
        _buttonRotate = (Button) findViewById(R.id.buttonRotate);
        _buttonBounce = (Button) findViewById(R.id.buttonBounce);
        _buttonMove = (Button) findViewById(R.id.buttonMove);
        _buttonSlideUp = (Button) findViewById(R.id.buttonSlideUp);
        _buttonSlideDown = (Button) findViewById(R.id.buttonSlideDown);
        _buttonClockwise = (Button) findViewById(R.id.buttonClockwise);
        _buttonTogether = (Button) findViewById(R.id.buttonTogether);
        _buttonSequential = (Button) findViewById(R.id.buttonSequential);
        _buttonFadeIn.setOnClickListener(this);
        _buttonFadeOut.setOnClickListener(this);
        _buttonZoomIn.setOnClickListener(this);
        _buttonZoomOut.setOnClickListener(this);
        _buttonBlink.setOnClickListener(this);
        _buttonRotate.setOnClickListener(this);
        _buttonBounce.setOnClickListener(this);
        _buttonMove.setOnClickListener(this);
        _buttonSlideUp.setOnClickListener(this);
        _buttonSlideDown.setOnClickListener(this);
        _buttonClockwise.setOnClickListener(this);
        _buttonTogether.setOnClickListener(this);
        _buttonSequential.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.buttonFadeIn:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(),
                        R.anim.bounce);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonFadeOut:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fadeout);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonZoomIn:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(),
                        R.anim.zoomin);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonZoomOut:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.zoomout);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonBlink:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(),
                        R.anim.blink);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonRotate:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonBounce:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.bounce);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonSlideUp:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slideup);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonSlideDown:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slidedown);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonClockwise:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.clockwise);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonMove:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonTogether:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.together);
                textAnimate.startAnimation(_animate);
                break;
            case R.id.buttonSequential:
                _animate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.sequential);
                textAnimate.startAnimation(_animate);
                break;
        }
    }
}

This is however a few list of animations, you all can experiment with it a lot different way. So post your queries, and till then Happy Coding.