Button does not work after animation android

Question

I have created a view in android and I need to animate it from bottom to top and vice versa. I have succeeded in doing this using TranslateAnimation. But the problem is that I have a few buttons on the view. WHen animated there touch point remains at the original place and doesn't get moved to the new position. So when I click the original postion of the button again the top to bottom animation runs but the button is not present there.

I have searched the internet and people are saying that call view.layout with the parameters, but my question is how to get the latest position of the view because I have tried to fetch the postion on animation start and animation end and it remains same.

Also please dont give the answer that it actually does not move the view it creates a copy and move it etc etc becuase I have searched but could not find a proper solution described or implemented.

Here is the code:

import android.content.Context;
import android.graphics.Matrix;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.Transformation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import com.Card_Android.R;

public class GameMenuScreenAnimated extends LinearLayout {

private final View mainView;

public GameMenuScreenAnimated(Context context,
        final GameViewController dashboardVC) {

    super(context);
    LayoutInflater inflater = LayoutInflater.from(context);
    mainView = inflater.inflate(R.layout.main_menu, this);

    ImageButton btn = (ImageButton) mainView.findViewById(R.id.trade);
    btn.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            System.out.println("yaaaaaay!!!!");

        }
    });

    slideDown(mainView);
}

public View getMainView() {
    return mainView;
}

private void slideUp(final View view) {

    Animation slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF,
            0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
            Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
            0.5f);
    slide.setDuration(1000);
    slide.setFillAfter(true);
    slide.setFillEnabled(true);
    view.startAnimation(slide);
    slide.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {
            int[] startPosition = new int[2];
            view.getLocationOnScreen(startPosition);
            System.out.println("onAnimationStart " + startPosition[0]
                    + " , " + startPosition[1]);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
             int[] endPosition = new int[2];
             view.getLocationOnScreen(endPosition);
             System.out.println("onAnimationEnd " + endPosition[0] + " , "
             + endPosition[1]);

        }

    });

}

private final AnimationListener slideDownAnimationListener = new AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        final int left = mainView.getLeft();
        final int top = mainView.getTop();
        final int right = mainView.getRight();
        final int bottom = mainView.getBottom();
        mainView.layout(left, (int) Math.round(top + 0.25 * top), right,
                (int) Math.round(bottom + 0.25 * bottom));
    }
};

private final Animation slideDownAnimation = new TranslateAnimation(
        Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
        Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.25f);

private void slideDown(final View view) {
    slideDownAnimation.setDuration(1000);
    slideDownAnimation.setFillAfter(true);
    slideDownAnimation.setFillEnabled(true);
    slideDownAnimation.setAnimationListener(slideDownAnimationListener);
    view.startAnimation(slideDownAnimation);
}
}

The XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="bottom"
>
 <LinearLayout 
    android:id="@+id/tableLayout1"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:gravity="center"
    >

        <ImageButton
            android:id="@+id/trade"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="0dp"

            android:background="@null"
            android:scaleType="centerCrop"
            android:src="@drawable/upgrade_btn" />

    </LinearLayout>

 <LinearLayout 
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:gravity="center"
    android:layout_height="wrap_content"
    >

        <ImageButton
                    android:id="@+id/evolution"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="0dp"
                    android:background="@null"
                    android:scaleType="centerCrop"
                    android:src="@drawable/sell_btn" />
            <ImageButton
                    android:id="@+id/trade"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="0dp"
                    android:background="@null"
                    android:scaleType="centerCrop"
                    android:src="@drawable/upgrade_btn"
                     />

    </LinearLayout>
</LinearLayout>

The drawable xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/evolution">
<item android:state_pressed="true" android:drawable="@drawable/menu_off" /> <!-- pressed -->
<item android:state_focused="true" android:drawable="@drawable/menu_on" /> <!-- focused -->
<item android:drawable="@drawable/menu_on" /> <!-- default -->
</selector>

All I want to do is to create is a simple menu with few buttons which slides in and out on the button click.

Answer 1

I ran into the same problem a while ago. You'll find my answer here:

How can I apply the changes to the position of a view after an animation?

Another way is to use the animate()-Function or an ObjectAnimator. Both of these ways of animation affect the view-object itself, instead of only animating the pixels on the screen without updating the internal values of the whereabouts of the view. You find more info about these functions here:

animate() (a.k.a. ViewPropertyAnimator): http://developer.android.com/guide/topics/graphics/prop-animation.html#view-prop-animator

ObjectAnimator: http://developer.android.com/guide/topics/graphics/prop-animation.html#object-animator

The whole Animation-chapter is a very good read. It takes maybe 20 minutes, but after that you have a much better picture of what's going on with animations on Android.