Monday 1 June 2015

Anim with XML on click button android example

Posted by devraj chavda on 09:36 Animation XML , XML No comments

Hello friends, In this android tutorial i explained how to give animations using XML.Creating animation is very simple to give animation effect on object. Animations can be performed through either XML or JAVA code.Here i covered basic animations like fade in, fade out, scale, rotate, slide up-down etc. KNOW MORE.

Let's go for coding - CREATE NEW ANDROID PROJECT

View Video :

Step 1: Create xml for perform animation

This file should be located res/anim/animation.xml. If you don’t have anim folder in your res/ directory create one. Following is example of simple animation using XML.

blink.xml

<?xml version="1.0" encoding="utf-8"?>

<alpha android:fromAlpha="0.0"

android:toAlpha="1.0"

android:interpolator="@android:anim/accelerate_interpolator"

android:duration="600"

android:repeatMode="reverse"

android:repeatCount="2"/>

</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="500"

android:fromXScale="1.0"

android:fromYScale="0.0"

android:toXScale="1.0"

android:toYScale="1.0" />

</set>

fade_in.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>

fade_out.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="1.0"

android:interpolator="@android:anim/accelerate_interpolator"

android:toAlpha="0.0" />

</set>

flip.xml

<?xml version="1.0" encoding="utf-8"?>

<scale

android:interpolator="@android:anim/linear_interpolator"

android:fromXScale="1.0"

android:toXScale="1.0"

android:fromYScale="1.0"

android:toYScale="0.0"

android:pivotY="100%"

android:fillAfter="false"

android:duration="200" />

<translate

android:fromYDelta="1.0"

android:toYDelta="100%"

android:duration="300"/>

</set>

move.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="75%p"

android:duration="800" />

</set>

rotate.xml

<?xml version="1.0" encoding="utf-8"?>

<rotate android:fromDegrees="0"

android:toDegrees="360"

android:pivotX="50%"

android:pivotY="50%"

android:duration="600"

android:repeatMode="restart"

android:repeatCount="4"

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_down.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true">

<scale

android:duration="500"

android:fromXScale="1.0"

android:fromYScale="0.0"

android:toXScale="1.0"

android:toYScale="1.0" />

</set>

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true" >

<scale

android:duration="500"

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="2"

android:toYScale="2" >

</scale>

<rotate

android:duration="500"

android:fromDegrees="0"

android:pivotX="50%"

android:pivotY="50%"

android:repeatCount="4"

android:repeatMode="restart"

android:toDegrees="360" />

</set>

wav_scale2.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/linear_interpolator" >

<alpha

android:duration="100"

android:fromAlpha="0.0"

android:toAlpha="1.0" />

<scale

android:duration="200"

android:fromXScale="0.5"

android:fromYScale="0.5"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="1.5"

android:toYScale="1.5" />

<scale

android:duration="100"

android:fromXScale="1.5"

android:fromYScale="1.5"

android:pivotX="50%"

android:pivotY="50%"

android:startOffset="200"

android:toXScale="1.0"

android:toYScale="1.0" />

</set>

zoom_in.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>

zoom_out.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>

Step 2: Write code into activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<LinearLayout

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_margin="2dp"

android:layout_weight="1"

android:orientation="vertical" >

<Button

android:id="@+id/Blink"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="blink" />

<Button

android:id="@+id/Fadein"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="fade in" />

<Button

android:id="@+id/Flip"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="flip" />

<Button

android:id="@+id/Rotate"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="rotate" />

<Button

android:id="@+id/Slidedown"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="slide down" />

<Button

android:id="@+id/Together"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="together" />

<Button

android:id="@+id/Zoomin"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="zoom in" />

</LinearLayout>

<LinearLayout

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_margin="2dp"

android:layout_weight="1"

android:orientation="vertical" >

<Button

android:id="@+id/Bounce"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="bounce" />

<Button

android:id="@+id/Fadeout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="fade out" />

<Button

android:id="@+id/Move"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="move" />

<Button

android:id="@+id/Sequential"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="sequential" />

<Button

android:id="@+id/Slideup"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="slide up" />

<Button

android:id="@+id/Wavscale"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="wav scale" />

<Button

android:id="@+id/Zoomout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="zoom out" />

</LinearLayout>

Step 3: Write code into MainActivity.java

package dev.Androidapplink.animwithxml;

import android.os.Bundle;

import android.app.Activity;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.Toast;

public class MainActivity extends Activity {

// register button

Button blink, bounce, fadein, fadeout, flip, move, rotate, sequential,

slidedown, slideup, together, wavscale, zoomin, zoomout;

// register xml animation file

Animation blinkanim, bounceanim, fadeinanim, fadeoutanim, flipanim,

moveanim, rotateanim, sequeanim, slidedownanim, slideupanim,

togetheranim, wavscaleanim, zoominanim, zoomoutanim;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// load the animation

blinkanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.blink);

bounceanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.bounce);

fadeinanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.fade_in);

fadeoutanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.fade_out);

flipanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.flip);

moveanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.move);

rotateanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.rotate);

sequeanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.sequential);

slidedownanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.slide_down);

slideupanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.slide_up);

togetheranim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.together);

wavscaleanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.wav_scale2);

zoominanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.zoom_in);

zoomoutanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.zoom_out);

// register button

blink = (Button) findViewById(R.id.Blink);

// blink.startAnimation(blinkanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

bounce = (Button) findViewById(R.id.Bounce);

// bounce.startAnimation(bounceanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

fadein = (Button) findViewById(R.id.Fadein);

// fadein.startAnimation(fadeinanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

fadeout = (Button) findViewById(R.id.Fadeout);

// fadeout.startAnimation(fadeoutanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

flip = (Button) findViewById(R.id.Flip);

// flip.startAnimation(flipanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

move = (Button) findViewById(R.id.Move);

// move.startAnimation(moveanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

rotate = (Button) findViewById(R.id.Rotate);

// rotate.startAnimation(rotateanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

sequential = (Button) findViewById(R.id.Sequential);

// sequential.startAnimation(sequeanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

slidedown = (Button) findViewById(R.id.Slidedown);

// slidedown.startAnimation(slidedownanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

slideup = (Button) findViewById(R.id.Slideup);

// slideup.startAnimation(slideupanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

together = (Button) findViewById(R.id.Together);

// together.startAnimation(togetheranim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

wavscale = (Button) findViewById(R.id.Wavscale);

// wavscale.startAnimation(wavscaleanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

zoomin = (Button) findViewById(R.id.Zoomin);

// zoomin.startAnimation(zoominanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

zoomout = (Button) findViewById(R.id.Zoomout);

// zoomout.startAnimation(zoomoutanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

//Implement button click invent

blink.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

blink.startAnimation(blinkanim);

Toast.makeText(getApplicationContext(), "blink animation",

Toast.LENGTH_SHORT).show();

}

});

bounce.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

bounce.startAnimation(bounceanim);

Toast.makeText(getApplicationContext(), "bounce animation",

Toast.LENGTH_SHORT).show();

}

});

fadein.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

fadein.startAnimation(fadeinanim);

Toast.makeText(getApplicationContext(), "fadein animation",

Toast.LENGTH_SHORT).show();

}

});

fadeout.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

fadeout.startAnimation(fadeoutanim);

Toast.makeText(getApplicationContext(), "fadeout animation",

Toast.LENGTH_SHORT).show();

}

});

flip.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

flip.startAnimation(flipanim);

Toast.makeText(getApplicationContext(), "flip animation",

Toast.LENGTH_SHORT).show();

}

});

move.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

move.startAnimation(moveanim);

Toast.makeText(getApplicationContext(), "move animation",

Toast.LENGTH_SHORT).show();

}

});

rotate.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

rotate.startAnimation(rotateanim);

Toast.makeText(getApplicationContext(), "rotate animation",

Toast.LENGTH_SHORT).show();

}

});

sequential.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

sequential.startAnimation(sequeanim);

Toast.makeText(getApplicationContext(), "sequential animation",

Toast.LENGTH_SHORT).show();

}

});

slidedown.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

slidedown.startAnimation(slidedownanim);

Toast.makeText(getApplicationContext(), "slidedown animation",

Toast.LENGTH_SHORT).show();

}

});

slideup.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

slideup.startAnimation(slideupanim);

Toast.makeText(getApplicationContext(), "slideup animation",

Toast.LENGTH_SHORT).show();

}

});

together.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

together.startAnimation(togetheranim);

Toast.makeText(getApplicationContext(), "together animation",

Toast.LENGTH_SHORT).show();

}

});

wavscale.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

wavscale.startAnimation(wavscaleanim);

Toast.makeText(getApplicationContext(), "wav scale animation",

Toast.LENGTH_SHORT).show();

}

});

zoomin.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

zoomin.startAnimation(zoominanim);

Toast.makeText(getApplicationContext(), "zoomin animation",

Toast.LENGTH_SHORT).show();

}

});

zoomout.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

zoomout.startAnimation(zoomoutanim);

Toast.makeText(getApplicationContext(), "zoomout animation",

Toast.LENGTH_SHORT).show();

}

});

}

NOTE: No need any special permission in AndroidManifest.xml

Step 4: now run project and see Output:

Download project:

See example for Activity animation at lunching activity(app)

Monday 1 June 2015

Anim with XML on click button android example

Step 1: Create xml for perform animation

No comments :

Post a Comment

ME ON:

Translate in my language

Download As:

Categories

search this blog

Total Pageviews

Archive

Popular All time

Contact Me:

Connect