Move ImageView from one layout to another layout within same activity using animation

Question

I want to translate this imageview from relative_bottom to relative_top layout through animation. I want to put that image in center of relative_top layout. this is my splashscreen so i want this to transit automatically.

I dont know how to set exact position.

What should I add to get such output? I have tried many ways but couldn't get a solution.

Sample xml file:

<LinearLayout android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
       android:background="@drawable/background"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg"
            android:layout_weight="2"
            android:layout_gravity="center"
            android:id="@+id/relative_top"
            android:orientation="vertical">

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:paddingLeft="50dp"
            android:paddingRight="50dp"
            android:id="@+id/bottom"
            android:layout_gravity="center_horizontal"
            android:gravity="top">
            <ProgressBar>
               ....
               </Progressbar>        
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/relative_bottom"
                android:layout_alignTop="@id/progressBar"
                android:layout_centerInParent="true"
                >
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageview"
                    android:src="@drawable/logo"
                    android:scaleType="fitCenter"
                    />

            </RelativeLayout>

        </RelativeLayout>

</LinearLayout>

Add images for both position, so it can help to understand question easily. — Nitin Patel, Jun 05 '17 at 06:52
Have you tried this way:- https://stackoverflow.com/a/22370395/7806873 — Nitin Patel, Jun 05 '17 at 06:58

score 2 · Answer 1 · answered Jun 05 '17 at 07:09

Copy from here

Add

compile 'com.android.support:transition:25.2.0'

to your app dependencies. Then, add this line before change gravity (TransitionManager from android.support.transition package)

TransitionManager.beginDelayedTransition(parentOfAnimatedView);

For example:

mContainer.setOnClickListener(v -> {
        TransitionManager.beginDelayedTransition((ViewGroup) mContainer.getParent());
        FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mContainer.getLayoutParams();
        layoutParams.gravity = Gravity.TOP;
        mContainer.setLayoutParams(layoutParams);
    });

score 1 · Answer 2 · answered Jun 05 '17 at 07:00

Try below animation

//0,0 is the  current coordinates
Animation an = new TranslateAnimation(fromX,fromY,toX,toY);
an.setFillAfter(true);// to keep the state after animation is finished
imageView.startAnimation(an);// to start animation obviously

Get screen height and use it to set "toY" parameter to make it move from bottom to top.

JBJ · Answer 3 · 2018-01-03T09:59:48.500

First create an xml for the animation:

fab_show.xml

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

<!--Move-->
<translate
    android:duration="650"
    android:fromXDelta="650%"
    android:fromYDelta="350%"
    android:interpolator="@android:anim/linear_interpolator"
    android:toXDelta="0%"
    android:toYDelta="0%">

</translate>

fromXDelta and fromYDelta is the starting position of the imageView (a FAB in my case) which you can adjust according to your requirement and toXDelta, toYDelta is the position where you want the item to be after the completion of animation.

Here is how you use this animation:

 private ImageView img;

Animation fab_show = AnimationUtils.loadAnimation(getApplication(), R.anim.hsfab1_show);

To trigger the animation:

img = (ImageView) findViewById(R.id.your_imageview);
img.startAnimation(fab_show);

i already have tried this. this effect is limited to my relative_bottom layout hieght. it doesnt transit to relative_top layout . — Shuchi Sheth, Jun 05 '17 at 07:29

score 1 · Accepted Answer · answered Jun 05 '17 at 08:00

1

Try this:

public void moveImage(){

    //layout is your Relativelayout
    TransitionManager.beginDelayedTransition(layout);

    RelativeLayout.LayoutParams imageparam = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);

    //add Rule where you want to align it
    imageparam.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);

    imageView.setLayoutParams(imageparam);
}

answered Jun 05 '17 at 08:00

mesinger

80
10

thank you.it worked. but can you tell me how to transit from middle to top. In my output, my half of the image logo goes out of the screen. n i want to place it in center of my top layout. – Shuchi Sheth Jun 05 '17 at 10:02
Well, why you want to have 230000 different layouts in your xml anyway, that isn't good practice in the first place. And i'm not sure you can achieve this type of transition with TransitionManager, cause you want to animate between different layouts, if this is not possible you could try a quite cool looking fade animation with ObjectAnimator. – mesinger Jun 05 '17 at 19:54
PS: if my answer was helpful, i would appreciate a +rep(left side of comment), cause i want to bump my reputation, and press the check mark as well, thanks:D – mesinger Jun 05 '17 at 20:01
I didnt get perfect solution. but Works better than before. – Shuchi Sheth Jun 06 '17 at 11:05

Move ImageView from one layout to another layout within same activity using animation

4 Answers4