Android - SPLessons
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Android Animations

Android Animations

Android animation allows you to change object properties for a certain time period. Animations are useful when there is a change in the screen state such as loading of content or new actions become available. Animations API allows you to define a start and end value for arbitrary object properties and apply a time-based change to this attribute. In addition to Views, this API can be applied on any Java object. Android Animations can be performed either through XML code or android code. You need the AnimationListener interface to find Animation Start, Animation End and Animation Repeat. The following example illustrates the basic animations like zoomin, zoomout, fadein, fadeout, slideup, slidedown, blink, move, and rotate by using XML notations. If you want to listen to animation events like start, end and repeat, your activity should implement AnimationListener and you will have to override the following methods: You can load an animation by calling the loadAnimation() method.
Animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_out);
Start an animation on any UI component by calling the startAnimation() method.
imageview.startAnimation(anim);
First create a MainActivity.java class under src/<your packagename>. MainActivity.java: [java] MainActivity extends Activity implements AnimationListener{ Context context; Animation anim; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //set activity content to external view setContentView(R.layout.activity_main); context=this; //find views by Id final ImageView image=(ImageView)findViewById(R.id.imageView1); Button zoomin=(Button)findViewById(R.id.button1); Button zoomout=(Button)findViewById(R.id.button2); Button fadein=(Button)findViewById(R.id.button3); Button fadeout=(Button)findViewById(R.id.button4); Button slideup=(Button)findViewById(R.id.button5); Button slidedown=(Button)findViewById(R.id.button6); Button blink=(Button)findViewById(R.id.button7); Button move=(Button)findViewById(R.id.button8); Button rotate=(Button)findViewById(R.id.button9); //on click zoomin zoomin.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // load the animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_in); // set animation listener anim.setAnimationListener(MainActivity.this); //start animation image.startAnimation(anim); } }); //on click zoomout zoomout.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // load the animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_out); // set animation listener anim.setAnimationListener(MainActivity.this); //start animation image.startAnimation(anim); } }); //on click fadein fadein.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // load the animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_in); // set animation listener anim.setAnimationListener(MainActivity.this); //start animation image.startAnimation(anim); } }); //on click fadeout fadeout.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // load the animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_out); // set animation listener anim.setAnimationListener(MainActivity.this); //start animation image.startAnimation(anim); } }); //on click slideup slideup.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // load the animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_up); // set animation listener anim.setAnimationListener(MainActivity.this); //start animation image.startAnimation(anim); } }); //on click slidedown slidedown.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // load the animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_down); // set animation listener anim.setAnimationListener(MainActivity.this); //start animation image.startAnimation(anim); } }); //on click blink blink.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // load the animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.blink); // set animation listener anim.setAnimationListener(MainActivity.this); //start animation image.startAnimation(anim); } }); //on click move move.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // load the animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.move); // set animation listener anim.setAnimationListener(MainActivity.this); //start animation image.startAnimation(anim); } }); rotate.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // load the animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate); // set animation listener anim.setAnimationListener(MainActivity.this); image.startAnimation(anim); } }); } @Override public void onAnimationEnd(Animation animation) { // TODO Auto-generated method stub Toast.makeText(context, "Animation stopped", Toast.LENGTH_SHORT).show(); } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub Toast.makeText(context, "Animation started", Toast.LENGTH_SHORT).show(); } } [/java] Create activty_main.xml under res/layout activity_main.xml: [xml] <RelativeLayout 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:background="#FFFFFF" > <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:layout_marginTop="20dp" android:src="@drawable/ic_launcher" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center" android:layout_marginBottom="30dp" android:layout_alignParentBottom="true" android:layout_marginTop="30dp" android:gravity="center" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_gravity="center" android:gravity="center" > <Button android:id="@+id/button1" android:layout_width="100dp" android:layout_height="wrap_content" android:background="#009ACD" android:layout_marginTop="10dp" android:text="Zoom In" /> <Button android:id="@+id/button2" android:layout_width="100dp" android:layout_height="wrap_content" android:background="#009ACD" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:text="Zoom Out" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_gravity="center" android:gravity="center" > <Button android:id="@+id/button3" android:layout_width="100dp" android:layout_height="wrap_content" android:background="#009ACD" android:layout_marginTop="10dp" android:text="Fade In" /> <Button android:id="@+id/button4" android:layout_width="100dp" android:layout_height="wrap_content" android:background="#009ACD" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:text="Fade Out" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_gravity="center" android:gravity="center" > <Button android:id="@+id/button5" android:layout_width="100dp" android:layout_height="wrap_content" android:background="#009ACD" android:layout_marginTop="10dp" android:text="Slide Up" /> <Button android:id="@+id/button6" android:layout_width="100dp" android:layout_height="wrap_content" android:background="#009ACD" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:text="Slide Down" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_gravity="center" android:gravity="center" > <Button android:id="@+id/button7" android:layout_width="100dp" android:layout_height="wrap_content" android:background="#009ACD" android:layout_marginTop="10dp" android:text="Blink" /> <Button android:id="@+id/button8" android:layout_width="100dp" android:layout_height="wrap_content" android:background="#009ACD" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:text="Move" /> <Button android:id="@+id/button9" android:layout_width="100dp" android:layout_height="wrap_content" android:background="#009ACD" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:text="Rotate" /> </LinearLayout> </LinearLayout> </RelativeLayout> [/xml] Now create res/anim folder and add the following .xml to it. fade_in.xml: [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> [/xml] fade_out.xml: [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> [/xml] zoom_in.xml: [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> [/xml] zoom_out.xml: [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> [/xml] slide_up.xml: [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> [/xml] slide_down.xml: [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:interpolator="@android:anim/linear_interpolator" android:toXScale="1.0" android:toYScale="1.0" /> </set> [/xml] blink.xml: [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="600" android:repeatMode="reverse" android:repeatCount="3"/> </set> [/xml] move.xml: [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> [/xml] rotate.xml: [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="600" android:repeatMode="restart" android:repeatCount="3" android:interpolator="@android:anim/cycle_interpolator"/> </set> [/xml] AndroidManifest.xml: [xml] <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.spl.myproject" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="16" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <!--Launcher Activity --> <activity android:name="com.spl.myproject.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> [/xml] Output: