Android ImageView Animation

What's in this blog? Hide

Android ImageView Animation

By implementing Android ImageView Animation into your app, you can easily create an interactive user interface and provide a better user experience to your users.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

In this blog, we have highlighted 8 different styles of animations that you can apply to an ImageView widget in Android Studio with a simple line of code.

Getting Started

To get started with this tutorial from scratch you can create an empty android studio activity else you can skip this step and proceed further if you are already working on some Android Studio project and want to learn about Android ImageView animation.

Creating Layout file

In an empty layout file, create a simple android ImageView widget. Code for the following is as follow:

<?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"
    android:background="#2196F3">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image_View"
        android:layout_width="300dp"
        android:scaleType="fitCenter"
        android:layout_height="300dp"
        android:src="@drawable/pale"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Coding the Android ImageView Animation

Now first create the ImageView object in your java class and lets code their animation below:

Transparency Effect (Alpha)

To get the transparency effect in your android ImageView, we play with alpha values of our ImageView.

First set the alpha value of your ImageView to zero and then animate the alpha value to 1.0f to get complete 100% opacity.

Note here you can change the duration of the animation as well by using the setDuration function. See the code below:

        //findviewbyID
        imageView = findViewById(R.id.image_view);

        //Set ImageView alpha to zero
        imageView.setAlpha(0f);

        //Animate the alpha value to 1f and set duration as 1.5 secs.
        imageView.animate().alpha(1f).setDuration(1500);

Move the imageView (Translation)

To move your imageView, we use the translation property i.e., the transationX and translationY.

We will first use setTranslationY to change position of our ImageView on the Y asix and then animate its position to previous location by using translationByY.

        imageView = findViewById(R.id.hello_world);

        imageView.setAlpha(0f);
        imageView.setTranslationY(50);
        
        imageView.animate().alpha(1f).translationYBy(-50).setDuration(1500);

translationX vs translationXBy

While coding you may have noticed that there are two different properties of translation for both X and Y i.e., translationX vs translationXBy.

translationX is used to animate the Android imageView to that particular point on the activity where as translationXBy animates the Android imageView by the amount mentioned.

Rotate the ImageView

If you wish to rotate the imageview you can easily do this by using the rotation property rotation();

helloWorld = findViewById(R.id.hello_world);
helloWorld.animate().rotation(120).setDuration(3000);

Rotate on Axis

If you want to rotate the ImageView on axis i.e, on X axis or on the Y axis, you can achieve the same by using rotationX or rotationY.

helloWorld = findViewById(R.id.hello_world);
helloWorld.animate().rotationX(120).setDuration(3000);

Scale the ImageView

If you wish to scale your ImageView then you can use scaleXBy or scaleYBy property. Here is an example for the same:

helloWorld = findViewById(R.id.hello_world);
helloWorld.animate().scaleYBy(1).setDuration(3000);

Set Delay

You can easily set Delay using the setStartDelay function.

helloWorld = findViewById(R.id.hello_world);
helloWorld.setAlpha(0f);
helloWorld.setTranslationY(50);  helloWorld.animate().alpha(1f).translationYBy(-50).setStartDelay(200).setDuration(1500);

Set Actions

One can easily set the start or the end actions after animation starts or gets finished by using withStartAction or with EndAction methods.

//End Action

helloWorld.animate().alpha(1f).translationYBy(-50).setStartDelay(200).withEndAction(new Runnable() {
            @Override
            public void run() {
                //End Action
                Toast.makeText(MainActivity.this,"Animating imageView",Toast.LENGTH_SHORT).show();
            }
        }).setDuration(1500);

Viola! So here we are done with learning 8 different animation actions you apply to your Android ImageView Animation.