How to Apply View Animations Effects in Android?
Android View Animations are used to apply amazing animations on TextView and EditText in the android application. Such animations provide the app with a smooth look in a new way. In this article, we are going to develop the Android View Animation effect in Android Studio.
What we are going to build in this article?
In this article, we will develop a sample application with the TextView animation effect over its activity. A sample gif is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create 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 select Java as the programming language.
Step 2: Add dependency
Now, Navigate to the Gradle Scripts > build.gradle(Module:app) add the below dependencies in the dependencies section.
Java
implementation 'com.daimajia.androidanimations:library:2.4@aar'
|
Now, sync your project and now we have everything which we will need during implementation so now, move towards its implementation.
Step 3: Working with the activity_main.xml file
Now, go-to the app >res > layout > activity_main.xml and paste the below-written code in the activity_main.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:id = "@+id/relative_layout"
tools:context = ".MainActivity" >
< TextView
android:id = "@+id/textView"
android:layout_width = "750px"
android:layout_height = "200px"
android:layout_centerInParent = "true"
android:fontFamily = "sans-serif-black"
android:text = "GeeksForGeeks"
android:textColor = "#4CAF50"
android:textSize = "35dp" />
< Button
android:id = "@+id/button"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_below = "@id/textView"
android:layout_centerInParent = "true"
android:background = "#4CAF50"
android:text = "Click Me" />
</ RelativeLayout >
|
Step 4: Working with the MainActivity.java file
Go to the app > java > package name > MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.daimajia.androidanimations.library.Techniques;
import com.daimajia.androidanimations.library.YoYo;
public class MainActivity extends AppCompatActivity {
TextView textView;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView= findViewById(R.id.textView);
button= findViewById(R.id.button);
button.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
YoYo.with(Techniques.Tada)
.duration( 700 )
.repeat( 5 )
.playOn(findViewById(R.id.textView));
}
});
}
}
|
Note:
We can also use other animation effects like Tada. A list of some beautiful effects are given below with their categories:
- Attention: Flash, Pulse, RubberBand, Shake, Swing, Wobble, Bounce, Tada, StandUp, Wave
- Special: Hinge, RollIn, RollOut,Landing,TakingOff,DropOut
- Bounce: BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp
- Fade: FadeIn, FadeInUp, FadeInDown, FadeInLeft, FadeInRight, FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp
- Flip: FlipInX, FlipOutX, FlipOutY
- Rotate: RotateIn, RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight, RotateOut, RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight
- Slide: SlideInLeft, SlideInRight, SlideInUp, SlideInDown, SlideOutLeft, SlideOutRight, SlideOutUp, SlideOutDown
- Zoom: ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp, ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp
That’s all, now the application is ready to install on the device. Here is what the output of the application looks like.
Output:
Last Updated :
27 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...