Show and hide a View with a slide up/down animation Show and hide a View with a slide up/down animation android android

Show and hide a View with a slide up/down animation


With the new animation API that was introduced in Android 3.0 (Honeycomb) it is very simple to create such animations.

Sliding a View down by a distance:

view.animate().translationY(distance);

You can later slide the View back to its original position like this:

view.animate().translationY(0);

You can also easily combine multiple animations. The following animation will slide a View down by its height and fade it in at the same time:

// Prepare the View for the animationview.setVisibility(View.VISIBLE);view.setAlpha(0.0f);// Start the animationview.animate()    .translationY(view.getHeight())    .alpha(1.0f)    .setListener(null);

You can then fade the View back out and slide it back to its original position. We also set an AnimatorListener so we can set the visibility of the View back to GONE once the animation is finished:

view.animate()    .translationY(0)    .alpha(0.0f)    .setListener(new AnimatorListenerAdapter() {        @Override        public void onAnimationEnd(Animator animation) {            super.onAnimationEnd(animation);            view.setVisibility(View.GONE);        }    });


I was having troubles understanding an applying the accepted answer. I needed a little more context. Now that I have figured it out, here is a full example:

enter image description here

MainActivity.java

public class MainActivity extends AppCompatActivity {    Button myButton;    View myView;    boolean isUp;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        myView = findViewById(R.id.my_view);        myButton = findViewById(R.id.my_button);        // initialize as invisible (could also do in xml)        myView.setVisibility(View.INVISIBLE);        myButton.setText("Slide up");        isUp = false;    }    // slide the view from below itself to the current position    public void slideUp(View view){        view.setVisibility(View.VISIBLE);        TranslateAnimation animate = new TranslateAnimation(                0,                 // fromXDelta                0,                 // toXDelta                view.getHeight(),  // fromYDelta                0);                // toYDelta        animate.setDuration(500);        animate.setFillAfter(true);        view.startAnimation(animate);    }    // slide the view from its current position to below itself    public void slideDown(View view){        TranslateAnimation animate = new TranslateAnimation(                0,                 // fromXDelta                0,                 // toXDelta                0,                 // fromYDelta                view.getHeight()); // toYDelta        animate.setDuration(500);        animate.setFillAfter(true);        view.startAnimation(animate);    }    public void onSlideViewButtonClick(View view) {        if (isUp) {            slideDown(myView);            myButton.setText("Slide up");        } else {            slideUp(myView);            myButton.setText("Slide down");        }        isUp = !isUp;    }}

activity_mail.xml

<?xml version="1.0" encoding="utf-8"?><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="com.example.slideview.MainActivity">    <Button        android:id="@+id/my_button"        android:layout_centerHorizontal="true"        android:layout_marginTop="100dp"        android:onClick="onSlideViewButtonClick"        android:layout_width="150dp"        android:layout_height="wrap_content"/>    <LinearLayout        android:id="@+id/my_view"        android:background="#a6e1aa"        android:orientation="vertical"        android:layout_alignParentBottom="true"        android:layout_width="match_parent"        android:layout_height="200dp">    </LinearLayout></RelativeLayout>

Notes

  • Thanks to this article for pointing me in the right direction. It was more helpful than the other answers on this page.
  • If you want to start with the view on screen, then don't initialize it as INVISIBLE.
  • Since we are animating it completely off screen, there is no need to set it back to INVISIBLE. If you are not animating completely off screen, though, then you can add an alpha animation and set the visibility with an AnimatorListenerAdapter.
  • Property Animation docs


Now visibility change animations should be done via Transition API which available in support (androidx) package. Just call TransitionManager.beginDelayedTransition method with Slide transition then change visibility of the view.

enter image description here

import androidx.transition.Slide;import androidx.transition.Transition;import androidx.transition.TransitionManager;private void toggle(boolean show) {    View redLayout = findViewById(R.id.redLayout);    ViewGroup parent = findViewById(R.id.parent);    Transition transition = new Slide(Gravity.BOTTOM);    transition.setDuration(600);    transition.addTarget(R.id.redLayout);    TransitionManager.beginDelayedTransition(parent, transition);    redLayout.setVisibility(show ? View.VISIBLE : View.GONE);}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/parent"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <Button        android:id="@+id/btn"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="play" />    <LinearLayout        android:id="@+id/redLayout"        android:layout_width="match_parent"        android:layout_height="400dp"        android:background="#5f00"        android:layout_alignParentBottom="true" /></RelativeLayout>

Check this answer with another default and custom transition examples.