Develop Reference

How to move a view to another view using animation in Android?

I have a circle at the center of the screen inside which there's an ImageView + TextView. I have another two ImageView+TextView, one at the top and another at bottom of the screen.
My requirement is :
I want a copy of the top ImageView+TextView and a copy of the bottom ImageView+TextView to move in animation into the center of the circle, thereby changing the value of the textView inside the circle.
For example:
Say top textView has value 200 and bottom textview has value 300. I want a portion of those values (say 100 or 150) to animate and move into the circle, but the original values 200 and 300 should remain on the same position.
I've tried using TranslateAnimation. However I face issues finding the x and y coordinates of the center circle. It is not exactly going to the center of the circle. Also original view's position is not retained.
TranslateAnimation animation = new
TranslateAnimation(startLayout.getX(),endLayout.getX(),
startLayout.getY(),endLayout.getY);
animation.setDuration(1000);
animation.setFillAfter(false);
startView.startAnimation(animation);
startLayout is the linearlayout in which ImageView and TextView reside.
Please help! Thanks!

I had the same issue and I fixed by using the next code (sorry is in Kotlin, but works the same in Java).Let's say viewFirst wants to reach viewTwo position:
(DON'T USE):
viewFirst.animate()
.translationX(viewSecond.x)
.translationY(viewSecond.y)
.setDuration(1000)
.withEndAction {
//to make sure that it arrives,
//but not needed actually these two lines
viewFirst.x = viewSecond.x
viewFirst.y = viewSecond.y
}
.start()
(USE THIS SOLUTION):
viewFirst.animate()
.x(viewSecond.x)
.y(viewSecond.y)
.setDuration(1000)
.withEndAction {
//to make sure that it arrives,
//but not needed actually these two lines
viewFirst.x = viewSecond.x
viewFirst.y = viewSecond.y
}
.start()

Using the getX() and getY() methods define the position of the view in pixels, but the constructor you use defines Float type values that must be values from 0.0f to 1.0f
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
This is another option using the view`s position in pixels:
viewFirst.animate()
.x(viewSecond.getX())
.y(viewSecond.getY())
.setDuration(1000).withEndAction(new Runnable() {
#Override
public void run() {
viewFirst.setX(tv2.getX());
viewFirst.setY(tv2.getY());
}
}).start();

Try this for accurate coordinates
private fun moveView(viewToBeMoved: View, targetView: View) {
val targetX: Float =
targetView.x + targetView.width / 2 - viewToBeMoved.width / 2
val targetY: Float =
targetView.y + targetView.height / 2 - viewToBeMoved.height / 2
viewToBeMoved.animate()
.x(targetX)
.y(targetY)
.setDuration(2000)
.withEndAction {
targetView.visibility = View.GONE
}
.start()
}

MPAndroidChart PieChart Animations

I set 2 values on piechart. I want to animate it. But I want to change animation way. All animations do right to left angle. I want to do left to right angle. How can I change animation direction?
Edit 1: Library: MPAndroidChart
Edit 2: Althought it is not very relevant, I add following code here.
mButton_AvailableLimit.setOnClickListener( new View.OnClickListener() {
#Override
public void onClick(View v) {
// fromAngle and toAngle is a float variables that less then 360
mPieChart.spin( 500,fromAngle,360 - toAngle, Easing.EasingOption.EaseInOutQuad );
}
} );

It's very simple in fact,
//for rotating anti-clockwise
mPieChart.spin( 500,0,-360f, Easing.EasingOption.EaseInOutQuad);

pieChart.animateX(1000); this is work fine

In android How to Translate to an absolute Point in Screen

I have an Imageview and an ImageButton and want the Imageview to move to the imagebutton's position.
The Imageview and its location on screen
myAnimation1.getLocationInWindow(imagePos);
The Image button and its location on screen
ImageButton.getLocationInWindow(buttonPos);
To translate or move the Imageview to the Imagebutton I tried
Animation move = new TranslateAnimation(Animation.ABSOLUTE,imagePos[0],Animation.ABSOLUTE,buttonPos[0],Animation.ABSOLUTE,imagePos[1],Animation.ABSOLUTE,buttonPos[1]);
But it is not working. The translations are not seen on screen. Any help would be appreciated a lot!! Thankyou in advance.

First, just in case you are not getting the right coordinates from getLocationInWindow, try getting the coordinates like this:
ImageButton.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
public void onGlobalLayout() {
ImageButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
int[] locations = new int[2];
ImageButton.getLocationOnScreen(locations);
// x is locations[0];
// y is locations[1];
}
});

You did not set the duration and not even started the animation.
move.setDuration(1000);
imageView.startAnimation(move);
And then try to play with the attributes of animation to get the desired result

Is there any way to create skew animation for a View with ObjectAnimator in android

I want to create skew animation for a View in android.
So, I have rectangular view (this is normal/start state), at the end it should looks like this:
I can do such a thing with android.view.animation package using Transformation of TYPE_MATRIX. So I can create Matrix and use preSkew method, apply this Matrix to my custom animation and then start this animation on a view. So this is OK.
BUT
The problem is I want to do this with ObjectAnimator.
Because using android.view.animation package is not recommended to use.
But I can't get the solution for this problem with ObjectAnimator class.
If I have ImageView, I can use method setImageMatrix for ObjectAnimator (and also create custom MatrixEvaluator to evaluate corresponding matrices for each factor),
but I want to get solution for this problem with a View class, not for some subclass of it.
And the main reason is, that TextView, for example, doesn't have public method like setMatrix, and I want to get the solution for TextView too. So get the solution for base View class is the main desire.
There is another solution: create custom, for example, SkewTextView, in which onDraw method we use canvas.skew method.
But this is worse solution even than using android.view.animation package, because you need to create wrappers for any View subclass you want to skew.
So, I don't know, how I can skew View with a ObjectAnimator (as View class doesn't have public methods like setSkew or setMatrix).
How would you solve this problem?
Have you any idea of how to solve this problem?
Is there a solution for this problem with ObjectAnimator?
Any help (or even thoughts) is greatly appreciated
Thanks

Well without subclassing this might be a bit tricky. My main idea is to use TimeAnimator, which will provide you time callbacks in conjunction with Camera (which can use Matrix transformations). Or you can use TimeAnimator and make a Bitmap from the View you want to skew, make the original View invisible, and draw the Bitmap on each TimeAnimator step applying a Matrix to it. But I'm not sure if this is the optimal way to do that, since you will have to create a new Bitmap on each frame
EDIT: No, Camera approach is not the way to do that as it is stated in comments below

I created a skew animation using Android Property Animation APIs in my project (GitHub Link).
What I did:
Created a custom view (SkewView) and added a SKEW_X property to it.
public class SkewView extends ImageView {
private static final String TAG = "SkewView";
public static final Property SKEW_X
= new FloatProperty("skewX") {
#Override
public void setValue(SkewView object, float value) {
object.setSkewX(value);
}
#Override
public Float get(SkewView object) {
return object.getSkewX();
}
};
private float mSkewX;
// ...
public float getSkewX() {
return mSkewX;
}
public void setSkewX(float skewX) {
mSkewX = skewX;
invalidate();
}
#Override
protected void onDraw(Canvas canvas) {
if (mSkewX != 0) {
canvas.skew((float) (mSkewX * Math.PI / 180.0f), 0);
}
super.onDraw(canvas);
}
}
Used ObjectAnimator to animate this property.
ObjectAnimator skewAnimator = ObjectAnimator.ofFloat(mTarget, SkewView.SKEW_X, 30);

Multiple animations within a relative view

I am trying to animate a pointer around the screen in an android application.
I am using an imageview as the pointer inside a relative layout as follows:
final RelativeLayout container = (RelativeLayout) findViewById(R.id.container);
pointer = (ImageView) findViewById(R.id.pointer);
pointer.animate().setDuration(2000);
I then want to move the pointer up 10 pixels every time I click a button:
// ONCLICK LISTENER FOR LEFT BUTTON
btnUp.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {
//get positon of pointer
leftPoint = pointer.getLeft();
topPoint = pointer.getTop();
int xValue = container.getWidth() - pointer.getWidth();
int yValue = container.getHeight() - pointer.getHeight();
pointer.animate().x(leftPoint).y(topPoint-10);
}
});
This works the first time I click the button but will not move it any subsequent times. I have tried making the int points static but this did not help.
Any help greatly appreciated.

This might sound counter-intuitive, but animating a view doesn't change its location. Your code is demonstrating it. When you do this line:
topPoint = pointer.getTop();
You get the same value every time.
You need to change pointer's position at the end of the animation.
This answer shows how someone else has done it.
Other Considerations
You could use object animator, if you are only targeting SDK 11 and above. Here is a little intro to it.
If you want to interrupt your animation, you can check its status, and find out its current y offset. You can add that to the position of the view before starting the animation. Here is an example.