Develop Reference

how to make view visible and gone with some animation?

I have a relative layout, I need to show that view when network connectivity is not there and gone that view when connection came back, I need to do it like youtube. YT will show the popup in bottom with green color and after sometimes the view slide down. Thanks in advance I am new to this. I can't find any equivalent answer in StackOverflow
<RelativeLayout
android:id="#+id/dashboard_xmpp_connection_status_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:visibility="gone">
<TextView
android:id="#+id/dashboard_xmpp_connection_text"
android:layout_width="match_parent"
android:layout_height="33dp"
android:animateLayoutChanges="true"
style="#style/Connection_status"
android:text="#string/msg_no_internet" />
</RelativeLayout>

binding.filter.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (binding.filterExams.getVisibility() == View.VISIBLE) {
Animation slide_down = AnimationUtils.loadAnimation(binding.filterExams.getRootView().getContext(),
R.anim.slide_up_filter);
slide_down.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
binding.filterExams.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
binding.filterExams.startAnimation(slide_down);
} else {
binding.filterExams.setVisibility(View.VISIBLE);
Animation slide_down = AnimationUtils.loadAnimation(binding.filterExams.getRootView().getContext(),
R.anim.slide_down);
binding.filterExams.startAnimation(slide_down);
}
}
});
you can add animation file in xml file for e.g
here i used slide down and up animation
slide_up_filter.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale
android:duration="250"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.0"
android:toYScale="0.0" />
</set>
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale
android:duration="250"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
like this there are sevaral animation
fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<alpha
android:duration="2000"
android:fromAlpha="0.1"
android:toAlpha="1.0">
</alpha>
</set>
fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="0.0" />

You can use Transition API which is available in Support(androidx) package.
To use this you have to call TransitionManager.geginDelayedTransition method and change the visibility of the view to visible and gone as per the requirement.
private void slideView(boolean show) {
Transition transition = new Slide(Gravity.BOTTOM);
transition.setDuration(600);
transition.addTarget(R.id.id_of_relative_layout);
TransitionManager.beginDelayedTransition(id_of_relative_layout, transition);
if(show){
relativeView.setVisibility(View.VISIBLE);
}
else{
relativeView.setVisibility(View.GONE);
}
}
Call slideView() function on the action from where you want to perform it.
For more deatil follow this -
Show and hide a View with a slide up/down animation

so you can use LottieAnimationView
your app gradle file
implementation 'com.airbnb.android:lottie:3.0.7'//2.7.0
go this website sign and download free lottie json file
please click
step 1:put this download lottie json file to android studio assets folder
your layout file
<FrameLayout
android:id="#+id/dashboard_xmpp_connection_status_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:visibility="gone">
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/showAnimations"
android:layout_gravity="center"
android:layout_height="66dp"
android:layout_width="56dp"
android:visibility="gone"
app:lottie_autoPlay="true"
app:lottie_loop="false"
app:lottie_fileName="animsix.json" <!--please put your download json file -->
/>
</FrameLayout>
MainActivity
LottieAnimationView showLottie=findViewById(R.id.showAnimations);
if("network is available"){
showLottie.setVisibility(View.GONE);
}else{
showLottie.setVisibility(View.VISIBLE);
}

You could simply use fade in animation for text view like this.
void fadeIn() {
textView.setVisibility(View.VISIBLE);
textView.setAlpha(0);
int duration = getResources().getInteger(android.R.integer.config_mediumAnimTime);
textView.animate().alpha(1).setDuration(duration);
}
textView.animate() returns ViewPropertyAnimator which contains various methods to customize animations.
Visit this for more details

Drop-down animation

