Animate view to new location after another view setVisibility(GONE)

Question

I want to show 3 Views in my layout, but only 2 at a time. When I press a button, I want the most left view to slide out to the left, the middle one to slide with it, taking the start space of the left view, and the most right view should slide into the screen.

Here are some screenshots:

Before animation:
enter image description here

During animation (paint edit ^^): enter image description here

After animation: enter image description here

This is my layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="3" >

    <FrameLayout
        android:id="@+id/stations_stations"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:layout_weight="1"
        android:background="@drawable/fragment_border" />

    <FrameLayout
        android:id="@+id/stations_singlestation"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:layout_weight="2"
        android:background="@drawable/fragment_border" />

    <FrameLayout
        android:id="@+id/stations_trip"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:layout_weight="1"
        android:background="@drawable/fragment_border"
        android:visibility="gone" />

</LinearLayout>

So I am able to animate the lefmost view out of the screen using the code below:

    final View stationsContainer = findViewById(R.id.stations_stations);
    Animation an = AnimationUtils.loadAnimation(this, R.anim.slide_out_left);
    stationsContainer.startAnimation(an);
    an.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            stationsContainer.setVisibility(View.GONE);
        }
    });

This animates the leftmost view out of the window to the left, and sets it to gone. I can also animate the middle view to the new location, but when the animation is done, the middle view jumps back to its original position for a very short time, after which it takes the correct position. How can I avoid this jumping?

I think you could use LinearLayout and then on press of the button set the first one's visibility to View.GONE. Then when you want it back you would set it back to View.VISIBLE. Dunno, how that would work with animations, though. — Mark Nemec, Jun 28 '12 at 14:55
That is indeed what I have now, but it's not a pretty sight. — nhaarman, Jun 28 '12 at 14:56
Try to play around with [TranslateAnimation](http://developer.android.com/reference/android/view/animation/TranslateAnimation.html) — Mark Nemec, Jun 28 '12 at 14:58
Since you are not actually showing the code that is causing you problems, it will be difficult for anyone to really help you. — CommonsWare, Jul 01 '12 at 22:48

Ron · Accepted Answer · 2012-07-02T07:00:19.730

Use the LayoutTransistion class to automatically animate child views whenever their visibility changes between VISIBLE and GONE. This class is available from API 11 onward.

For sample code, check out samples that come with the sdk. Exact path is ApiDemos\src\com\example\android\apis\animation\LayoutAnimationsHideShow.java
Use LayoutAnimationController class to animate the views when they are added to and removed from a viewgroup. Here you have to hold a reference to a removed view, as you want to add it again later. This class is available in all versions of Android.

Sample code path :ApiDemos\src\com\example\android\apis\view\LayoutAnimation

Brilliant. I'm using the `LayoutTransition` class, the only thing you have to do is `setLayoutTransition(new LayoutTransition())`. Thanks! — nhaarman, Jul 02 '12 at 13:01

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

use animation to slide in and out. you will need to define animation as xml in your resources.

See this for example

Or you can use a ViewFlipper Try this as an example

There are plenty more examples on SO and web.

edited May 23 '17 at 10:30

Community

1
1

answered Jun 28 '12 at 14:57

Orlymee

2,349
1
22
24

score 0 · Answer 3 · answered Jun 28 '12 at 15:01

Add your FrameLayouts into a ViewFlipper. e.g.

<ViewFlipper>
 <FrameLayout1/>
 <FrameLayout2/>
 <FrameLayout3/>
</ViewFlipper>

Then in your code call setInAnimation(leftInAnim) and setOutAnimation(leftOutAnim) to the viewFlipper, and call showNext(), which will cause animations to be applied to the current view and the next view.

leftInAnim and leftOutAnim is an XML animation resource that tells the system how to animation current view: e.g.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

This will cause a view to slide in from the right (out of view) into current view

But can I show 2 Views at once as well? Now the Views just appear on their own. — nhaarman, Jun 28 '12 at 15:29
I've edited my question. I think `ViewFlipper` is not exactly what I need — nhaarman, Jun 28 '12 at 15:58

score -1 · Answer 4 · edited Apr 25 '18 at 12:05

-1

Simply add android:animateLayoutChanges=true to LinearLayout that hold all the views, you will get desired result

edited Apr 25 '18 at 12:05

ADM

20,406
11
52
83

answered Apr 25 '18 at 09:58

Muhammad Hassaan

874
6
18

Animate view to new location after another view setVisibility(GONE)

4 Answers4