I want to have a View that initially is invisible and when I press a button, it becomes visible with a fade in animation. I'm using the AlphaAnimation for the fading effect. The problem is that if I make the view invisible the animation can't be seen.
Suppose you have an ImageView named imageView and an animation file your_fade_in_anim.xml inside your res\anim\ folder:
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Animation fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.your_fade_in_anim);
// Now Set your animation
imageView.startAnimation(fadeInAnimation);
Your XML
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="[duration (in milliseconds)]"
android:repeatCount="infinite" />
</set>
Replace the brackets with your actual duration.
Provide an AnimationListener to the Animation and make the View visible as soon as the Animation starts.
http://developer.android.com/reference/android/view/animation/Animation.AnimationListener.html
Instead of the infinite repeat count and hiding/viewing your View, I suggest to just not repeat the animation and initially start with the alpha channel set to maximum. Then you can use:
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="[duration (in milliseconds)]"
android:repeatCount="0" />
</set>
And you're done. No need for a Listener, hiding or showing. Just as simple.
Related
I have an ImageView element that I create in my code and place inside of my RelativeLayout. I set this image to be Invisible to start off with using the following code:
arrow.setVisibility(View.INVISIBLE);
I then defined a Fade-In Alpha animation via XML:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
android:fillEnabled="true"
android:fillAfter="true"
android:fillBefore="true">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:startOffset="100"
android:duration="300" />
/set>
To run the animation:
I simply call the following to start the animation
myview.startAnimation(myanimation);
The issue I am seeing is that my animation causes the ImageView to flicker in at full visibility and then go through the animation of alpha 0 to 1. How do I fix this? I can't set the initial alpha value to 0 because the alpha animation is based on percentage and not absolute alpha value. (ex: 0*current value to 1*current value)
Any help would be greatly appreciated.
I think the problem is, with this line of code:
android:fillBefore="true"
Here, Try this code instead, it works for me :
<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fillAfter="true"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
If you are using animateLayoutChanges in your layout file in combination with the animation, toggling the View visibility will result in two animations running and the view flashing or blinking. Setting view visibility causes the layouts animateLayoutChanges to run and to fade the view in once and then the animation you created causes a second animation to run as well.
I want to make a Fade Out and In Animation every time I click a button.
I started to check only the fade out and on the first click it seems the Fade Out works just fine. But when I click again the animation fade from top to bottom, making it look bad and cut.
The Animation:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="1.0"
android:toAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="1000" />
</set>
The Code:
Animation fadeOut = AnimationUtils.loadAnimation(myActivity.this, R.anim.fade_out);
LinearLayout myBackground=(LinearLayout)findViewById(R.id.myBackground);
myBackground.setAnimation(fadeOut);
What am I missing? Thanks!
Make anim in following folder ris->anim->fade_anim.xml
Add below xml
<alpha
android:duration="2000"
android:fromAlpha="1"
android:toAlpha="0.0"
android:repeatCount="infinite"/>
Got to java class
//make animation object
final Animation myAnim = AnimationUtils.loadAnimation(getContext(), R.anim.bounce_anim);
myAnim.setRepeatMode(Animation.INFINITE);
//get View on which on you want to apply animation I am applying on imageView
mLayout.findViewById(R.id.imageView).startAnimation(myAnim);
I am trying to start an animation AFTER 1 second. I have used the attribute "android:startOffset" in my XML file, but it does not work completely the way I expected. I was expecting the view to NOT EVEN BE DRAW in its initial position (that is, the position set in the attributes "fromXDelta" and "fromYDelta") before the offset I set has passed. Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially"
android:shareInterpolator="false" >
<translate
android:duration="2000"
android:startOffset="1000"
android:fromXDelta="-70%p"
android:fromYDelta="0%p"
android:interpolator="#android:anim/linear_interpolator"
android:toXDelta="+0%p"
android:toYDelta="0%p" />
</set>
If I try to move my view using the above animation, the view is drawn IMMEDIATELY at the position -70% of the screen. Then the one second passes and then, as expected, the animation kicks in and starts to move the view. However, I DO NOT want the view to be drawn at all before that 1 second!. How can I achieve this?
Thank you in advance.
UPDATE
I am calling the above XML just after a startActivity call (the *R.anim.animation_coming_in* below), like this:
startActivity(new Intent(this, ThankYouActivity.class));
overridePendingTransition(R.anim.animation_coming_in, R.anim.animation_coming_out);
You could try using a pair of alpha animations with very short duration so that the view is hidden until it's needed. Something like this:
<set ...>
<alpha
android:fromAlpha="0.0"
android:toAlpha="0.0"
android:duration="1"
android:startOffset="0" />
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1"
android:startOffset="1000" />
<translate
...
/>
</set>
Alternatively, you could implement this set of animations in code. Doing so would enable you to use a Handler to start the animation after a delay so that the view is hidden until the animation starts.
Image this scenario, I have a bitmap travelling across the screen from left to right and a button which when pressed will call clearAnimation()
When this button is pressed, it calls clearAnimation() on the travelling bitmap but the bitmap stays in the position (somewhere between left and right) on the screen.
What I actually would like to happen is that when the button is pressed, the bitmap ends up at the end of the animation point (right of the screen)
Any idea how to achieve this please? Below is my animation code
questionAnimation = AnimationUtils.loadAnimation(QuestionActivity.this, R.anim.left_to_right);
questionWrapper.setBackgroundDrawable(getResources().getDrawable(R.drawable.imageview_rounded));
questionWrapper.startAnimation(questionAnimation);
i think what is happening to your animation is that its setFillAfter() is setted to true by default or either you have setted it to true before applying animation, through java or from xml so first you should set setFillAfter to false or you can directly change setFillEnabled to false like here in xml applied to set
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="false" >
<translate
android:duration="300"
android:fromYDelta="100%p"
android:toYDelta="0" />
<alpha
android:duration="300"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
</set>
Or
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="false" >
<translate
android:duration="300"
android:fromYDelta="100%p"
android:toYDelta="0" />
<alpha
android:duration="300"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
</set>
hence in this case when animation ends or clears it won't retain views image (suspend your image in middle) so secondly you have to set the new place of your image i.e to the right of screen through code when you clear animation or animation ends up naturally, for that you have to place the actual view(ImageView) to new place (As this was being handled previously by FillAfter but due to its malfunctioning of suspending view on pressing clear animation you need to remove it so now you have to cover its functionality by urself) by setting properties of your ImageView like if it's in RelativeLayout then by setting property of AlignParentRight to true.
I've got a layout much like the one below. Currently when the back button is pressed the red linear layout's visibility is set to gone. However, I'd like it to "slide" up off of the page instead. How would I do this?
You need to use animations. here is the top in/out animations:
In Top
<?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="300"/>
</set>
Out Top
<?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="600"/>
</set>
Then in your activity get the view and apply an animation to it like this:
This are type Animation.
mSlideInTop = AnimationUtils.loadAnimation(this, R.anim.slide_in_top);
mSlideOutTop = AnimationUtils.loadAnimation(this, R.anim.slide_out_top);
and call them with this code:
header.startAnimation(mSlideOutTop);
header.setVisibility(View.INVISIBLE);
Here header is a LinearLayout wrapping my views. same thing if you want to make it slide in. just add the slide in animation and make the view visible.