I am trying to create a drop-down animation. When the user taps on a specified button #+id/btnToHideView, I would like a view #+id/relativeLayoutControls to drop down/slide up (VISIBLE / GONE).
Here is how the layout file looks:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnToHideView"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:background="#drawable/hide_btn"
/>
<RelativeLayout
android:id="#+id/relativeLayoutControls"
android:layout_width="60dp"
android:layout_height="fill_parent"
android:layout_marginRight="6dp"
android:layout_marginEnd="6dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true">
//I have buttons in this layoout
</RelativeLayout>
</LinearLayout>
and this is what I have tried:
I created 2 animation files in res/anim
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1000"
android:fromYDelta="0"
android:toYDelta="100%" />
</set>
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1000"
android:fromYDelta="100%"
android:toYDelta="0" />
</set>
Then I tried handling this by doing:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
controlsHide = (RelativeLayout) findViewById(R.id.relativeLayoutControls);
final Animation slide_down = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.slide_down);
final Animation slide_up = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.slide_up);
btnToHideView = (Button) findViewById(R.id.btnToHideView);
btnToHideView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//I just did slide_up to test if its working
controlsHide.startAnimation(slide_up);
}
});
I followed this post, but when I tap on the button nothing happens. In logcat, it only prints ACTION_DOWN.

Please try this:
SlideUp:
Animation slideUp = AnimationUtils.loadAnimation(activity, R.anim.slide_up);
view.startAnimation(slideUp);
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromYDelta="100%"
android:toYDelta="0" />
</set>
or
view.animate().translationY(0);
Dropdown:
view.animate().translationY(view.getHeight());

Here is my source code implementation (refer here), You can use them
// Initially hide/show the content view.
redLayout = mView.findViewById(R.id.history_operation);
//Load animation
slide_down = AnimationUtils.loadAnimation(getActivity(), R.anim.slide_down);
slide_up = AnimationUtils.loadAnimation(getActivity(), R.anim.slide_up);
Create an animation xml for slide down and up. You can feel free to set the duration for the animation if you like. Here I set 500 milli:
<translate
android:duration="500"
android:fromYDelta="-100%"
android:toYDelta="0" />
and
<translate
android:duration="500"
android:fromYDelta="0"
android:toYDelta="-100%" />
Implementing the animation in the source code:
slide_up.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
//When the animation was finished, set gone to the view
redLayout.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
slide_down.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
//When the animation start, set visible to the view
redLayout.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
Finally, calling the toggle function to start the defined animations
private void toggle1() {
// Start animation
if(isFadeOut){
redLayout.startAnimation(slide_down);
}else {
redLayout.startAnimation(slide_up);
}
isFadeOut = !isFadeOut;
}

Usually I don't like to use dependencies to keep app light as much as possible. But Animation library has fun various animations:
Java:
Import render animations
import render.animations.*;
Start animation
// Declare yourlayout
yourlayout AppleText = findViewById(R.id.yourlayout);
// Create Render Class
Render render = new Render(MainActivity.this);
// Set Animation
render.setAnimation(Attention.Wobble(AppleText));
render.start();
Kotlin:
Import render animations
import render.animations.*
Start animation
// Declare yourlayout
val yourlayout: View = findViewById(R.id.layout_tag)
// Create Render Class
val render = Render(this)
// Set Animation
render.setAnimation(Bounce().InDown(yourlayout))
render.start()
Bonuse().InUp(yourview) and try Bonuse().InDown(yourview)
Slide().InUp(yourview) and try Slide().InDown(yourlayout)

Animate object out of the screen and keep it there

How can I move an object out of the screen?
This is how I move the TextView from under the screen into the screen.
slide_up_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="100%" android:toYDelta="0%" android:duration="500" android:fillAfter="true"/>
</set>
This is how I move it out of the screen:
slide_down_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%" android:toYDelta="100%" android:duration="500" android:fillAfter="true"/>
</set>
But the TextView appears again. Why?

That is because it renders it again after the animation and will actually place the TextView to its default position from the screen/layout.
solution:
You need to add a listener and set the visibility of your TextView to gone or invisible at the end of the listener.
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation) {
You_text_view.setVisibility(View.INVISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) { }
});

TextView still getting clicked though animated to hide

