Search code examples
androidandroid-animationsurfaceviewandroid-constraintlayout

Slide Up/Down SurfaceView in ConstraintLayout


I use Constraint Layout as root with 3 subviews:

  • Textview
  • Button
  • SurfaceView (View.Visibility = Gone)

I want when I click on Button, SurfaceView appear (View.Visibility = Visible) from:

Y = - SurfaceView.height

to:

Y = 0

And when I click a second time on the button, SurfaceView disappear (View.Visibility = Gone) from:

Y = 0

to:

Y = - SurfaceView.height

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Animation"
        android:textSize="30sp"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <Button
        android:id="@+id/display_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dsiplay"
        android:textSize="30sp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />


    <SurfaceView
        android:id="@+id/animation_view"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:visibility="gone"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />



</android.support.constraint.ConstraintLayout>

MainActivity:

public class MainActivity extends Activity {


    boolean isVisible = false;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);


        findViewById(R.id.display_btn).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {

                isVisible = !isVisible;

                if(isVisible){

                    /*
                    * Start Animation slide to down
                    * */

                    findViewById(R.id.animation_view).animate()
                            .translationY(0)
                            .setListener(new AnimatorListenerAdapter() {

                                @Override
                                public void onAnimationStart(Animator animation) {

                                    super.onAnimationStart(animation);


                                    findViewById(R.id.animation_view).setY(-findViewById(R.id.animation_view).getHeight());

                                    findViewById(R.id.animation_view).setVisibility(View.VISIBLE);

                                }

                            });

                }
                else {

                    /*
                    * Start Animation slide to up
                    * */


                    findViewById(R.id.animation_view).animate()
                            .translationY(-findViewById(R.id.animation_view).getHeight())
                            .setListener(new AnimatorListenerAdapter() {
                                @Override
                                public void onAnimationStart(Animator animation) {

                                    super.onAnimationStart(animation);

                                }

                                @Override
                                public void onAnimationEnd(Animator animation) {

                                    super.onAnimationEnd(animation);

                                    findViewById(R.id.animation_view).setVisibility(View.GONE);

                                }

                            });

                }

            }

        });



    }
}

When I click for the first time it doesn't work (slide down).


Solution

  • Your SurfaceView doesn't have the correct initial conditions. These conditions correct themselves after going through an animation, so that is why subsequent animations work. Add the following to the SurfaceView XML:

    android:translationY="-150dp"
    

    You could also do this in code but you need to do it earlier than in the onClick() handler.