I've tried several ways of hiding a view and then removing it from the parent layout:
Call an alpha fade animation followed by a call to setVisibility(GONE);
Call an alpha fade animation followed by a call to setVisibility(GONE) inside of the AnimationListener
Call an alpha fade animation followed by removing the parent layout inside of the AnimationListener.
Each time, the resulting animation fails --- the view disappears twice from the screen. The alpha fade animation works fine but when you change the visibility or remove it from the parent view, it quickly reappears again before disappearing a second time. The result is an unexpected jittery animation.
Example code:
Animation animation = AnimationUtils.loadAnimation(AddTaskActivity.this,
R.anim.fade_out);
final LinearLayout parentView = (LinearLayout) findViewById(R.id.addtask_root);
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
parentView.post(new Runnable() {
public void run() {
parentView.removeView(test);
}
});
}
That animation fails---the test view disappears twice from view.
Any ideas?
I guess that if you transparent your view before remove it or change it's visibility,you can do what you want:
#Override
public void onAnimationEnd(Animation animation) {
parentView.post(new Runnable() {
public void run() {
// transparent your view
...
parentView.removeView(test);
}
});
Edit:
I saw android documentation in about animations and it says:
Another disadvantage of the view animation system is that it only
modified where the View was drawn, and not the actual View itself. For
instance, if you animated a button to move across the screen, the
button draws correctly, but the actual location where you can click
the button does not change, so you have to implement your own logic to
handle this.
With the property animation system, these constraints are completely
removed, and you can animate any property of any object (Views and
non-Views) and the object itself is actually modified. The property
animation system is also more robust in the way it carries out
animation. At a high level, you assign animators to the properties
that you want to animate, such as color, position, or size and can
define aspects of the animation such as interpolation and
synchronization of multiple animators.
So I guess that you have to use property animation.
Related
It's easy to add layout transitions with this attribute:
android:animateLayoutChanges="true"
However, the animation you get does not create a pleasing user experience. When elements are added to the layout (I'm using a simple vertical LinearLayout) or change from gone to visible there's a 2-stage process that I think is rather annoying. First, room is prepared for the new element (everything else is pushed down). Then when there's enough room, the new view fades into existence. Likewise, when a view is removed or changes from visible to gone, first it fades out, then the room claimed by it gradually shrinks to zero.
I would really like a way to change the animation to what I really think is the natural way to do it: When adding a view its height gradually changes from zero to its full size, so that first you see just the top, without ever changing the alpha. When removing a view its height gradually changes to its full size to zero, so that near the end of the animation you see just the top, without ever changing the alpha.
How can I accomplish this in Android? (Note: the user can tap on several buttons together and cause several elements to appear / disappear in quick succession, before the animation for the other views ended - or even make something appear while it's still appearing).
Another question that this is perhaps not the place to ask: why isn't this the default?
(And if it's possible, can a slightly different behavior be specified in which first just the bottom of the view appears, rather than the top, like the new view slides down from under the one above it?)
You have to write your own animator and set it.
Code:
final ViewGroup profileParent = (ViewGroup) view.findViewById(R.id.profileParent);
LayoutTransition transition = new LayoutTransition();
Animator appearingAnimation = ObjectAnimator.ofFloat(null, "translationY", 600/*profileParent.getHeight()*/, 0);
appearingAnimation.addListener(new AnimatorListenerAdapter() {
public void onAnimationEnd(Animator anim) {
View view = (View) ((ObjectAnimator) anim).getTarget();
view.setTranslationY(0f);
}
});
Animator disappearingAnimation = ObjectAnimator.ofFloat(null, "translationY", 0, 600/*profileParent.getHeight()*/);
appearingAnimation.addListener(new AnimatorListenerAdapter() {
public void onAnimationEnd(Animator anim) {
View view = (View) ((ObjectAnimator) anim).getTarget();
view.setTranslationY(0f);
}
});
transition.setAnimator(LayoutTransition.APPEARING, appearingAnimation);
transition.setDuration(LayoutTransition.APPEARING, 300);
transition.setStartDelay(LayoutTransition.APPEARING, 0);
transition.setAnimator(LayoutTransition.DISAPPEARING, disappearingAnimation);
transition.setDuration(LayoutTransition.DISAPPEARING, 300);
transition.setStartDelay(LayoutTransition.DISAPPEARING, 0);
profileParent.setLayoutTransition(transition);
i want to create Flip vertical animation in my application but all of my found document are flip horizontal and i can not find any document about flip vertical by xml or java class
You can achieve this by putting two views of the same size one below the other and use the ViewPropertyAnimator like this:
firstView.animate().rotationX(90).setDuration(200).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
firstView.setVisibility(View.GONE);
secondView.setRotationX(-90);
secondView.setVisibility(View.VISIBLE);
secondView.animate().rotationX(0).setDuration(200).setListener(null);
}
});
The first view is visible when starts, and the second one, obviously it's invisible.
I am trying to remove some Views from a ScrollView, but do so with a nice animation effect.
Unfortunately, android:animateLayoutChanges does not appear to work inside ScrollView with multiple ViewGroups. More precisely, in that case you can only apply it to a subset view. In such a situation, however, the other views will still adjust by jumping into position.
I have used TranslateAnimation to slide everything inside a ScrollView into place, removing the views onAnimationEnd. This appears only to work if a ScrollView does not scroll (content smaller than ScrollView size).
Simplified code:
Animation animation = new TranslateAnimation(0, 0, 0, -ViewToBeRemoved.getHeight());
animation.setAnimationListener(new AnimationListener() {
...
#Override
public void onAnimationEnd(Animation animation) {
viewToBeRemoved.setVisibility(View.GONE);
}
}
scrollViewChildView.startAnimation(animation);
Is there a way to remove Views from a ScrollView with an animation?
Can someone please explain to a noob the correct way to animate a View so its touch area and image actually move together?!
I have read lots of posts and questions and tutorials, but none explains what moves the layout and what moves the image such that I can animate a view and then leave it at its new position.
This is an example method I'm working with, trying lots of different combinations to no success. The view is in the parent RelativeLayout. It's a touchable menu of icons, and is animated with an xml resource on a click to slide off screen leaving just a little tab showing, where it needs to stay until clicked again.
public void RetractTools (View v){
final ImageView finalImage1 = (ImageView) findViewById(R.id.paintsView);
Animation slideout = AnimationUtils.loadAnimation(this, R.anim.slideout_tools);
slideout.setFillAfter(true);
slideout.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
finalImage1.setEnabled(true);
optionMenu.showing = false;
optionMenu.inMotion = false;
finalImage1.layout(1258, 668, 1697, 752);
finalImage1.setRight(1280);
finalImage1.invalidate();
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationStart(Animation arg0) {
finalImage1.setEnabled(false);
}
});
optionMenu.inMotion = true;
v.startAnimation(slideout);
}// End RetractMenu
No matter what I try, I encounter problems. setFillAfter does nothing when set in the xml file. Set programmatically, it leaves the image in the right place but the touch controls remain where the menu was. I have tried setLeft and setRight which apparently only move the image, not the view position, and all sorts of different layout options, and fill and no fill and invalidating and not, but can't solve it. I clearly don't undersatnd the underlying mechanics needed to position and render a view! :D
Thanks.
EDIT : Solution
For anyone having similar issues, this is how I have found to work with relative layouts. You create a LayoutParams object with the specified size, and then you can assign it positions. eg.
final RelativeLayout.LayoutParams position = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
position.leftMargin = 440;
Then assign that to your view
myView.setLayoutParams(position);
So in summary, you use a LayoutParams object as an interface to your view's position, rather than accessing the view's coordinates directly as I assumed.
What you have is basically fine, with two flaws:
You are using setFillAfter(), which is not especially useful
You are calling layout() and setRight() and stuff, which is not especially effective
Instead, in onAnimationEnd(), you need to modify the LayoutParams of the View to reflect the new position you want the widget to be in. The size and position of a widget is dictated by the layout rules it negotiates with its container. Initially, those are set via your layout XML resource. By modifying the LayoutParams at runtime, you are changing what those rules are.
What those LayoutParams are (LinearLayout.LayoutParams, RelativeLayout.LayoutParams, etc.) and what values you should specify in them, we cannot tell you, because we don't know what you are doing.
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);