Translate a View from One Layout to Another with Translate Animation

Question

I am new in Android animation and my requirement is to translate a view from one layout to layout in a single xml file on click of that view.

Scenario: Suppose I click a button, present on the top of the header in a xml file,and it should move/translate downwards (it should give an impact that it lies on the other layout downwards to header), and also I want that when the user clicks on the same again, it should now move to its original position.

Here I am explaining with my xml file:

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/app_bg"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/top"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/header"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" >

        <Button
            android:id="@+id/btnSearchHeader"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_centerInParent="true"
            android:background="@drawable/search_icon" />


    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/bottom"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/app_transparent"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_marginTop="10dp"
        android:visibility="visible" >

        <Button
            android:id="@+id/btnMenu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="5dp"
            android:text="ABC" />

        <Button
            android:id="@+id/btnSearchSelected"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/btnMenu"
            android:text="CDE" />
    </RelativeLayout>
</LinearLayout>

MORE PRECISE REQUIREMENT SPECIFICATION (Kindly read carefully:)

Here I have two sub inner layouts:-

Top Layout - id-> top Bottom Layout- id -> bottom

Now a view (Button -> btnSearchHeader) is lying in my top layout and I want to animate the same to the bottom layout (it should give an impact that it is translated with a translate animation to the bottom layout) on click of that button and when the user clicks on that button, it should again translate back to its original position with a translate animation .. ie it should show back in the top layout

I have no idea how to give these impacts using translate animations, however i just have a basic translate animation knowledge which is insufficient for me to work upon my requirement.

Any type of related help is appreciable.

Thanks

Answer 1

Have you tried something simple like the following?

 final int topHeight = findViewById(R.id.top).getHeight();         
 final int bottomHeight = findViewById(R.id.bottom).getHeight();   
 final View button = findViewById(R.id.btnSearchHeader);                                                                              
 final ObjectAnimator moveDownAnim = ObjectAnimator.ofFloat(button, "translationY", 0.F, topHeight + bottomHeight / 2 - button.getHeight() / 2);
 final ObjectAnimator moveUpAnim = ObjectAnimator.ofFloat(button, "translationY", topHeight + bottomHeight / 2 - button.getHeight() / 2, 0.F);
 button.setOnClickListener(new View.OnClickListener() { 
     @Override                   
     public void onClick(View v) {     
         if (0.F == v.getTranslationY())
             moveDownAnim.start(); 
         else                    
             moveUpAnim.start();
     }
 });

If you actually need the button view to change parents, you can use AnimatorListener to achieve this at the end of each animation. Something like:

moveDownAnim.addListener(new Animator.AnimatorListener() { 
    @Override                                          
    public void onAnimationEnd(Animator animation) {   
        ((ViewGroup)findViewById(R.id.top)).removeView(button);
        ((ViewGroup)findViewById(R.id.bottom)).addView(button);
        ((RelativeLayout)button.getLayoutParams()).addRule(RelativeLayout.CENTER_IN_PARENT);
        button.setTranslationY(0.F);        // Since it is now positioned in the new layout, no need for translation. 
    }       
    @Override
    public void onAnimationCancel(Animator animation)  { /* NOP */ }
    @Override
    public void onAnimationRepeat(Animator animation)  { /* NOP */ }
    @Override
    public void onAnimationStart(Animator animation)   { /* NOP */ }
});

(And analogous listener for the moveUpAnim .)

However, I doubt you need to actually do this to achieve the visual effect you want. But if you do this part, you will probably also need to set a fixed height for your top view as opposed to wrap_content . (Otherwise, if a layout pass happens while the button has been moved to the bottom view, the top layout's height might go to 0 if there's nothing else in it.) Easiest would be to just do this directly in the xml layout file. However, if you want to "do it on the fly", you can change the layout's height in the onAnimationEnd() method using something like:

@Override                                          
public void onAnimationEnd(Animator animation) { 
    final ViewGroup topLayout = findViewById(R.id.top);
    topLayout.getLayoutParams().height = topLayout.getHeight();    // Keep it the same height...
    topLayout.removeView(button);
    ((ViewGroup)findViewById(R.id.bottom)).addView(button);
    ((RelativeLayout)button.getLayoutParams()).addRule(RelativeLayout.CENTER_IN_PARENT);
    button.setTranslationY(0.F);        // Since it is now positioned in the new layout, no need for translation. 
}