Translate animation in Android is useful in moving widgets along X and Y axis. The animation is essentially some last-minute instructions to the screen composition engine to offset the view by x/y, rotate by z

translate animation in android
Translate animation in Android

To use the translate animation, we can use the <translate> tag in android’s anim xml resource file. We will show the example later, but first lets learn more about the <translate> tag attributes.

The <translate> Tag

The translate tag has the following attributes that helps it in showcasing the translate animation in android.

android:fromXDelta | android:fromYDelta

The fromXDelta or fromYDelta attribute is used to determine the starting point of the translate animation. Its value is in percentage where 0% means the animation will start from the x,y coordinate where its located.

android:toXDelta | android:toYDelta

The toXDelta or toYDelta is used to determine till which point the animation will take place. Its value is also in percentage of the height of the view you are animating.

android:duration

The duration attribute in the translate is used to determine the duration till which the animation will be playing. The number is in milliseconds, so 1000ms is 1 second.

android:repeatCount

As the name suggests, the repeatCount attribute is used to determine how many times the animation must be played. You can this number to infinite in case you want the animation to loop forever till the view is Visible on the screen.

android:repeatMode

The repeatMode attribute is used to determine that once the animation has played completely from point A to B in suppose 1000ms, then should it play in reverse mode from point B to point A or play from point A again in case the repeatCount is infinite.

Hands on Practical

Now that we have learned about all important attributes of the translate animation in android, its time to put it inn practice and run it using Android Studio.

Learn more about animating views in android here!

Getting Started

Create a new project file in Android Studio.

Creating animation file

Click on the Project panel on the Left. Search for the ‘res‘ folder. Right click on the res folder. Go to New >> Android Resource Directory.

You will see a popup dialog as shown above. Name the Directory name as ‘anim’ and Resource type as ‘anim’. Click OK.

Now you’ll notice an anim folder inside the res folder has been created.

Right click on the anim folder and go to New >> Android Anim Resource File.

A new popup window will open and here name the xml file as ‘translate.xml’.

Now as we have explain above about the <translate> tag and its attributes, we will be using it to create our animation.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:fromXDelta="0%"
        android:toXDelta="50%"
        android:duration="500"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>
</set>

In the code above, the view will move from 0 percent to 50 percent in 500 milliseconds. The view will repeat infinite and once the animation is complete it will move back from point B to point A again because we have set the repeatMode as reverse.

The Layout File

For this example we have used a Relative layout and inside it we have used a button widget which is centered in the parent. The XML code for the same is as follows:

<?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=".ButtonTranslateAnimation">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Demo Button"
        android:layout_centerInParent="true"
        android:id="@+id/translate_button"/>

</RelativeLayout>

Code it in Kotlin

Now lets move to MainActivity.kt file and code up our animation and attach it to the respective view.

package com.example.androiddvlpr

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import android.widget.Button

class ButtonTranslateAnimation : AppCompatActivity() {

    private lateinit var button : Button
    private lateinit var anim : Animation

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

        button = findViewById(R.id.translate_button)
        anim = nimationUtils.loadAnimation(this,R.anim.translate_animation)
        button.startAnimation(anim)

    }
}

In the code above we have created a Button and an Animation object. Next we’ve used the startAnimation(anim_res) method inside which we have passed the Animation resource file.

TaDa! Build and run your code and you will notice that the button is moving horizontally infinitely.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like