I need to display an image button that fades in and out (and in and out and so on...)
The transparency can be set with setAlpha but how can I fade in and out? I mean I cannot do it on another thread because you need to do such things on the UI thread, right?
I guess it can be done with animations but I haven't found anything, because I don't have any experience with animations and don't really know what to search for...
Actually what I really want is to fade one image in and another one out but I guess the easiest way is to place the first image button below the second and just fade the second one. Or is there an easier way to do it?
Here is the solution I'm using now, that works on API level lower than 12:
AlphaAnimation anim = new AlphaAnimation(1.0f, 0.0f);
anim.setDuration(1000);
anim.setRepeatCount(NUM_REPEATS);
anim.setRepeatMode(Animation.REVERSE);
button.startAnimation(anim);
This is an animation we used in our project. Spinner is a view so you can change this with your imageview. So indeed 2 images on top of eachother, one visible one invisible. This is how we did it. Hope it helps.
spinner.setVisibility(View.VISIBLE);
spinner.setAlpha(0);
spinner.animate().setDuration(200).alpha(1).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
spinner.setVisibility(View.VISIBLE);
}
});
infoActivityContent.animate().setDuration(200).alpha(0).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
infoActivityContent.setVisibility(View.GONE);
mainPresenter.logout();
}
});
You have to read Crossfading Two Views from Android developers. In this tutorial is explained how to do what you want.
in kotlin:
view.animate().alpha(1f).setDuration(1000)
.setInterpolator(AccelerateInterpolator()).start()
You can add an AnimatorListenerAdapter in setListener to handle other view states.
You can make several sequential frames of your first image morphing into your second image and back, then define them as animation-list and start animation in onCreate
button_frames.xml:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/frame1" android:duration="100" />
<item android:drawable="#drawable/frame2" android:duration="100" />
....
layout:
<ImageView android:id="#+id/button"
android:background="#drawable/button_frames"/>
OnCreate:
ImageView button= (ImageView)findViewById(R.id.button);
mAnimation = (AnimationDrawable) animationView.getBackground();
button.postDelayed(new Runnable() {
public void run() {
mAnimation.start();
}
}, 100);
Implement Animation Class ( You can load it thru XML Or create it dynamically).
Then you can set it thru API setAnimation(Animation animation).
Related
When click on button_next then linear_layout_email slide left and linear_layout_password will come from right. example https://imgur.com/a/b7b66
Here my java code paste below. please find some solution on it.
mLinearLayoutEmail.animate().translationX(-1000);
mLinearLayoutPassword.animate().translationX(-80);
To me its better to read all the animation calculate them and then go for making Xml anim for each of the anim and use it as you need using AnimationUtils!
here its done in step by step! there is a builtin method for animation.
follow the steps in the code!
FADE IN RIGHT
[![FADE IN RIGHT animation in xml anim file][1]][1]
slide left
[![ANim xml code for slide and fade left][2]][2]
using ANimationUtils.loadAnimation(context,ANimFileResource) to read the anim file
e.g
Animation FadeAnim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fading_anim);
use StartAnimation method over the linearLayout in the ClickListener of the button you want to use for loading the anim for example
fabPostTimeLine.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mGetSwipedLeftLinLay.startAnimation(FadeAnim);
}
});
If you have used the Google+ app on Android you must have noticed the comments on posts are animated to show comments one by one using a fadeIn and fadeOut animation on each ListView item.
I want to achieve this type of animation for certain views like TextView, etc within each of my ListView item.
I can achieve the fadeIn and fadeOut animation part but the problem is where do I put the animation code for it to work independently for each inflated ListView item.
Any help would be appreciated. Thanks in advance.
Please use a BaseAdapter and put the necessary animation codes in your getView() method.
Just inflate the views and start the animations when the views are inflated for the first time. (Hint - when convertView == null)
Use the ViewHolder pattern to hold each of the elements of the single list item uniquely and start animations no any View you need inside each list item.
To start animations, create an animation in XML and start the animation like this,
Animation anim = AnimationUtils.loadAnimation(this, R.anim.slide_up);
anim.setInterpolator(new DecelerateInterpolator());
anim.setDuration(500);
anim.setStartOffset(100);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
progress.setVisibility(View.INVISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
progress.startAnimation(anim);
To give you an idea on how to create animations in XML,
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="200"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
<translate
android:duration="200"
android:fromYDelta="0%p"
android:toYDelta="5%p" />
</set>
You can use an animation set to combine multiple animations together and play them at once.
Please also explore the Animation API in greater detail, you will find useful methods like setRepeatMode() and setRepeatCount() which will help you to achieve the desired result.
Moreover, you do not need two separate TextViews, you can do it using one. Just make proper use of the animation listeners.
Hope it helps.
I'm very new regarding developing apps for android. Now what I want to do is to implement four buttons and as soon as a user clicks, let's say, on the topmost button, another two sub-buttons should appear underneath the clicked button and the other three remaining buttons should automatically move downwards.
I think my explanation is not hundred per cent clear, so I try to illustrate the problem with some images.
Now here are the four buttons:
http://advancedata.ad.funpic.de/First-AGApp.png
And as soon as the user pushes button one, two extra buttons should appear and the other three buttons should move downwards:
http://advancedata.ad.funpic.de/Second-AgApp.png
I would be very thankful for any advice how to implement this.
Thanks,
enne
Draw all your buttons in a LinearLayout with vertical orientation. Add the attribute
android:visibility="gone"
to the buttons that should appear when clicking the main buttons. Then you can show those buttons in the OnClickListener of the main buttons with the line:
button.setVisibility(View.VISIBLE);
where button is the reference to your layout in the code.
Button button = (Button) findViewById (R.id.your_button_id);
EDIT:
To add an animation to the process, you have to slide up/down the new buttons appearing and the buttons below. (Group the views into Layouts so it's easier to apply the animations).
Here you have the two XML files to create in your res/anim folder:
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="-50" android:toYDelta="0"
android:duration="300" />
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0" android:toYDelta="-50"
android:duration="300" />
Create the animations in your code with:
Animation slideDown = AnimationUtils.loadAnimation(this, R.anim.slide_down);
and apply it to the buttons with:
secondaryButton.startAnimation(slideDown);
When sliding up, you need to set the visibility to "gone" after the animation is finished, not before. In order to do that, you need to set the animation listener and hide the button in onAnimationEnd:
slideUp.setAnimationListener(new AnimationListener () {
#Override
public void onAnimationEnd(Animation animation) {
secondaryButton.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationStart(Animation animation) {}
});
I got a large ImageView that covers the entire screen. I made a "slide-in" menu that activates when you press anywhere on the screen, I did that using an animation so it looks like the menu slides in.
Because of the image inside the ImageView this causes the animation to stutter. When I leave the ImageView empty it goes really smooth.
This is because the image inside the ImageView is constantly getting redrawn during the animation, and my android tablet is having a hard time processing it.
I've tried setting WillNotDraw to true on my ImageView and back to false when the animation is done, but this results into the image disappearing while the animation plays (smoothly) and then it appears again.
Here is how I create the animation:
topMenu.setVisibility(View.VISIBLE);
Animation slideDown = AnimationUtils.loadAnimation(this, R.anim.slide_down);
slideDown.setStartOffset(200);
topMenu.startAnimation(slideDown);
This is the animation xml:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator">
<translate
android:fromYDelta="-40"
android:toYDelta="0"
android:duration="200"/>
</set>
The image inside the ImageView is a done by a Bitmap
How can I leave the image visible while an animation is playing, but still maintain that smoothness in the animation?
How about lets say if you are using Animation Listener and look out for the Animation Completion and draw the Image at the end using this,
slideDown.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
public void onAnimationEnd(Animation animation) {
// Draw your Image here
}
});
Pieter,
According to your code, you are reloading the animation every time you want to run the animation. You might want to move the animation load itself to a class member rather than a local variable. This will ease some of the strain. Further details when more information is provided.
I have a toolbar aligned at the bottom and a WebView above it, which fill remaining height. Now I want to slide down the toolbar in order to hide it, and while it's animating the webview height should expand. I've tried using TranslateAnimation but unfortunetely it's not adjusting toolbar's real position, only it's contents are moved. Here's what I tried:
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="0%"
android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="700"
android:fillAfter="true" />
And the actual code:
final View v = findViewById(R.id.browseToolbar);
Animation animation = AnimationUtils.loadAnimation(someContext, R.anim.toolbar_hide);
v.startAnimation(animation);
How can I do it?
I wrote some code to do actual resize animations. Take a look:
http://www.touchlab.co/blog/resize-animation/
Also look at a presentation I did on Android animation
https://docs.google.com/present/view?id=djqv5kb_187c62jvbf7
Essentially, as mentioned above, the regular animation classes only affect what's in their parent view. The key to understanding them is they aren't "real". Think of the Android animation as a mirage. If you run the example app I created, say you do a scale animation and make a button smaller, if you click outside, where the button USED to be, it still registers as a button click. Android animations don't actually affect real boundaries and dimensions.
What the code in my blog post does, essentially, is implement a ViewGroup.OnHierarchyChangeListener. When stuff is added/removed from the hierarchy, the container animates a physical resize.
When you use android animation only the pixels of the view are shifted. To actually move the view, you will need to add an animation listener to the animation object and override the onAnimationEnd method. In that method you need to programatically move the view.
AnimationListener animListener = new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0) {}
#Override
public void onAnimationRepeat(Animation arg0) {}
#Override
public void onAnimationEnd(Animation arg0) {
Move the view here
}
};
animation.setAnimationListener(animListener);