How to Show and Hide a View with a Slide Up and Down Animation in Android?

View in android is an area of the screen which is responsible for drawing and event handling. The layout is a collection of views. It consists of some content like images, text, a button, or anything that an android app can display. In this article, we will take a look at how to show and hide a view in an Android Application. We have to create a view that will hide and/or become visible on a button click.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Working with activity_main.xml

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    tools:context=".MainActivity">
    <!-- button to show or hide view -->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#FF00FF00"
        android:text="Hide/Show"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toTopOf="@+id/view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- view to be shown or hidden on button click -->
    <TextView
        android:id="@+id/view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Welcome To GeeksForGeeks"
        android:textColor="#FF00FF00"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.

Java

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private TextView view;
    private boolean opened;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        view = findViewById(R.id.view);
        view.setVisibility(View.INVISIBLE);

        // for changing the background color of title bar
        ActionBar aBar = getSupportActionBar();
        ColorDrawable cd = new ColorDrawable(Color.parseColor("#FF00FF00"));
        if (aBar != null) {
            aBar.setBackgroundDrawable(cd);
        }

        // using setOnclickListener on button to do hide and show
        findViewById(R.id.button).setOnClickListener(v -> {
            if (!opened) {

                // visibility of view
                view.setVisibility(View.VISIBLE);
                TranslateAnimation animate = new TranslateAnimation(0, 0, view.getHeight(), 0);

                // duration of animation
                  animate.setDuration(500);
                animate.setFillAfter(true);
                view.startAnimation(animate);
            } else {
                view.setVisibility(View.INVISIBLE);
                TranslateAnimation animate = new TranslateAnimation(0, 0, 0, view.getHeight());
                animate.setDuration(0);
                view.startAnimation(animate);
            }
            opened = !opened;
        });
    }
}

Kotlin

import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.os.Bundle
import android.view.View
import android.view.animation.TranslateAnimation
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var view: TextView
    private var opened: Boolean = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        view = findViewById(R.id.view)
        view.visibility = View.INVISIBLE

        // for changing the background color of title bar
        val aBar = supportActionBar
        val cd = ColorDrawable(Color.parseColor("#FF00FF00"))
        aBar?.setBackgroundDrawable(cd)

        // using setOnclickListener on button to do hide and show
        findViewById<View>(R.id.button).setOnClickListener {
            if (!opened) {
                // visibility of view
                view.visibility = View.VISIBLE
                val animate = TranslateAnimation(0F, 0F, view.height.toFloat(), 0F)
                // duration of animation
                animate.duration = 500
                animate.fillAfter = true
                view.startAnimation(animate)
            } else {
                view.visibility = View.INVISIBLE
                val animate = TranslateAnimation(0F, 0F, 0F, view.height.toFloat())
                animate.duration = 0
                view.startAnimation(animate)
            }
            opened = !opened
        }
    }
}

Output: