How does TranslateAnimation work on Android?

Yasir Khan picture Yasir Khan · Jul 16, 2012 · Viewed 32.1k times · Source

I went through

TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

but am still confused about how Translate animation works.

Can someone please explain how it works? I read the docs which say

fromXDelta  Change in X coordinate to apply at the start of the animation
toXDelta    Change in X coordinate to apply at the end of the animation
fromYDelta  Change in Y coordinate to apply at the start of the animation
toYDelta    Change in Y coordinate to apply at the end of the animation 

but it is still not clear to me how it works.

EDIT: I have a Button and a LinearLayout without any children. When I am clicking on the Button I want to dynamically generate a TextView and animate that TextView to appear in the LinearLayout. The number of TextViews will depend upon the number of clicks on the Button.

Answer

Hiral Vadodaria picture Hiral Vadodaria · Jul 16, 2012

AFAIK,there would be relative connection between this.

That is,if you want to translate a hidden textview from right of screen to left of screen,on click of a button,you actually need to translate it from 100% of X-direction(right side of screen) to 0% of X-direction(left side of screen).

At this point,you don't need to change Y-direction at all.so that would be 0% for both the options.So finally,you will have:

fromXDelta 100%

toXDelta 0%

fromYDelta 0%

toYDelta 0%

you can restrict view of the component by setting this percentages between 0 to 100,as per your requirement.

Similarly,if you need to translate your component on Y-direction as well,then you need to change 0% to some other value.

Hope,its clear to you now.

EDIT :

for your requirement,you need to override onclick of button-1,and there you can control button-2's visibility as well as translation.

create animation file in anim folder in your res.

translate_button.xml:

<?xml version="1.0" encoding="utf-8"?>
<!-- translating button from right to left -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:fromXDelta="100%" android:toXDelta="0%"
        android:fromYDelta="0%" android:toYDelta="0%"
        android:duration="900"
    />
</set>

now,in your activity file,

...

// ll  is linear layout containing button_2
//counter is used to manage visibility of button_2 on click of button_1,i.e.1st click-button_2 would be visible,on 2nd click on button_1,it would be invisible.

//you can change behavior as per your need

button_2.setVisibility(View.GONE);
button_1.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View arg0) {

        if(counter<1)
        {
            counter++;                  
            button_2.setVisibility(View.VISIBLE);
            Animation anim=AnimationUtils.loadAnimation(context, R.anim.translate_button);
            button_2.startAnimation(anim);
        }
        else
        {
            counter=0;
            button_2.setVisibility(View.GONE);
        }
    }
});
ll.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View arg0) {

        if(counter==1)
        {
            counter=0;
            button_2.setVisibility(View.GONE);
        }
    }
});

...