This example demonstrate about how to Show and hide a View with a slide up/down animation in android.
Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project.
Step 2 − Add the following code to res/layout/activity_main.xml.
<?xml version = "1.0" encoding = "utf-8"?> <RelativeLayout xmlns:android = "https://schemas.android.com/apk/res/android" xmlns:tools = "https://schemas.android.com/tools" android:layout_width = "match_parent" android:layout_height = "match_parent"> <Button android:id = "@+id/button" android:layout_centerHorizontal = "true" android:layout_marginTop = "100dp" android:layout_width = "150dp" android:text = "Click" android:layout_height = "wrap_content"/> <LinearLayout android:id = "@+id/view" android:background = "#a6e1aa" android:orientation = "vertical" android:layout_alignParentBottom = "true" android:layout_width = "match_parent" android:layout_margin = "20dp" android:layout_height = "200dp"> <EditText android:hint = "User name" android:layout_width = "match_parent" android:layout_height = "wrap_content" /> <EditText android:hint = "Password" android:layout_width = "match_parent" android:layout_height = "wrap_content" /> </LinearLayout> </RelativeLayout>
In the above code, we have taken button to show /hide linear layout with animation.
Step 3 − Add the following code to src/MainActivity.java
package com.example.andy.myapplication;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
boolean opened;
LinearLayout view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
view = findViewById(R.id.view);
view.setVisibility(View.INVISIBLE);
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(!opened){
view.setVisibility(View.VISIBLE);
TranslateAnimation animate = new TranslateAnimation(
0,
0,
view.getHeight(),
0);
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(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
opened = !opened;
}
});
}
}In the above code, we are showing and hiding linear layout using translate animation as shown below -
To show the view, use the following code -
TranslateAnimation animate = new TranslateAnimation( 0, 0, view.getHeight(), 0); animate.setDuration(500); animate.setFillAfter(true); view.startAnimation(animate); To hide the view, use the following code - TranslateAnimation animate = new TranslateAnimation( 0, 0, 0, view.getHeight()); animate.setDuration(500); animate.setFillAfter(true); view.startAnimation(animate);
Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from android studio, open one of your project's activity files and click Run icon from the toolbar. Select your mobile device as an option and then check your mobile device which will display your default screen −
When user click on button it will show like the above screen and now click on same button to hide the view as shown below -
