Skip to content
Related Articles

Related Articles

Android Animations in Kotlin
  • Difficulty Level : Easy
  • Last Updated : 23 Feb, 2021

Animation is a method in which a collection of images are combined in a sepecific way and processed then they appear as moving images. Building animations make on-screen objects seems to be alive. Android has quite a few tools to help you create animations with relative ease. so in this article we will learn to create animations using Kotlin. below are some attributes which we are using while writing the code in xml.

Table of Attributes :

XML ATTRIBUTESDESCRIPTION
android:durationIt is used to specify the duration of animation to run
android:fromAlphaIt is the starting alpha value for the animation,
where 1.0 means fully opaque and 0.0 means fully transparent
android:toAlphaIt is the ending alpha value
android:idSets unique id of the view
android:fromYDeltaIt is the change in Y coordinate to be applied at the start of the animation
android:toYDeltaIt is the change in Y coordinate to be applied at the end of the animation
android:startOffsetDelay occur when an animation runs (in miliseconds), once start time is reached.
android:pivotXIt represents the X-axis coordinates to zoom from starting point.
android:pivotYIt represents the Y-axis coordinates to zoom from starting point.
android:fromXScaleStarting X size offset,
android:fromYScaleStarting Y size offset,
android:toXScaleEnding of X size offset
android:toYScaleEnding of Y size offset
android:fromDegreesStarting angular position, in degrees.
android:toDegreesEnding angular position, in degrees.
android:interpolatorAn interpolator defines the rate of change of an animation

