Transfer view from one layout to another using translation animation

Question

I am new to Android animation, and my requirement is to translate a view from one layout to a layout in one XML file when this view is clicked.

Scenario: Suppose I click on the button present at the top of the header in the XML file and it should move / translate down (it should influence the fact that it lies on another layout down to the header), and I also want the user clicks on the same again, now he must go to the starting position.

Here I explain 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 EXACT REQUIREMENTS REQUIREMENTS (please read carefully :)

Here I have two internal internal layouts: -

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

Now the view (Button → btnSearchHeader) lies in my top layout, and I want to animate the same with the bottom layout (this should affect the fact that it is translated using the translation animation to the bottom layout) when this button is clicked, and when the user clicks to this button, it should again return to its original position using translational animation .. that is, it should be displayed in the top layout

I don’t know how to convey these effects using the translation of animations, but I just have a basic knowledge of translation animation, which is not enough for me to work on my requirement.

Noticeable noticeable help of any type.

thanks

Answer 1

Have you tried something simple as shown below?

  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 really need the look of a button to change parents, you can use the 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 a similar listener for moveUpAnim .)

However, I doubt that you need to do this to achieve the desired visual effect. But if you do this part, you probably also need to set a fixed height for your top view, not wrap_content . (Otherwise, if the layout transition occurs when the button is moved to the bottom view, the top height of the layout can go to 0 if there is nothing in it.) The easiest way is to do this directly in the xml layout file. However, if you want to "do it on the fly," you can change the height of the layout 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. }