Adding Animations to Controls or Layouts in Android Android by Rajesh Kumar Sahanee - November 9, 2019November 9, 20190 Post Views: 4,012 Hello Friends, Today we are going to learn adding animations to controls or Layouts in Android. Recently I was working on an app in which I was required to add animation on a control’s visiblility “gone” and “visible”. So I used alpha method to achieve fade in and fade out effect . But here I have demonstrated several other methods also i.e translationX, translationY, scaleX, rotation, etc. We can also attach listeners on animation to perform some specific task just as I have attached to combine two animations. We can also perfom these animations on layouts also i.e LinearLayout, TableLayout, etc same way. So, now I thought to share a test AndroidStudio Project to help myself in future developments. 😉 So, here is the code MainActivity.java MainActivity.java Java package com.zatackcoder.androidanimations; import androidx.appcompat.app.AppCompatActivity; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.os.Bundle; import android.view.View; import android.widget.ImageView; public class MainActivity extends AppCompatActivity { ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView = findViewById(R.id.imageView); } public void handleClick(View view) { switch (view.getId()) { case R.id.fadeOut : imageView.animate().alpha(0.0f).setDuration(300); break; case R.id.fadeIn : imageView.animate().alpha(1.0f).setDuration(300); break; case R.id.fadeInOut : imageView.animate().alpha(0.0f).setDuration(400).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().alpha(1.0f).setDuration(400); imageView.animate().setListener(null); } }); break; case R.id.slideDown : imageView.animate().translationY(imageView.getHeight()).setDuration(300); break; case R.id.slideUp : imageView.animate().translationY(0).setDuration(300); break; case R.id.slideUpDown : imageView.animate().translationY(imageView.getHeight()).setDuration(300).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().translationY(0).setDuration(300); imageView.animate().setListener(null); } }); break; case R.id.slideLeft : imageView.animate().translationX(-imageView.getWidth()).setDuration(300); break; case R.id.slideRight : imageView.animate().translationX(0).setDuration(300); break; case R.id.slideLeftRight : imageView.animate().translationX(-imageView.getWidth()).setDuration(300).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().translationX(0).setDuration(300); imageView.animate().setListener(null); } }); break; case R.id.rotateLeft : imageView.animate().rotation(-90).setDuration(300); break; case R.id.rotateRight : imageView.animate().rotation(0).setDuration(300); break; case R.id.rotateLeftRight : imageView.animate().rotation(-90).setDuration(300).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().rotation(0).setDuration(300); imageView.animate().setListener(null); } }); break; case R.id.scaleDown : imageView.animate().scaleX(0f).scaleY(0f).setDuration(300); break; case R.id.scaleUp : imageView.animate().scaleX(1).scaleY(1f).setDuration(300); break; case R.id.scaleUpDown : imageView.animate().scaleX(0f).scaleY(0f).setDuration(300).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().scaleX(1).scaleY(1).setDuration(300); imageView.animate().setListener(null); } }); break; } } } 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 package com.zatackcoder.androidanimations; import androidx.appcompat.app.AppCompatActivity; import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.os.Bundle;import android.view.View;import android.widget.ImageView; public class MainActivity extends AppCompatActivity { ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView = findViewById(R.id.imageView); } public void handleClick(View view) { switch (view.getId()) { case R.id.fadeOut : imageView.animate().alpha(0.0f).setDuration(300); break; case R.id.fadeIn : imageView.animate().alpha(1.0f).setDuration(300); break; case R.id.fadeInOut : imageView.animate().alpha(0.0f).setDuration(400).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().alpha(1.0f).setDuration(400); imageView.animate().setListener(null); } }); break; case R.id.slideDown : imageView.animate().translationY(imageView.getHeight()).setDuration(300); break; case R.id.slideUp : imageView.animate().translationY(0).setDuration(300); break; case R.id.slideUpDown : imageView.animate().translationY(imageView.getHeight()).setDuration(300).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().translationY(0).setDuration(300); imageView.animate().setListener(null); } }); break; case R.id.slideLeft : imageView.animate().translationX(-imageView.getWidth()).setDuration(300); break; case R.id.slideRight : imageView.animate().translationX(0).setDuration(300); break; case R.id.slideLeftRight : imageView.animate().translationX(-imageView.getWidth()).setDuration(300).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().translationX(0).setDuration(300); imageView.animate().setListener(null); } }); break; case R.id.rotateLeft : imageView.animate().rotation(-90).setDuration(300); break; case R.id.rotateRight : imageView.animate().rotation(0).setDuration(300); break; case R.id.rotateLeftRight : imageView.animate().rotation(-90).setDuration(300).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().rotation(0).setDuration(300); imageView.animate().setListener(null); } }); break; case R.id.scaleDown : imageView.animate().scaleX(0f).scaleY(0f).setDuration(300); break; case R.id.scaleUp : imageView.animate().scaleX(1).scaleY(1f).setDuration(300); break; case R.id.scaleUpDown : imageView.animate().scaleX(0f).scaleY(0f).setDuration(300).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { imageView.animate().scaleX(1).scaleY(1).setDuration(300); imageView.animate().setListener(null); } }); break; } }} activity_main.xml activity_main.xml XHTML <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TableLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> <TableRow> <Button android:id="@+id/fadeOut" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Fade Out" android:textAllCaps="false" /> <Button android:id="@+id/fadeIn" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Fade In" android:textAllCaps="false" /> <Button android:id="@+id/fadeInOut" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Fade In/Out" android:textAllCaps="false" /> </TableRow> <TableRow> <Button android:id="@+id/slideDown" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Down" android:textAllCaps="false" /> <Button android:id="@+id/slideUp" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Up" android:textAllCaps="false" /> <Button android:id="@+id/slideUpDown" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Up/Down" android:textAllCaps="false" /> </TableRow> <TableRow> <Button android:id="@+id/slideLeft" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Left" android:textAllCaps="false" /> <Button android:id="@+id/slideRight" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Right" android:textAllCaps="false" /> <Button android:id="@+id/slideLeftRight" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Left/Right" android:textAllCaps="false" /> </TableRow> <TableRow> <Button android:id="@+id/rotateLeft" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Rotate Left" android:textAllCaps="false" /> <Button android:id="@+id/rotateRight" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Rotate Right" android:textAllCaps="false" /> <Button android:id="@+id/rotateLeftRight" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Rotate Left/Right" android:textAllCaps="false" /> </TableRow> <TableRow> <Button android:id="@+id/scaleDown" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Scale Down" android:textAllCaps="false" /> <Button android:id="@+id/scaleUp" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Scale Up" android:textAllCaps="false" /> <Button android:id="@+id/scaleUpDown" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Scale Up/Down" android:textAllCaps="false" /> </TableRow> </TableLayout> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/flower" /> </LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 <?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TableLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> <TableRow> <Button android:id="@+id/fadeOut" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Fade Out" android:textAllCaps="false" /> <Button android:id="@+id/fadeIn" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Fade In" android:textAllCaps="false" /> <Button android:id="@+id/fadeInOut" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Fade In/Out" android:textAllCaps="false" /> </TableRow> <TableRow> <Button android:id="@+id/slideDown" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Down" android:textAllCaps="false" /> <Button android:id="@+id/slideUp" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Up" android:textAllCaps="false" /> <Button android:id="@+id/slideUpDown" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Up/Down" android:textAllCaps="false" /> </TableRow> <TableRow> <Button android:id="@+id/slideLeft" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Left" android:textAllCaps="false" /> <Button android:id="@+id/slideRight" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Right" android:textAllCaps="false" /> <Button android:id="@+id/slideLeftRight" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Slide Left/Right" android:textAllCaps="false" /> </TableRow> <TableRow> <Button android:id="@+id/rotateLeft" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Rotate Left" android:textAllCaps="false" /> <Button android:id="@+id/rotateRight" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Rotate Right" android:textAllCaps="false" /> <Button android:id="@+id/rotateLeftRight" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Rotate Left/Right" android:textAllCaps="false" /> </TableRow> <TableRow> <Button android:id="@+id/scaleDown" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Scale Down" android:textAllCaps="false" /> <Button android:id="@+id/scaleUp" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Scale Up" android:textAllCaps="false" /> <Button android:id="@+id/scaleUpDown" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="handleClick" android:text="Scale Up/Down" android:textAllCaps="false" /> </TableRow> </TableLayout> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/flower" /> </LinearLayout></androidx.constraintlayout.widget.ConstraintLayout> Video https://zatackcoder.com/wp-content/uploads/2019/11/android-animations.mp4 AndroidStudio Project Download Adding Animations to Controls or Layouts in Android 1 file(s) 9.20 MB Download Reference https://stackoverflow.com/questions/22454839/android-adding-simple-animations-while-setvisibilityview-gone Thanks for Stoping by If you find this helpful then please share
