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
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
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.
2 comments