At first, we will create a new android application. Then, we will create some animations.
If you already created the project then ignore step 1.

    Create New Project

    1. Open Android Studio
    2. Go to File => New => New Project.
    3. Then, select Empty Activity and click on next
      • Write application name as DynamicEditTextKotlin
      • Select minimum SDK as you need, here we have selected 21 as minimum SDK
      • Choose language as Kotlin and click on finish button.

    If you have followed above process correctly, you will get a newly created project successfully.

    After creating project we will modify xml files. In xml file we will create one TextView where all the animations are performed and Eight Buttons for Eight different animations.



    Modify activity_main.xml file

    Open res/layout/activity_main.xml file and add code into it.




    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        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="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/linearLayout"
            android:gravity="center"
            android:text="Geeks for Geeks"
            android:textSize="32sp"
            android:textColor="@color/colorPrimaryDark"
            android:textStyle="bold" />
        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="2">
                <Button
                    android:id="@+id/fade_in"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Fade In"
                    android:textAllCaps="false" />
                <Button
                    android:id="@+id/fade_out"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Fade Out"
                    android:textAllCaps="false" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="2">
                <Button
                    android:id="@+id/zoom_in"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Zoom In"
                    android:textAllCaps="false" />
                <Button
                    android:id="@+id/zoom_out"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Zoom Out"
                    android:textAllCaps="false" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="2">
                <Button
                    android:id="@+id/slide_down"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Slide Down"
                    android:textAllCaps="false" />
                <Button
                    android:id="@+id/slide_up"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Slide Up"
                    android:textAllCaps="false" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="2">
                <Button
                    android:id="@+id/bounce"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Bounce"
                    android:textAllCaps="false" />
                <Button
                    android:id="@+id/rotate"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="Rotate"
                    android:textAllCaps="false" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

    After modifing the layout we will create xml files for animations. so we will first create a folder name anim.

    In this folder, we will be adding the XML files which will be used to produce the animations. For this to happen, go to app/res right click and then select, Android Resource Directory and name it as anim.

    bounce.xml

    In this animation the text is bounce like a ball.




    <?xml version="1.0" encoding="utf-8"?>
    <set
        android:interpolator="@android:anim/linear_interpolator"
        android:fillAfter="true">
        <translate
            android:fromYDelta="100%"
            android:toYDelta="-20%"
            android:duration="300" />
        <translate
            android:startOffset="500"
            android:fromYDelta="-20%"
            android:toYDelta="10%"
            android:duration="150" />
        <translate
            android:startOffset="1000"
            android:fromYDelta="10%"
            android:toYDelta="0"
            android:duration="100" />
    </set>

    fade_in.xml

    In Fade In animation the text will appear from background.




    <?xml version="1.0" encoding="utf-8"?>
        android:interpolator="@android:anim/linear_interpolator">
        <alpha
            android:duration="1000"
            android:fromAlpha="0.1"
            android:toAlpha="1.0" />
    </set>

    fade_out.xml

    In Fade Out animation the colour of text is faded for a particular amount of time.




    <?xml version="1.0" encoding="utf-8"?>
        android:interpolator="@android:anim/linear_interpolator">
        <alpha
            android:duration="1000"
            android:fromAlpha="1.0"
            android:toAlpha="0.1" />
    </set>

    rotate.xml

    In rotate animation the text is rotated for a particular amount of time.




    <?xml version="1.0" encoding="utf-8"?>
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="0"
        android:toDegrees="360" />

    slide_down.xml

    In this animation the text will come from top to bottam.






    <?xml version="1.0" encoding="utf-8"?>
        <translate
            android:duration="1000"
            android:fromYDelta="-100%"
            android:toYDelta="0" />
    </set>

    slide_up.xml

    In this animation the text will go from bottam to top.




        <translate
            android:duration="1000"
            android:fromYDelta="0"
            android:toYDelta="-100%" />
    </set>

    zoom_in.xml

    In this animation the text will appear bigger for a particular amount of time.




    <?xml version="1.0" encoding="utf-8"?>
        android:fillAfter="true">
        <scale xmlns:android="http://schemas.android.com/apk/res/android"
            android:duration="1000"
            android:fromXScale="1"
            android:fromYScale="1"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="1.5"
            android:toYScale="1.5">
        </scale>
    </set>

    zoom_out.xml

    In this animation the text will appear smaller for a particular amount of time.




    <?xml version="1.0" encoding="utf-8"?>
        android:fillAfter="true" >
        <scale
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:duration="1000"
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="0.5"
            android:toYScale="0.5" >
        </scale>
    </set>

    After creating all animations in xml. we will create MainActivity.

    Create MainActivity.kt file

    Open app/src/main/java/net.geeksforgeeks.AnimationsInKotlin/MainActivity.kt file and add below code into it.




    package net.geeksforgeeks.animationsinkotlin
      
    import androidx.appcompat.app.AppCompatActivity
    import android.os.Bundle
    import android.os.Handler
    import android.view.View
    import android.view.animation.AnimationUtils
    import kotlinx.android.synthetic.main.activity_main.*
      
    class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            fade_in.setOnClickListener {
                textView.visibility = View.VISIBLE
                val animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in)
                textView.startAnimation(animationFadeIn)
            }
            fade_out.setOnClickListener {
                val animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out)
                textView.startAnimation(animationFadeOut)
                Handler().postDelayed({
                    textView.visibility = View.GONE
                }, 1000)
            }
            zoom_in.setOnClickListener {
                val animationZoomIn = AnimationUtils.loadAnimation(this, R.anim.zoom_in)
                textView.startAnimation(animationZoomIn)
            }
            zoom_out.setOnClickListener {
                val animationZoomOut = AnimationUtils.loadAnimation(this, R.anim.zoom_out)
                textView.startAnimation(animationZoomOut)
            }
            slide_down.setOnClickListener {
                val animationSlideDown = AnimationUtils.loadAnimation(this, R.anim.slide_in)
                textView.startAnimation(animationSlideDown)
            }
            slide_up.setOnClickListener {
                val animationSlideUp = AnimationUtils.loadAnimation(this, R.anim.slide_out)
                textView.startAnimation(animationSlideUp)
            }
            bounce.setOnClickListener {
                val animationBounce = AnimationUtils.loadAnimation(this, R.anim.bounce)
                textView.startAnimation(animationBounce)
            }
            rotate.setOnClickListener {
                val animationRotate = AnimationUtils.loadAnimation(this, R.anim.rotate)
                textView.startAnimation(animationRotate)
            }
        }
    }

    As, AndroidManifest.xml file is very important file in android application, so below is the code of manifest file.

      AndroidManifest.xml file

      Code inside src/main/AndroidManifest.xml file would look like below




      <?xml version="1.0" encoding="utf-8"?>
          package="net.geeksforgeeks.animationsinkotlin">
        
          <application
              android:allowBackup="true"
              android:icon="@mipmap/ic_launcher"
              android:label="@string/app_name"
              android:roundIcon="@mipmap/ic_launcher_round"
              android:supportsRtl="true"
              android:theme="@style/AppTheme">
              <activity android:name=".MainActivity">
                  <intent-filter>
                      <action android:name="android.intent.action.MAIN" />
        
                      <category android:name="android.intent.category.LAUNCHER" />
                  </intent-filter>
              </activity>
          </application>
        
      </manifest>

      Run as Emulator:



      You can find the complete code here: https://github.com/missyadavmanisha/AnimationsInKotlin

      Want a more fast-paced & competitive environment to learn the fundamentals of Android?
      Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
      My Personal Notes arrow_drop_up
      Recommended Articles
      Page :