How to show some part of the image on the screen at the end of animation

Question

I am creating an animation in which an image translate from one direction to another, animation moves half of the image out side the screen but image shows full when animation ends. I just want to show half of the image after animation.

Currently I am using full image in the image view when animation starts and replace it with the half image when animation ends but it shows an image change reflection which looks awkward which is my actual problem.

Below is my xml and class file.

animation code

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration = "2000"
    android:fillBefore="true"
    android:fillEnabled="true"
    android:fromXDelta = "-300%"
    android:fromYDelta="200%"
    android:toXDelta="60%">

</translate>

animimv5.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                imv5.setBackgroundResource(R.drawable.img5);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {

            }
            @Override
            public void onAnimationEnd(Animation animation) {
                imv5.setBackgroundResource(R.drawable.img5_2);
            }
        });

Check this post: http://stackoverflow.com/questions/3345084/how-can-i-animate-a-view-in-android-and-have-it-stay-in-the-new-position-size fillAfter=true fillEnabled=true — Juangcg, Sep 02 '13 at 10:36
What SDK are you targeting ? I can post you a full solution using ObjectAnimator , but it works only from API level 11 . — Ivelius, Sep 03 '13 at 12:25

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You might try following:

in xml (add it to set parameter) android:fillAfter or using related method in class source setFillAfter(boolean)

When set to true, the animation transformation is applied after the animation is over. According to documentation here When set to true, the animation transformation is applied after the animation is over. The default value is false. If fillEnabled is not set to true and the animation is not set on a View, fillAfter is assumed to be true.

For additional tips and explanations check Chet's blog post

Hope it helps.. ;)

score 0 · Answer 2 · edited Aug 23 '17 at 12:42

Here you go, sir :

MainActivity :

    public class MainActivity extends Activity {

    private View animatedView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        animatedView = findViewById(R.id.view);
    }

    public void animate(View view) {
        int targetX = ((View) animatedView.getParent()).getWidth() - animatedView.getWidth() / 2;
        ObjectAnimator.ofFloat(animatedView, "x", 0, targetX).setDuration(1000).start();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

Layout XML :

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity">

    <TextView
            android:id="@+id/view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#CC0000"
            android:padding="30dp"
            android:textColor="@android:color/white"
            android:text="@string/hello_world"/>
    <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Animate"
            android:onClick="animate"
            android:id="@+id/button"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"/>

</RelativeLayout>

How to show some part of the image on the screen at the end of animation

2 Answers2