Bounce Animation in Android

To make the android app more attractive we add many things and animation is one of the best things which makes the app more attractive and engages the user with the app. So in this article, we will add a bounce animation to the Button. One can use this tutorial to add Bounce animation to any View in android studio such as ImageView, TextView, EditText, etc. A sample GIF is given below to get an idea about what we are going to do in this article.

bounce animation

Steps for Creating Bounce Animation

Step 1: Creating a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that choose Java as language though we are going to implement this project in Java language.

Step 2: Designing the UI 



  • Go to the app -> res right click on res folder then New -> Android Resource Directory and create an anim Directory.
  • Then right-click on anim folder then go to New -> Animation Resource File and create a bounce.xml file.
  • bounce.xml file contains the animation which is used to animate the Button in the next step. The complete code for bounce.xml is given below.

bounce.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<set 
    android:fillAfter="true"
    android:interpolator="@android:anim/bounce_interpolator">
  
    <scale
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="0.5"
        android:toXScale="1.0"
        android:fromYScale="0.5"
        android:toYScale="1.0"
        android:duration="500"/>
</set>

chevron_right


  • Now Go to the app -> res -> layout -> activity_main.xml file and add a simple Button, which we want to animate. Here is the code for the activity_main.xml file.

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
<!-- Button with Bounce Animation -->
<Button
    android:id="@+id/button"
    android:layout_centerInParent="true"
    android:background="@color/colorPrimary"
    android:textColor="#ffffff"
    android:text="Let's Bounce"
    android:layout_width="200dp"
    android:layout_height="80dp"/>
  
</RelativeLayout>

chevron_right


Step 3: Working with MainActivity.java file

  • Open the MainActivity.java call and inside the onCreate() method get the animation from the anim folder.

// loading Animation from

final Animation animation = AnimationUtils.loadAnimation(this,R.anim.bounce);

  • Get the reference of the Button which we created in the activity_main.xml file

// getting the Button from activity_main.xml file



final Button button= findViewById(R.id.button);

  • Create an OnClickListener for the Button and startAnimation inside onClick().

// clickListener for Button

button.setOnClickListener(new View.OnClickListener() {

           @Override

           public void onClick(View view) {

              // start the animation

               button.startAnimation(animation);

           }

});

  • The complete code for the MainActivity.java file is given below.

MainActivity.java

filter_none

edit
close

play_arrow

link
brightness_4
code

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
      
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // loading Animation from
        final Animation animation = AnimationUtils.loadAnimation(this, R.anim.bounce);
  
        // getting the Button from activity_main.xml file
        final Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // start the animation
                button.startAnimation(animation);
            }
        });
    }
}

chevron_right


Output: Run on Emulator 

Resources:

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.