Animated swap position of two buttons

Question

I am trying to swap the position of two buttons. My swapping code looks is:

private void exchangeButtons(Button btn1, Button btn2) {
    // Create the animation set
    AnimationSet exchangeAnimation = new AnimationSet(true);
    TranslateAnimation translate = new TranslateAnimation(
        Animation.RELATIVE_TO_SELF, btn2.getLeft(),
        Animation.RELATIVE_TO_SELF, btn1.getLeft(),
        Animation.RELATIVE_TO_SELF, btn2.getRight(),
        Animation.RELATIVE_TO_SELF, btn1.getRight());
    translate.setDuration(500);
    exchangeAnimation.addAnimation(translate);
    //int fromX = btn1.getLeft();
    //int fromY = btn1.getRight();
    //int toX = btn2.getLeft();
    //int toY = btn2.getRight();
    Log.d("ArrangeMe", 
        "view1 pos:" + btn1.getLeft() + ", 
        " +btn1.getRight() + "view2 pos:" + 
        btn2.getLeft() + ", " + btn2.getRight());
    AnimationSet exchangeAnimation1 = new AnimationSet(true);
    TranslateAnimation translate1 = new TranslateAnimation( 
        Animation.RELATIVE_TO_SELF, btn1.getLeft(),
        Animation.RELATIVE_TO_SELF, btn2.getLeft(),
        Animation.RELATIVE_TO_SELF, btn1.getRight(),
        Animation.RELATIVE_TO_SELF, btn2.getRight());
    translate1.setDuration(500);
    exchangeAnimation1.addAnimation(translate1);
    // EXECUTE btn1.startAnimation(exchangeAnimation);
    btn2.startAnimation(exchangeAnimation1);
}

I call the code as below:

exchangeButtons(button1, button2);

My layout looks as below:

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal">

    <Button 
        android:text="One" 
        android:id="@+id/button1" 
        android:layout_height="70px" 
        android:layout_width="70px" 
        android:layout_weight="1">
    </Button>
    <Button 
        android:text="Two" 
        android:id="@+id/button2" 
        android:layout_height="70px" 
        android:layout_width="70px" 
        android:layout_weight="1">
    </Button>
</LinearLayout>

What happens when I execute the code is:

Instead of the buttons exchanging their positions, they just disappear for sometime[may be 500 ms] and reappear as they were originally.

How to resolve this problem ? Will it work properly in device ?

Answer 1

Android's TranslateAnimation doesn't reposition your components, it just animates the transition you want to do - after that, it's up to you to change the layout params of your component (take a look at this post).

P.S. You can use directly the translate animation, without using a whole new animation set. Another good thing will be to create the animations when your layout is inflated and to override onSizeChanged(int, int, int, int) to re-create them using the new dimensions.

What's the layout you are using?

Answer 2

You wont get the getRight value in onCreate because the UI hasn't been drawn on the screen so none of the UI elements are measure yet. Try this

ViewTreeObserver vto = btn1.getViewTreeObserver();  
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {  
    @Override  
    public void onGlobalLayout() {  
        btn1.getViewTreeObserver().removeGlobalOnLayoutListener(this);  
        int left = btn1.getLeft(); 
    }  
});

Put the code in the onCreate method