I want to create an animation for an image that is loaded into a vertical linear layout dynamically. When triggered I would like the image to slide down with its alpha set to 0 (this will slide all content below it down I hope) then fade the image in. Being new to Android animations I am having some trouble. Right now I'm trying to get just the fade in to work, here is what I have:
fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha
xmlns:android="https://chemas.android.com/ap/res/android"
android:interpolator="#android:anim/anticipate_interpolator"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="5000" >
</alpha>
In the Activity:
Animation animation = AnimationUtils.loadAnimation(context, R.anim.fade_in);
ImageView image = new ImageView(context);
image.setImageResource(R.drawable.my_image);
image.setLayoutParams(layoutParams);
image.setAlpha(0);
((ViewGroup) view).addView(image, 0);
image.startAnimation(animation);
The image is being loaded as all the context below it is shifted down, however if never fades in. I would like to get this working as well as having the image slide down so the dynamica add does not look so choppy.
Thanks in advance.
You have a typo in the xmlns:android tag.
It should be
xmlns:android = "http://schemas.android.com/apk/res/android"
With that being corrected, just remove the image.setAlpha(0); and it should animate. I am afraid I cannot give you a reason why it doesn't work with the alpha attribute set to 0.
Regarding the slide down animation, you will have to subclass Animation. Have a look at this answer that I think can help you get what you want: https://stackoverflow.com/a/5122460/871102
Related
Working in Android Studio, I need to add in my app a click listener on my imageview which has a certain animation. This is the code I have in MainActivity:
myImage.startAnimation(myAnimation);
myImage.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//DO SOMETHING
}
});
myAnimation comes from an XML in anim folder which does a translational animation:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:interpolator="#android:anim/accelerate_interpolator"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:fromYDelta="0%p"
android:toYDelta="40%p"
android:duration="1000"/>
</set>
This works fine, although this click listener is set on the space that has the image on the layout (activity_main.xml) and does not follow the animation inserted in the image. If I click on the space which belongs to the image in the layout, the click listener starts even if the image is not there due to the animation.
Is there a way in which the click listener is attach to the imageview in motion?
Thank you
This happens because the xml Translate animation you are using, does not really animate the View's property, it just moves the pixels on the screen and so it just looks like it has changed position, that is why the OnClickListener is still active on the View's original position, because Android thinks the View never really moved.
Simple solution use ObjectAnimator or even better ViewPropertyAnimator. Both will animate the View's property and so the OnClicklistener will also change it's position with it.
I have an Image view, i am applying animation to it, it has to move up and down on the screen when the button is pressed. But before the button is pressed i want the image hidden.
I am using the following code:
final Animation animation = AnimationUtils.loadAnimation(this,
R.anim.aim);
animation.reset();
maxName.startAnimation(animation);
anim.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fromYDelta="15%p"
android:repeatCount="2"
android:repeatMode="reverse"
android:toYDelta="60%p" />
What changes should i make in order to hide the image before the button is pressed.
Thank-you in advance.
Try to add
android:visibility="invisible"
to your element in its xml file? You can also use gone instead of invisible if you want the element to occupy no space in your layout.
Then when the button is pressed, you can change the visibility of the element at runtime:
final Animation animation = AnimationUtils.loadAnimation(this,
R.anim.aim);
animation.reset();
maxName.setVisibility(View.VISIBLE);
maxName.startAnimation(animation);
Add AnimationListener to your animation .. and write down
yourImageview.setvisibility(view.gone) in onAnimationStart
yourImageview.setvisibility(view.visible) in onAnimationEnd
Let's say I have an ImageButton btn. I have two different Bitmap, bmp1 and bmp2. By default, btn displays bmp1, like this:
btn.setImageBitmap(bmp1);
Can I somehow make an animation, which crossfades bmp1 and bmp2, when calling the following:
btn.setImageBitmap(bmp2);
So the question is, is it possible - if yes, how - to animate the changing of bitmaps on ImageButtons?
The way I see it, there are two main ways to implement this functionality. Note that there may be other methods that will make this happen exactly as you are describing, but these would be my approaches.
First Approach: Leveraging the onAnimationEnd() Callback
Here, you would want to essentially fade out the first ImageButton, change the resource in the onAnimationEnd() callback, and then fade it back in. To do this, you would have to implement the below code.
Create an Animation resource in XML that would be used to fade the View in:
<!-- Filename: fadein.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Note that you might want to change the duration here-->
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="250"/>
</set>
Create an Animation resource in XML that would be used to fade the View out:
<!-- Filename: fadeout.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Note that you might want to change the duration here-->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="250"/>
</set>
Load the fade out and fade in Animations in your code:
// Obtain a reference to the Activity Context
Context context = getContext();
// Create the Animation objects.
Animation outAnimation = AnimationUtils.loadAnimation(context, R.anim.fadeout);
Animation inAnimation = AnimationUtils.loadAnimation(context, R.anim.fadein);
Assign a new AnimationListener to this Animation, and build it out as follows:
outAnimation.setAnimationListener(new AnimationListener(){
// Other callback methods omitted for clarity.
public void onAnimationEnd(Animation animation){
// Modify the resource of the ImageButton
yourImageButton.setImageResource(R.drawable.[your_second_image]);
// Create the new Animation to apply to the ImageButton.
yourImageButton.startAnimation(inAnimation);
}
}
Assign the Animation to the ImageButton, and start the first Animation:
yourImageButton.startAnimation(outAnimation);
Then, if you wish to animate back to the previous image, you would simply do the same but in the reverse order.
Second Approach: Overlay a Second ImageButton
For this approach, you would simply assign two ImageButtons to the same coordinates on the screen, and with the same width. Then, you would fade out the first ImageButton and fade in the second one after the first Animation ended (much like the example above).
I hope that this answer aligns with your expectations. My apologies if there are any code errors, as I am doing this without an editor at the moment. Please let me know if you would like any additional clarification!
It is not possible to animate image button source changes. The workaround would be to stack two ImageButtons and animate its alfa channel separately to get expected behavior.
My GOAL is to implement custom toast in my application as follows:
MyCustomToastClass.makeText(context,View,anyDurationInMS);
I want to set the "Toast" gravity, Layout, duration(not just Length.SHORT/LONG)
Things i've tried so far:
Class with windowManager object
problem was it must implement android system animation in:
params.windowAnimations
and when I tried to implement my custom animation as followed:
windowManager.addView(mLayout);
Animation AlphaAnimation = new ...
it didn't implement my animation.
Class with the rootView element to add the Toast's layout to it:
In this way I succeeded to implement everything only when the root view was FrameLayout type (With other layout I couldn't set the "Toast" gravity to center).
I would appreciate if someone has implemented this feature, Or to guide me if i'm missing something in one of my ways.
thanks
Sorry for misunderstand your question
if you want to create an pop up like toast and the duration is up to you maybe you can try to create a custom view that will contain the content you want to be toasted after that you can place your main layout in the frame layout then everytime the user trigger your custom toast you can add the custom view to your frame layout so it'll be positioned in front of your main layout and for fade in fade out animation you can use this
Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
fadeIn.setDuration(1000);
Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator()); //and this
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);
or if you want to use XML
FadeIn
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha= 1.0"
android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="reverse"
/>
FadeOut
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="reverse"
/>
and for the time you can use
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
// FADE OUT THE POP UP/TOAST HERE
}
}, /*SET THE TIME HERE*/);
I hope this answer is clear enough for you
and if you still have some question about my answer don't hesitate to ask in the comment :)
I'm getting this weird issue. Basically I'm animating a view with translate animation. (Translate into the screen and out via 2 different events) My code for translate animation is:
final Animation animtopOut = new TranslateAnimation(0, 0, 0, -mainHeaderlayout.getMeasuredHeight());
animtopOut.setDuration(500);
animtopOut.setFillAfter(true);
mainHeaderlayout.setAnimation(animtopOut);
And the xml code is:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:fromYDelta="0%p"
android:toYDelta="-99%p"
android:duration="600"
android:fillAfter="true">
</translate>
</set>
Setting it using the code:
final Animation animtopOut = AnimationUtils.loadAnimation(mContext, R.anim.header_animate_out);
When I trigger the animation it works fine if I use the xml animation properties. The problem is when i use it via code. Which is what I want. It runs with translate animation only for the first time. The second time, when it is triggered, the view is inside the screen without animation. Please some one help me if I'm missing any properties. Thanks.
EDIT : (extra info)
There are actually two different animations that are triggered on the same view via two different events. I have actually posted one animation property. The other is almost the same. with just values are different.
Have you tried animation configuration like this
animtopOut.setRepeatCount(Animation.INFINITE);
animtopOut.setRepeatMode(Animation.RESTART);
animtopOut.setInterpolator(new LinearInterpolator());
?