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 version = "1.0" encoding = "utf-8" ?>
< androidx.constraintlayout.widget.ConstraintLayout xmlns:android = "http://schemas.android.com/apk/res/android"
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.
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;
});
}
} |
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
}
}
} |