How to set blinking, bounce, fade in, fade out, move, rotate, sequential, slide down, slide up, together, zoom in, zoom out animation on button & imageview .
Moving objects with smoothness on UI ( Uses Interface ) are called as animation . With the use of animation an android developer can deliver the widgets on screen with even some more uniqueness. XML animations are basically used upon one XML files which has contain all the animation code and all you have to do is call that xml using animation class object. So here is the complete step by step tutorial for Android Multiple Animations On Views Using XML Example Tutorial.
Live Demo :
List of all animations covered in this tutorial :
- Blinking Animation .
- Bounce Animation .
- Fade In Animation .
- Fade Out Animation .
- Object Move Animation .
- Rotate Animation .
- Sequential Animation .
- Slide UP Animation .
- Slide Down Animation .
- Together Animation .
- Zoom In Animation .
- Zoom Out Animation .
List of all activities in this project :
- MainActivity.java .
- BlinkingActivity.java .
- BounceActivity.java .
- FadeOUTActivity.java .
- FadINActivity.java .
- MoveActivity.java .
- RotateActivity.java .
- SequentialActivity.java .
- SlideDownActivity.java .
- SlideUpActivity.java .
- TogetherActivity.java .
- ZoomINActivity.java .
- ZoomOUTActivity.java .
List of all XML layout files in this project :
- activity_main.xml .
- activity_blinking.xml .
- activity_bounce.xml .
- activity_fad_in.xml .
- activity_fade_out.xml .
- activity_move.xml .
- activity_rotate.xml .
- activity_sequential.xml .
- activity_slide_down.xml .
- activity_slide_up.xml .
- activity_together.xml .
- activity_zoom_in.xml .
- activity_zoom_out.xml .
List of all animation XML files in this project :
Please follow the below steps to create anim folder in your project because all the xml animation files we will put into this folder :
1. Create a folder named as anim inside the res folder.
2. Create all the files inside this folder like i did in below screenshot.
3. Now start coding.
Android Multiple Animations On Views Using XML Example Tutorial .
Code for MainActivity.java file.
package com.android_examples.androidanimations_android_examplescom; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends AppCompatActivity { Button buttonBlinking, buttonBounce, buttonFadIN, buttonFadeOUT, buttonMove, buttonRotate, buttonSequential, buttonSlideUP, buttonSlideDown, buttonTogether, buttonZoomIN, buttonZoomOUT ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); buttonBlinking = (Button)findViewById(R.id.button_blinking); buttonBounce = (Button)findViewById(R.id.button_bounce); buttonFadIN = (Button)findViewById(R.id.button_fade_in); buttonFadeOUT = (Button)findViewById(R.id.button_fade_out); buttonMove = (Button)findViewById(R.id.button_move); buttonRotate = (Button)findViewById(R.id.button_rotate); buttonSequential = (Button)findViewById(R.id.button_sequential); buttonSlideUP = (Button)findViewById(R.id.button_slide_up); buttonSlideDown = (Button)findViewById(R.id.button_slide_down); buttonTogether = (Button)findViewById(R.id.button_together); buttonZoomIN = (Button)findViewById(R.id.button_zoom_in); buttonZoomOUT = (Button)findViewById(R.id.button_zoom_out); buttonBlinking.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, BlinkingActivity.class); startActivity(intent); } }); buttonBounce.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, BounceActivity.class); startActivity(intent); } }); buttonFadIN.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, FadINActivity.class); startActivity(intent); } }); buttonFadeOUT.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, FadeOUTActivity.class); startActivity(intent); } }); buttonMove.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, MoveActivity.class); startActivity(intent); } }); buttonRotate.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, RotateActivity.class); startActivity(intent); } }); buttonSequential.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, SequentialActivity.class); startActivity(intent); } }); buttonSlideDown.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, SlideDownActivity.class); startActivity(intent); } }); buttonSlideUP.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, SlideUPActivity.class); startActivity(intent); } }); buttonTogether.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, TogetherActivity.class); startActivity(intent); } }); buttonZoomIN.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, ZoomINActivity.class); startActivity(intent); } }); buttonZoomOUT.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, ZoomOUTActivity.class); startActivity(intent); } }); } }
Code for BlinkingActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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.TextView; public class BlinkingActivity extends AppCompatActivity { Button button ; TextView textView ; Animation animation ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_blinking); button = (Button)findViewById(R.id.buttonblinkingActivity); textView = (TextView)findViewById(R.id.textViewblinking); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(BlinkingActivity.this, R.anim.animation_blinking); textView.startAnimation(animation); } }); } }
Code for BounceActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class BounceActivity extends AppCompatActivity { Button button ; ImageView imageView; Animation animation ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bounce); button = (Button)findViewById(R.id.buttonbounceActivity); imageView = (ImageView)findViewById(R.id.imageViewBounce); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(BounceActivity.this, R.anim.animation_bounce); imageView.startAnimation(animation); } }); } }
Code for FadeOUTActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class FadeOUTActivity extends AppCompatActivity { Button button ; ImageView imageView; Animation animation ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_fade_out); button = (Button)findViewById(R.id.buttonfadeOUTActivity); imageView = (ImageView)findViewById(R.id.imageViewFadeOUT); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(FadeOUTActivity.this, R.anim.animation_fade_out); imageView.startAnimation(animation); } }); } }
Code for FadINActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class FadINActivity extends AppCompatActivity { Button button ; ImageView imageView; Animation animation ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_fad_in); button = (Button)findViewById(R.id.buttonfadeActivity); imageView = (ImageView)findViewById(R.id.imageViewFadeIn); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(FadINActivity.this, R.anim.animation_fad_in); imageView.startAnimation(animation); } }); } }
Code for MoveActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class MoveActivity extends AppCompatActivity { Button button ; ImageView imageView; Animation animation ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_move); button = (Button)findViewById(R.id.buttonMoveActivity); imageView = (ImageView)findViewById(R.id.imageViewMove); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(MoveActivity.this, R.anim.animation_move); imageView.startAnimation(animation); } }); } }
Code for RotateActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class RotateActivity extends AppCompatActivity { Button button ; ImageView imageView; Animation animation ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_rotate); button = (Button)findViewById(R.id.buttonRotate_Activity); imageView = (ImageView)findViewById(R.id.imageViewRotate); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(RotateActivity.this, R.anim.animation_rotate); imageView.startAnimation(animation); } }); } }
Code for SequentialActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class SequentialActivity extends AppCompatActivity { Button button ; ImageView imageView; Animation animation ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sequential); button = (Button)findViewById(R.id.buttonSequential_Activity); imageView = (ImageView)findViewById(R.id.imageViewSequential); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(SequentialActivity.this, R.anim.animation_sequential); imageView.startAnimation(animation); } }); } }
Code for SlideDownActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class SlideDownActivity extends AppCompatActivity { Button button; ImageView imageView; Animation animation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_slide_down); button = (Button) findViewById(R.id.button); imageView = (ImageView) findViewById(R.id.imageView); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(SlideDownActivity.this, R.anim.animation_slide_down); imageView.startAnimation(animation); } }); } }
Code for SlideUPActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class SlideUPActivity extends AppCompatActivity { Button button; ImageView imageView; Animation animation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_slide_up); button = (Button) findViewById(R.id.button); imageView = (ImageView) findViewById(R.id.imageView); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(SlideUPActivity.this, R.anim.animation_slide_up); imageView.startAnimation(animation); } }); } }
Code for TogetherActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class TogetherActivity extends AppCompatActivity { Button button; ImageView imageView; Animation animation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_together); button = (Button) findViewById(R.id.button); imageView = (ImageView) findViewById(R.id.imageView); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(TogetherActivity.this, R.anim.animation_together); imageView.startAnimation(animation); } }); } }
Code for ZoomINActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class ZoomINActivity extends AppCompatActivity { Button button; ImageView imageView; Animation animation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_zoom_in); button = (Button) findViewById(R.id.button); imageView = (ImageView) findViewById(R.id.imageView); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(ZoomINActivity.this, R.anim.animation_zoom_in); imageView.startAnimation(animation); } }); } }
Code for ZoomOUTActivity.java file.
package com.android_examples.androidanimations_android_examplescom; 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; public class ZoomOUTActivity extends AppCompatActivity { Button button; ImageView imageView; Animation animation; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_zoom_out); button = (Button) findViewById(R.id.button); imageView = (ImageView) findViewById(R.id.imageView); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { animation = AnimationUtils.loadAnimation(ZoomOUTActivity.this, R.anim.animation_zoom_out); imageView.startAnimation(animation); } }); } }
Code for activity_main.xml layout file.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" 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" tools:context="com.android_examples.androidanimations_android_examplescom.MainActivity" android:orientation="vertical" > <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:id="@+id/LinearLayoutchild"> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_blinking" android:text="Blinking Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_bounce" android:text="Bounce Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_fade_in" android:text="Fade in Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_fade_out" android:text="Fade out Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_move" android:text="move Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_rotate" android:text="rotate Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_sequential" android:text="sequential Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_slide_up" android:text="slide up Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_slide_down" android:text="slide down Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_together" android:text="together Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_zoom_in" android:text="zoom in Animation"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/button_zoom_out" android:text="zoom out Animation"/> </LinearLayout> </ScrollView> </LinearLayout>
Code for activity_blinking.xml layout file.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_blinking" 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" tools:context="com.android_examples.androidanimations_android_examplescom.BlinkingActivity" android:background="#FFF8E1"> <TextView android:text="Sample TextView " android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="133dp" android:id="@+id/textViewblinking" android:textColor="#000000" android:textSize="30dp" android:gravity="center"/> <Button android:text="SHOW BLINKING ANIMATION" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:id="@+id/buttonblinkingActivity" /> </RelativeLayout>
Code for activity_bounce.xml layout file.