Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Animations
3.
Example Application
4.
FAQs
4.1.
How can we specify the duration of an animation?
4.2.
What are the different ways of adding animations?
4.3.
What is the use of android:interpolator?
5.
Conclusion 
Last Updated: Mar 27, 2024
Easy

Animations in Android

Author Pradeep Kumar
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we will look into the Animations of Android. To give the UI a rich appearance and feel, Android Animation is employed. We will discuss how Animations can be created and bound to a particular button. 

In this article, we will be using the Android Studio application, so in case you haven't yet set up the application on your system, you can check out this article.

Animations

The method of creating motion and form change in android apps is known as animation. An animation can be used to add motion or change the contour of a particular view. These can be used on just about everything in the Android app. Any dynamic movement for views, such as position changes, rotations, expansion, or color changes, is usually done with this.

The three main types of animations are:

  1. Property Animations: Property animation changes a property for a given amount of time. It's commonly used to animate screen views like zooming in an image or fading out a text. 
  2. View Animations: As the name implies, this is used to animate a view. In places where you want to expand a specific layout, this type of animation can be used.
  3. Drawable Animations: It is helpful while animating one image over another. It lets you add a series of images to create an animation.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Example Application

Now that we have learned what Animations are. Let's learn how to code them in a program by building a basic Android application that uses Animations. In this example, we will be using five animations, which are: zoom in, zoom out, rotate, move, and blink.

First, we need to create a new project in Android Studio by selecting the empty activity option. Now add a text view and five buttons in the activity_main.xml file.

activity_main.xml 

<?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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="326dp"
        android:layout_height="77dp"
        android:layout_marginStart="40dp"
        android:layout_marginTop="56dp"
        android:layout_marginBottom="60dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Coding Ninjas"
        android:textSize="50sp"
        app:layout_constraintBottom_toTopOf="@+id/zoomIn"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/zoomIn"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="39dp"
        android:text="Zoom In"
        app:layout_constraintBottom_toTopOf="@+id/zoomOut"
        app:layout_constraintEnd_toEndOf="@+id/zoomOut"
        app:layout_constraintStart_toStartOf="@+id/zoomOut"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <Button
        android:id="@+id/zoomOut"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="54dp"
        android:layout_marginEnd="54dp"
        android:layout_marginBottom="42dp"
        android:text="Zoom Out"
        app:layout_constraintBottom_toTopOf="@+id/blink"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/zoomIn" />

    <Button
        android:id="@+id/rotate"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="54dp"
        android:layout_marginEnd="54dp"
        android:layout_marginBottom="49dp"
        android:text="Rotate"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/move" />

    <Button
        android:id="@+id/move"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="58dp"
        android:layout_marginEnd="58dp"
        android:layout_marginBottom="27dp"
        android:text="Move"
        app:layout_constraintBottom_toTopOf="@+id/rotate"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/blink"/>

    <Button
        android:id="@+id/blink"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="58dp"
        android:layout_marginEnd="58dp"
        android:layout_marginBottom="42dp"
        android:text="Blink"
        app:layout_constraintBottom_toTopOf="@+id/move"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/zoomOut" />
</androidx.constraintlayout.widget.ConstraintLayout>

Now, create a new directory (anim) inside the res folder. In this folder, we will add all our animations. For each of the animations, create a new XML file and add it under the anim folder. Following is the code for all five animations.

zoom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="750"
        android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="2"
        android:toYScale="2" />
</set>

zoom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="750"
        android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="0.25"
        android:toYScale="0.25" />
</set>

rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="750"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:repeatMode = "reverse"
        android:repeatCount="5" />
</set>

move.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="750"
        android:fromXDelta="0%p"
        android:toXDelta="50%p"/>
</set>

blink.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration = "750"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:repeatMode = "reverse"
        android:repeatCount="5" />
</set>

Bind the buttons to the text view and with their respective animations in the MainActivity.kt file.

package com.example.androidanimations

import androidx.appcompat.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

class MainActivity : AppCompatActivity() {
    private lateinit var text_view: TextView

