I'm using an xml defined animation to slide a view off the screen. The problem is, as soon as the animation completes it resets to its original position. I need to know how to fix this. Here's the xml:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="#android:anim/accelerate_interpolator">
<translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="500"/></set>
Here's the Java that I use to call it:
homeScrn = (View)findViewById(R.id.homescreen);
slideLeftOut = AnimationUtils.loadAnimation(this, R.anim.slide_left_out);
//Set Click Listeners For Menu
btnHelp.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
LayoutInflater.from(getApplicationContext()).inflate(R.layout.help, (ViewGroup)findViewById(R.id.subpage), true);
homeScrn.startAnimation(slideLeftOut);
}
});
So basically what happens is I inflate a view underneath one. Then I animate the view on top off to the left. As soon as it gets off screen and the animation is finished it resets its position back.
Finally got a way to work around,the right way to do this is setFillAfter(true),
if you want to define your animation in xml then you should do some thing like this
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator"
android:fillAfter="true">
<translate
android:fromXDelta="0%"
android:toXDelta="-100%"
android:duration="1000"/>
</set>
you can see that i have defined filterAfter="true" in the set tag,if you try to define it in translate tag it won't work,might be a bug in the framework!!
and then in the Code
Animation anim = AnimationUtils.loadAnimation(this, R.anim.slide_out);
someView.startAnimation(anim);
OR
TranslateAnimation animation = new TranslateAnimation(-90, 150, 0, 0);
animation.setFillAfter(true);
animation.setDuration(1800);
someView.startAnimation(animation);
then it will surely work!!
Now this is a bit tricky it seems like the view is actually move to the new position but actually the pixels of the view are moved,i.e your view is actually at its initial position but not visible,you can test it if have you some button or clickable view in your view(in my case in layout),to fix that you have to manually move your view/layout to the new position
public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
new TranslateAnimation(-90, 150, 0, 0);
now as we can see that our animation will starts from -90 x-axis to 150 x-axis
so what we do is set
someView.setAnimationListener(this);
and in
public void onAnimationEnd(Animation animation)
{
someView.layout(150, 0, someView.getWidth() + 150, someView.getHeight());
}
now let me explain public void layout (int left, int top, int right, int botton)
it moves your layout to new position first argument define the left,which we is 150,because translate animation has animated our view to 150 x-axis, top is 0 because we haven't animated y-axis,now in right we have done someView.getWidth() + 150 basically we get the width of our view and added 150 because we our left is now move to 150 x-axis to make the view width to its originall one, and bottom is equals to the height of our view.
I hope you people now understood the concept of translating, and still you have any questions you can ask right away in comment section,i feel pleasure to help :)
EDIT Don't use layout() method as it can be called by the framework when ever view is invalidated and your changes won't presist, use LayoutParams to set your layout parameters according to your requirement
The animations are working as expected. Just because you animated something does not mean you actually moved it. An animation only affects drawn pixels during the animation itself, not the configuration of the widgets.
You need to add an AnimationListener, and in the onAnimationEnd() method, do something that makes your move permanent (e.g., removes the view on top from its parent, marks the view on top as having visibility GONE).
I might be a bit late in replying, but I have the solution for this:
Just add android:fillAfter="true"
in your xml
You can use
fillAfter=true
fillEnabled=true
your View will'not reset to original position, but if you have some buttons or something else in your view , their position will not change.
You must use ObjectAnimator , it works from API 11 level . It changes View position automatic,
here is the example
ObjectAnimator objectAnimator= ObjectAnimator.ofFloat(mContent_container, "translationX", startX, endX);
objectAnimator.setDuration(1000);
objectAnimator.start();
Thanks JUL for his answer
If your app not found object animator, change the API level from Project -> properties -> Android , than import android.animation.ObjectAnimator;
Regards Hayk
You need to add this command:
final Animation animSlideLeft = new TranslateAnimation(0, -80, 0,-350, 0, 0, 0, 0);
animSlideLeft.setFillAfter(true);
I went to the same question and solved it with setting the marginLeft at OnAnimationEnd()..
MarginLayoutParams params = (MarginLayoutParams) this.getLayoutParams();
params.setMargins(this.getWidth()*position, 0,0,0);
this.setLayoutParams(params);
This problem has bothered for more than a week.
And Muhammad's answer pointed me a strightforward way to solve it.
I used sever layout to implement side menus with animation.
"view.layout will not be persistent. You should use LayoutParams, which will be persistent."
Here's my solution:
(Use what kind of LayoutParameter is depended on your own parent's layout):
#Override
public void onAnimationEnd(Animation animation) {
FrameLayout.LayoutParams layoutParams=new FrameLayout.LayoutParams(screenWidth, screenHeight);
layoutParams.setMargins((int) -(screenWidth * RATE), 0,
(int) (screenWidth - screenWidth * RATE), screenHeight);
for(View v:views) {
v.setLayoutParams(layoutParams);
//v.layout((int) -(screenWidth * RATE), 0, (int) (screenWidth - screenWidth * RATE), screenHeight);
v.clearAnimation();
}
}
fillAfter = true will do the job to transform view to new animation positon.
rotateAnimation.fillAfter = true;
If anybody interested to move arrow_up & arrow_down animations for a recycle view expands/collapse behavior.
Initial state: Collapse
call the method with a child visibility flag(View.VISIBLE/View.GONE).
Below is code belongs to animations.
fun setArrowImage(imageView: ImageView, childVisibility: Int) {
val angleRange = if (childVisibility == View.VISIBLE) Pair(0F, 180F) else
Pair(100f, 0F)
val rotateAnimation = RotateAnimation(
angleRange.first, angleRange.second,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f
)
rotateAnimation.duration = 300
rotateAnimation.fillAfter = true;
imageView.startAnimation(rotateAnimation)
}
Use helper methods below to easily animate your view. Then you can animate and reset after completion like this:
// Animate the view:
fly(
view1,
(float) 0,
(float) 0,
(float) 0,
(float) 1000,
250,
null,
null,
() -> {
// Return the view to initial position on animation end:
fly(
view1,
(float) 0,
(float) 0,
(float) 0,
(float) 0,
0);
return null;
});
Helper methods:
/**
* Translation of a view.
*/
public static void fly(
View view,
float fromXDelta,
float toXDelta,
float fromYDelta,
float toYDelta,
int duration) {
fly(
view,
fromXDelta,
toXDelta,
fromYDelta,
toYDelta,
duration,
null,
null,
null);
}
/**
* Translation of a view with handlers.
*
* #param view A view to animate.
* #param fromXDelta Amount to shift by X axis for start position.
* #param toXDelta Amount to shift by X axis for end position.
* #param fromYDelta Amount to shift by Y axis for start position.
* #param toYDelta Amount to shift by Y axis for end position.
* #param duration Animation duration.
* #param start On animation start. Otherwise NULL.
* #param repeat On animation repeat. Otherwise NULL.
* #param end On animation end. Otherwise NULL.
*/
public static void fly(
View view,
float fromXDelta,
float toXDelta,
float fromYDelta,
float toYDelta,
int duration,
Callable start,
Callable repeat,
Callable end) {
Animation animation;
animation =
new TranslateAnimation(
fromXDelta,
toXDelta,
fromYDelta,
toYDelta);
animation.setDuration(
duration);
animation.setInterpolator(
new DecelerateInterpolator());
animation.setFillAfter(true);
view.startAnimation(
animation);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
if (start != null) {
try {
start.call();
} catch (Exception e) {
e.printStackTrace();
}
}
}
#Override
public void onAnimationEnd(Animation animation) {
if (end != null) {
try {
end.call();
} catch (Exception e) {
e.printStackTrace();
}
}
}
#Override
public void onAnimationRepeat(
Animation animation) {
if (repeat != null) {
try {
repeat.call();
} catch (Exception e) {
e.printStackTrace();
}
}
}
});
}
Nothing from answers worked with me; although #Muhammad Babar answer inspired me to get a solution:
He mentioned that we can layout the view to the new position upon animation end:
public void onAnimationEnd(Animation animation) {
someView.layout(150, 0, someView.getWidth() + 150, someView.getHeight());
}
Although this didn't work with me instead; I had to do that in a Handler with delayed Runnable using a delay value that is slightly less than the animation duration.
So, in my case the animation duration is 500 msec, and I used a handler on 450 mesec, so it gets triggered just before the animation ends by 50 msec.
Handler().postDelayed({
someView.layout(150, 0, someView.width + 150, someView.hight)
someView.requestLayout()
someView.forceLayout()
}, 450)
Related
Hello Stack community,
I want to change the position of text view.
I have tried several ways, but for all of them, the view position is set back to original position.
The ways I tried,
// 1. way
someText.setX(newPositionX);
someText.setY(newPositionY);
// 2.way
someText.x(newPositionX).y(newPositionY).setDuration(0).start();
// 3.way
someText.animate().x(newPositionX).y(newPositionY).setDuration(0).start();
//4.way
ObjectAnimator objectAnimatorX= ObjectAnimator.ofFloat(someText, "translationX", oldPositionX, newPositionX);
ObjectAnimator objectAnimatorY= ObjectAnimator.ofFloat(someText, "translationY", oldPositionY, newPositionY);
objectAnimatorX.setDuration(0);
objectAnimatorX.start();
objectAnimatorY.setDuration(0);
objectAnimatorY.start();
// 5.way
ObjectAnimator animX = ObjectAnimator.ofFloat(someText, "x", newPositionX);
ObjectAnimator animY = ObjectAnimator.ofFloat(someText, "y", newPositionY);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(animX, animY);
animSetXY.start();
For all these ways, it is reset to original place.
However when I use animate function in onTouch event eg. someText.animate().x(newPositionX).y(newPositionY).setDuration(0).start();
it does not set to original coordinate, the change is permanent. This what i want but I want to do this, without touch event, namely some other part of the code which uses some other events.
My questions are
Why the change is permanent when I use onTouch event while it is temporary when I dont use onTouch event?
How can I achieve to set Text position permanently?
Lastly my xml is like this for textView
`<TextView
android:id="#+id/latinBigTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:background="#drawable/border_text"
android:text="Initial text " />`
Somehow I have fixed. I have not still got the best results but it updates permanently. Most probably because of my calculations but for now it seems that the position update remains. I have used following code:
TranslateAnimation anim = new TranslateAnimation(0, deltaX, 0, deltaY);
anim.setDuration(0);
anim.setFillAfter(true);
anim.setFillEnabled(true);
anim.setAnimationListener(new Animation.AnimationListener()
{
#Override
public void onAnimationStart(Animation animation)
{
}
#Override
public void onAnimationEnd(Animation animation)
{
int l = newPosX;
int t = newPosY;
int r = SomeText.getWidth() + newPosX;
int b = SomeText.getHeight() + newPosY;
latinText.layout(l, t, r, b);
}
#Override
public void onAnimationRepeat(Animation animation)
{
}
});
latinText.startAnimation(anim);
Where SomeText is the textView which I want to move permanently and dynamically. DeltaX and DeltaY is the amount of pixel that I want to move.
(l, r, t, b) means (left, top, right, bottom) of the view.
I hope it helps other people who have faced the same problem.
However I have still no answer for my first question. If anyone knows and tells, I would be very appreciated.
I have a simple cardview topCard and want to translate it from the center of a layout to right side and back to the initial place.
Wrote some code using object animator:
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(topCard, "translationX", topCard.getWidth() + 150);
objectAnimator.setDuration(1500);
objectAnimator.start();
objectAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationEnd(Animator animation) {
ObjectAnimator translationX = ObjectAnimator.ofFloat(topCard, "translationX", - (topCard.getWidth() + 150));
translationX.setDuration(1500);
translationX.start();
So, my view correctly translates to the right side and the second animation move it not to the start place but to the (start place - (topCard.getWidth() + 150)).
How can I animate translating view to the right and back to the same position using 2 sequence animations?
Here is wrong result that i have
https://i.imgur.com/8SShfHL.gifv
You should try putting this in your onAnimationEnd instead:
#Override
public void onAnimationEnd(Animator animation) {
ObjectAnimator translationX = ObjectAnimator.ofFloat(topCard, "translationX",
topCard.getWidth() + 150, - (topCard.getWidth() + 150));
translationX.setDuration(1500);
translationX.start();
Notice that I added topCard.getWidth() + 150, making that the starting position of the topCard. According to the ObjectAnimator.ofFloat Android Docs:
Constructs and returns an ObjectAnimator that animates between float values. A single value implies that that value is the one being animated to. Two values imply starting and ending values.
Im trying to make an Imageview (a ball) move around the layout and bounce a number of times before stoping when a buttom is pressed. The probles is that although the logcat says its happening, i dont see it moving.
Here it is
public class BallPhisics {
int x =400;
int y = 0;
boolean bounceX = false;
boolean bounceY= false;
int counter =0;
ImageView object;
public BallPhisics(ImageView i){
object=i;
}
public void applyMovement() {
while (true) {
object.setLeft((int) object.getX()+x); //i know i shouldnt use pixels
Log.d("EVENT", "X moved"); Log.d("Ended",Integer.toString(object.getLeft()));
object.setBottom((int)(object.getY() + y));
Log.d("EVENT", "Y moved");
try {
Thread.sleep(1000);
Log.d("EVENT", "Time 1 used");
} catch(InterruptedException ex) {
Thread.currentThread().interrupt();
}
if (object.getX()<=50||(object.getRight()<=50)){
bounceX =true;
break;
}
if (object.getY()<=50||object.getTop()<=50){
bounceY=true;
break;
}
}
this.bouncing();
}
public void bouncing(){
Log.d("EVENT", "Bouncing!!");
if (bounceX&&bounceY){
x=-x;
y=-y;
}
else if (bounceX){
x=-x;
y=(int)(Math.random()*100- 50 +y);
}
else if (bounceY) {
x = (int) (Math.random() * 100 - 50 + x);
y = -y;
}
counter++;
if(counter==5){return;}
this.applyMovement();
}
And on mainActivity the onclick event.
public void StartBall (View view){
ImageView imageview=(ImageView) findViewById(R.id.imageView);
BallPhisics phisics = new BallPhisics(imageview);
Log.d("EVENT", Integer.toString(imageview.getLeft() )+" before");
phisics.applyMovement();
Log.d("EVENT",Integer.toString(imageview.getLeft())+" after" );
}
Sorry if it is a lot of reading. By the way does anyone knows the proper way of moving a view?
Thanks in advance
First of all to move a View it's probably not a good idea to use setLeft (int left) or setBottom (int bottom) because this method is meant to be called by the layout system and should not generally be called otherwise, according to the documentation.
To move a View dynamically you should take a look at LayoutParams or setX (float x) and setY (float Y), if you can limit your support to Honeycomb (API Level 11).
Regardless which one you use, you may find it difficult to achieve a smooth movement. Therefore I recommend you to use the view animation system to perform tweened animation of your ImageView.
Below you will find an example of a chain animation that moves an ImageView starting from left to right with an arbitrary y-coordinate. After each translation from one x-border to the next, the onAnimationEnd will be called and start an animation in the other direction.
public class MainActivity extends Activity {
//the ImageView you want to animate
private ImageView imageview;
private Animation mAnimation;
//The coordinates the view moved to in the last animation
private float lastX=0;
private float lastY=0;
private float secondlastY;
//Listener that implements a translate animation chain
AnimationListener animationListener=new AnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
float newY=(float)(Math.random()*0.75);
//this prevents that we move back to the position we came from
// to get a more natural bounce animation
while(newY<=secondlastY+0.15 && newY>=secondlastY-0.15){
newY=(float)(Math.random()*0.75);
}
if(lastX==0.75f){
//test if we are on the right border of the parent
mAnimation=newAnimation(lastX,lastY,0f,newY);
mAnimation.setAnimationListener(animationListener);
lastX=0f;
}else if(lastX==0.0f){
//test if we are on the left border of the parent
mAnimation=newAnimation(lastX,lastY,0.75f,newY);
mAnimation.setAnimationListener(animationListener);
lastX=0.75f;
}
secondlastY=lastY;
lastY=newY;
imageview.startAnimation(mAnimation);
}
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageview=(ImageView) findViewById(R.id.imageView);
//the coordinates the first animation should move to
lastY=(float)(Math.random()*0.75);
lastX=0.75f;
mAnimation=newAnimation(0f,0f,lastX,lastY);
mAnimation.setAnimationListener(animationListener);
imageview.startAnimation(mAnimation);
}
//Method that returns a new animation with given start and end coordinates
private Animation newAnimation(float startX, float startY, float endX, float endY){
Animation mAnimation = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_PARENT, startX,
TranslateAnimation.RELATIVE_TO_PARENT, endX,
TranslateAnimation.RELATIVE_TO_PARENT, startY,
TranslateAnimation.RELATIVE_TO_PARENT, endY );
mAnimation.setDuration(2500);
mAnimation.setRepeatCount(0);
mAnimation.setRepeatMode(Animation.REVERSE);
mAnimation.setFillAfter(true);
return mAnimation;
}
}
Note:
The translation animation is relative to the parents width and height. If you move the View all the way to x=1.0 or y=1.0 you will move parts of the view out of the parent layout. Because it's sufficient for this example I chose to set 0.75 to the max position in either direction. But you should probably set this dynamically in regards to the width and height of your ImageView and ParentLayout.
I am working on Android onlineShopping application.I have to apply some animation.
cart image is displays on Right-top corner of the screen.
List of items are on screen each item with "Add to cart" button.
When user press this button I have to play animation.
I have one fix image which should animate from touch position to
cart-image placed on right-top corner of the screen.
Please help me out.
Thanks in advance.
Update :
I Tried this to move image from one place to another.
TranslateAnimation anim = new TranslateAnimation(0,0,200,200);
anim.setDuration(3000);
img.startAnimation(anim);
This image I want to animate from touch position to right-top corner.
ultimately you want to move a view from one position to another position with animation.
Step 1:
get initial position of that view
int fromLoc[] = new int[2];
v.getLocationOnScreen(fromLoc);
float startX = fromLoc[0];
float startY = fromLoc[1];
Step 2:
get destination position
int toLoc[] = new int[2];
desti.getLocationOnScreen(toLoc);
float destX = toLoc[0];
float destY = toLoc[1];
Step 3:
create a class to manage animation
public class Animations {
public Animation fromAtoB(float fromX, float fromY, float toX, float toY, AnimationListener l, int speed){
Animation fromAtoB = new TranslateAnimation(
Animation.ABSOLUTE, //from xType
fromX,
Animation.ABSOLUTE, //to xType
toX,
Animation.ABSOLUTE, //from yType
fromY,
Animation.ABSOLUTE, //to yType
toY
);
fromAtoB.setDuration(speed);
fromAtoB.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
if(l != null)
fromAtoB.setAnimationListener(l);
return fromAtoB;
}
}
Step 4:
add animationlistener and start animation on desired view
AnimationListener animL = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
//this is just a method call you can create to delete the animated view or hide it until you need it again.
clearAnimation();
}
};
//now start animation as mentioned below:
Animations anim = new Animations();
Animation a = anim.fromAtoB(startX, startY, destX, destY, animL,850);
v.setAnimation(a);
a.startNow();
I hope it will be helpful !!
I think you are exactly looking for, you can check link
link here
check this example hope this will help u:
http://developer.android.com/training/animation/zoom.html
I have to animate a view from state A to B with changes to its scale, position and scrolling.
The following code almost does the trick:
AnimationSet animation = new AnimationSet(true);
int fromXDelta = view.getScrollX();
int fromYDelta = view.getScrollY();
view.scrollTo(0, 0);
float scale = (float) widthB / (float) widthA;
// Calculate toXDelta and toYDelta
TranslateAnimation translateAnimation = new TranslateAnimation(-fromXDelta, -toXDelta, -fromYDelta, -toYDelta);
translateAnimation.setDuration(duration);
animation.addAnimation(translateAnimation);
ScaleAnimation scaleAnimation = new ScaleAnimation(1, scale, 1, scale);
scaleAnimation.setDuration(duration);
animation.addAnimation(scaleAnimation);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationEnd(Animation arg0) {
view.clearAnimation();
// Change view to state B by modifying its layout params and scroll
}
#Override public void onAnimationRepeat(Animation arg0) {}
#Override public void onAnimationStart(Animation arg0) {}
});
view.startAnimation(animation);
The logic of onAnimationEnd makes the view flicker after the animation ends. Also if I don't call clearAnimation() the animation does not work as expected (why?).
Is this the right way to do this?
Thanks!
I don't know if it is the right way, but I was having the same problem as you.
I managed to get rid of the flickering by adding a:
animation.reset();
Just before the:
view.clearAnimation();
Note: In your code, it would be arg0.reset();
Did you try setting animation.setFillAfter(true) ?
It basically lets the latest position/state of your view persist when the animation is finished, avoiding any sort of flickering.