I'm having a TextView which is animated to slide out on click. Now when I again click the area where TextView was layout the click event is still getting fired as if TextView is still there. I want the TextView to behave as if it's not there once hidden through animation.
Following are my animation files.
res/anim/slide_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="#android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0" />
</set>
res/anim/slide_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:interpolator="#android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
Following is my layout xml.
<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=".MainActivity" >
<TextView
android:id="#+id/anim_tv"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:text="#string/hello_world"
android:gravity="center"
android:background="#8800ff00"/>
</RelativeLayout>
And following is Activity code.
public class MainActivity extends Activity {
TextView animTV;
Animation animSlideIn;
Animation animSlideOut;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
animTV = (TextView) findViewById(R.id.anim_tv);
animTV.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
hide();
}
});
// load the animation
animSlideIn = AnimationUtils.loadAnimation(this, R.anim.slide_in);
animSlideOut = AnimationUtils.loadAnimation(this, R.anim.slide_out);
show();
}
private void show() {
animTV.startAnimation(animSlideIn);
}
private void hide() {
animTV.startAnimation(animSlideOut);
}
}
Can anybody suggest a solution to this issue?
Thanks,
Ammar

you can implements Animation.AnimationListener, and when onAnimationEnd is called you can change the TextView's visibility to gone

According to #blackbelt suggestion I did following update in Activity.
animSlideOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation) {
animTV.setVisibility( View.GONE );
}
#Override
public void onAnimationRepeat(Animation animation) { }
});
#blackbelt solution was partially helpful. To make it fully working I had to updated the slide_out.xml to set the android:fillAfter attribute to false.

Moving an image through a linearlayout

I'm developing an Android 2.2 application.
I want to move an image from left side of the screen to the right side of the screen.
How can I do that? I've read that I have to add this image to a ListView or to a GridView to setup this animation.
UPDATE
I've created the following files:
anim/translate_right
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<translate
android:fromXDelta="-100%p"
android:toXDelta="0"
android:duration="5000" />
</set>
anim/ship_layout_controller
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="10%"
android:animationOrder="reverse"
android:animation="#anim/translate_right" />
layout/startpage
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/appNameTextView"
android:text="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40px"/>
<Button
android:id="#+id/PlayButton"
android:text="#string/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40px"/>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/greekShip"
android:persistentDrawingCache="animation|scrolling"
android:layoutAnimation="#anim/ship_layout_controller"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/greekship"
android:maxWidth="176px"
android:maxHeight="87px"
android:layout_x="-300px"/>
</AbsoluteLayout>
</LinearLayout>
StartActivity.java
public class StartActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.startpage);
}
#Override
protected void onResume() {
super.onResume();
ImageView ship = (ImageView)findViewById(R.id.greekShip);
ship.startAnimation(AnimationUtils.loadAnimation(this, R.anim.translate_right));
}
}
But it doesn't work.

Please take a look at the Animation class, specifically the Tween Animation, more specifically the Translate element. Create an animation file in your project then apply this animation to your image. For example, this animation would move an object from the center of the screen to the right side.
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:toXDelta="100%p"
android:fromXDelta="0%"
android:duration="300"
android:fillEnabled="true"
android:fillAfter="true">
</translate>
EDIT: To apply this animation to a Button, a TextView, an ImageView, etc.
ImageView imageView = (ImageView) findViewById(R.id.myImageView);
Animation exitAnimation = AnimationUtils.loadAnimation(this, R.anim.exit_animation);
imageView.startAnimation(exitAnimation);

you have to use Translate Animation. For example, this animation would move an image from Left side of the screen to the right side of the screen.
The AnimationActivity is
listener = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
System.out.println("End Animation!");
//load_animations();
}
};
}
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
if (v==button)
{
moveLefttoRight = new TranslateAnimation(0, 200, 0, 0);
moveLefttoRight.setDuration(1000);
moveLefttoRight.setFillAfter(true);
my_image.startAnimation(moveLefttoRight);
}
}
}
xml code is
<LinearLayout 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=".MainActivity" >
<ImageView
android:id="#+id/diceid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dice"/>
</LinearLayout>
and anim file is
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:startOffset="0"
/>
may be this is the answer what you are searching.

I would check your source again. Maybe it's out of context. But the easiest way to do this is to use a Translate animation that originates from the Image's starting place and translates it to the other side of the screen. After that is done I usually register an animation callback so that I can update the true position of the image after the animation is over. hope that helps.

Or is it the Gallery that you are looking for?