    // late initializing button for zoom in functionality
    private lateinit var btnZoomIn: Button
    // late initializing animation for zoom in functionality
    private lateinit var animZoomIn: Animation

    // late initializing button for zoom out functionality
    private lateinit var btnZoomOut: Button
    // late initializing animation for zoom out functionality
    private lateinit var animZoomOut: Animation

    // late initializing button for rotate functionality
    private lateinit var btnRotate: Button
    // late initializing animation for rotate functionality
    private lateinit var animRotate: Animation

    // late initializing button for blink functionality
    private lateinit var btnBlink: Button
    // late initializing animation for blink functionality
    private lateinit var animBlink: Animation

    // late initializing button for move functionality
    private lateinit var btnMove: Button
    // late initializing animation for move functionality
    private lateinit var animMove: Animation


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        text_view = findViewById<TextView>(R.id.textView) // text to apply animation on

        // Zoom In Animation
        btnZoomIn = findViewById<Button>(R.id.zoomIn) // zoom in button
        animZoomIn = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.zoom_in) // animation zoom in
        btnZoomIn.setOnClickListener(object : View.OnClickListener { //binding the listener
            override fun onClick(v: View?) {
                text_view.setVisibility(View.VISIBLE)
                text_view.startAnimation(animZoomIn) // start animation
            }
        })

        // Zoom Out Animation
        btnZoomOut = findViewById<Button>(R.id.zoomOut) // zoom out button
        animZoomOut = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.zoom_out) // animation zoom out
        btnZoomOut.setOnClickListener(object : View.OnClickListener { //binding the listener
            override fun onClick(v: View?) {
                text_view.setVisibility(View.VISIBLE)
                text_view.startAnimation(animZoomOut) // start animation
            }
        })

        // Rotate Animation
        btnRotate = findViewById<Button>(R.id.rotate) // rotate button
        animRotate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate) // animation rotate
        btnRotate.setOnClickListener(object : View.OnClickListener { //binding the listener
            override fun onClick(v: View?) {
                text_view.setVisibility(View.VISIBLE)
                text_view.startAnimation(animRotate) // start animation
            }
        })

        // Blink Animation
        btnBlink = findViewById<Button>(R.id.blink) // Blink button
        animBlink = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.blink) // animation Blink
        btnBlink.setOnClickListener(object : View.OnClickListener { //binding the listener
            override fun onClick(v: View?) {
                text_view.setVisibility(View.VISIBLE)
                text_view.startAnimation(animBlink) // start animation
            }
        })

        // Move Animation
        btnMove = findViewById<Button>(R.id.move) // move button
        animMove= AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move) // animation move
        btnMove.setOnClickListener(object : View.OnClickListener { //binding the listener
            override fun onClick(v: View?) {
                text_view.setVisibility(View.VISIBLE)
                text_view.startAnimation(animMove) // start animation
            }
        })
    }
}

Output:

Following are the outputs obtained upon using the corresponding animation on the "Coding Ninjas" text.

                                                  

                                                     No animation                               Zoom in Animation


                                                   

                                                     Zoom Out Animation                          Blink

                                                   

                                                       Move Animation                         Rotate Animation

FAQs

How can we specify the duration of an animation?

The duration of an animation can be specified using the property "android: duration." 

 

What are the different ways of adding animations?

Animations in android can be added by two methods: XML files and Android code.

 

What is the use of android:interpolator?

It specifies the rate of animation. For example, Accelerate Interpolator is a type of interpolator where the rate of change starts out slowly and then accelerates rapidly.

Conclusion 

In this article, we have extensively discussed Animation in Android and its implementation in Android Studio. We discussed how Animations could be created and registered in an android application.

We hope that this blog has helped you enhance your knowledge regarding Animation. All the widgets are enclosed inside a UI layout and if you would like to learn more about layouts, check out our article on Android UI layouts. And to learn in-depth about android development, check out our Android Development course on the Coding Ninjas website. Do upvote our blog to help other ninjas grow. Happy Coding!

Previous article
Android Camera
Next article
Audio Capture In Android
Live masterclass