We Keep Coding

How do I make an animation of an ImageView from a RecyclerView on screen moving to a floating action button programmatically?

I have a RecyclerView on the screen and products with images in it. I'm trying to make an animation where the image of the product from the RecyclerView moves to the floating action button on the screen (both have the same parent layout - a coordinator layout.)
I have tried achieving this with TranslateAnimation and when that didn't work well, I also tried doing it with ObjectAnimator, but with both the animation always either starts from the wrong position or ends in the wrong position on the screen.
This was my attempt to achieve this with TranslateAnimation:
// Get the X and Y position of the ImageView and the FAB
int[] imageViewPos = new int[2];
productImage.getLocationInWindow(imageViewPos);
int[] fabPos = new int[2];
fab.getLocationInWindow(fabPos);
// Calculate the x and the y distance between the FAB and the imageView
xDelta = fabPos[0] - imageViewPos[0];
yDelta = fabPos[1] - smallImageViewPos[1];
productMoveAnimation = new TranslateAnimation(0, xDelta, 0, yDelta);
productMoveAnimation.setDuration(500);
productMoveAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
productImage.startAnimation(productMoveAnimation);
I also tried to use getLocationOnScreen instead of getLocationInWindow, but the productImage still didn't move to the correct position of the FAB.
This was my attempt to achieve this using ObjectAnimator:
pvhX = PropertyValuesHolder.ofFloat("x", imageViewPos[0], fabPos[0]);
pvhY = PropertyValuesHolder.ofFloat("y", imageViewPos[1], fabPos[1]);
productMoveAnim = ObjectAnimator.ofPropertyValuesHolder(productImage, pvhX, pvhY);
productMoveAnim.start();
And with this code instead, the ImageView kept going off the screen in the animation - even though it did start from the correct position. I tried getLocationOnScreen here too, and getLeft and getTop but it didn't fix anything.
I would really appreciate if anyone could help me figure out what I'm missing here, thanks in advance for any help! :)

How to get correct ImageviewId after rotation of layout

I have a layout with 2*2/3*3/4*4... ImageView. and some of them randomly colored like this:
For ranodomly colored one of Imageview, I have Use this code:
Random random = new Random();
id = array_image1.get(random.nextInt(array_image1.size()));
ObjectAnimator animator = ObjectAnimator.ofInt(findViewById(id), "backgroundResource", R.drawable.original_img, R.drawable.org_state).setDuration(1500);
animator.setStartDelay(1500);
animator.setEvaluator(new ArgbEvaluator());
animator.start();
And I'm handling some click event on colored ImageView like this:
for (int i = 0; i < array_image11.size(); ++i) {
final int btn = array_image11.get(i);
findViewById(btn).setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if ((findViewById(id)).equals(findViewById(btn)))
//Inform the user the button has been clicked
{
//forward
findViewById(id).setBackgroundResource(R.drawable.original_img);
}else {
//backward
Toast.makeText(StaticSpatial.this, "wrong", Toast.LENGTH_SHORT).show();
}
});
}
There is no problem till above.
But When I'm adding a random rotate animation code like this:
int n;
int[] a=new int[]{1,2};
final Random rnd = new Random();
n=a[rnd.nextInt(a.length)];
if(n==1)
{
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(l4, View.ROTATION, 0, 90);
rotateAnimator.setDuration(2000); // miliseconds
rotateAnimator.start();n);
}
else
{
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(l4, View.ROTATION, 0, 90);
rotateAnimator.setDuration(2000); // miliseconds
rotateAnimator.start();
}
After rotation image look like this(i.e. colored Imageview chage it's position):
After adding this rotate animation code my clickEvent not get correct ImageView id.
i.e. when imageview change it's position,their id should be go with that positon. but imageview id ramains at same postion.
So How to get required ImageviewId after rotation
Update:
After using azizbekian's answer(now using animator instead of animation) I found correct image-view id , but only first time.
i.e. first time when Activity starts it works good but when I'm going to a new view(say 3*3) and return back again to this view(2*2),it returns wrong image-view id till Activity restarts again.see my updated code for ref.
Explanation of working and issue:
I have already said that there are many matix of Imageview such as 2*2/3*3/4*4..... So when we start Application first load 2*2 matrix of imageview and when we click the odd colored imageview it goes to 3*3 matrix but when we click other than odd colored imageviewthen it goes to next level say 3*3.So when app start first time when I click on odd colored imageview it goes to 3*3 matrix but when return again on 2*2 after clicking other than odd colored imageview.and then again when we click on colored imageview it not get correct image id. and if any other query plz ask?
How to resolve this issue ?

When ImageView changes it's position, their id should go with that position. But ImageView id remains at same position.
That's because you are using Animation, which in fact doesn't change your View's position. What is does it makes an illusion of animation, so it only changes that view's matrix, but doesn't perform layout changes to the view.
Use Animator API instead of Animation.
Update
Given this animation xml:
<set xmlns:android="schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000" />
</set>
This can be substituted with following:
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(yourView, View.ROTATION, 0, 90);
rotateAnimator.setDuration(2000);
rotateAnimator.start();
Update:
Just set rotation zero at every load of view (or layout) like this:
mylayoutname.setRotation(0);
Because after rotation it doesn't go to zero degree automatically until activity stops.

Maybe instead of using rotation you can store the Ids of the ImageViews in a List or Array and the Id of the currently colored ImageView in a separated variable, and when you have to rotate instead you can simply select one random ImageView from the List/Array (excluding the currently colored one), remove the color from the previous one and color the new one.
By the way, when you have 3x3, 5x5, 7x7 etc. layouts is the middle ImageView never colored? 'Cause in those cases a rotation wouldn't change anything (visually, at least). I mean, a rotation works for choosing a random square in a layout of 2x2 squares, but not in any other case. Do you need to choose the squares randomly or do they need to always be chosen by a rotation? (I hope what I mean is clear...)

Android ImageView scale and zoom replace image

I'm trying to build an simple image-zoom-replace functionality based on the Image-Zoom-Library "PhotoView":
https://github.com/chrisbanes/PhotoView
I just want to load a small image into a imageView and zoom/scale it. This code works perfectly:
ImageView galleryPictureNew = (ImageView)findViewById(R.id.galleryImage);
PhotoViewAttacher mAttacher = new PhotoViewAttacher(view);
mAttacher.update();
The problem is, i want to replace the small image with a large (hd-image) if i zoom in.
There is function called "setOnScaleChangeListener" like this:
mAttacher.setOnScaleChangeListener(new PhotoViewAttacher.OnScaleChangeListener() {
#Override
public void onScaleChange(float scaleFactor, float focusX, float focusY) {
//REPLACE IMAGE
}
});
This code above works, too BUT i want to "jump" to the last "position" and "zooming-level"?!
Does anyone has a solution for it?
Or maybe someone has an alternative library for this problem?
Do i have to save the last "position-state"?

Making canvas' drawline clickable

Based on this answer, I created a arrayList of rectF.
Technique to make a canvas drawLine() clickable?
here's the logic of my code :
List<RectF> rectFs;
Point pt1;
Point pt2;
then
path.moveTo(pt1.x, pt1.y);
path.lineTo(pt2.x, pt2.y);
path.computeBounds(rectF, true);
rectFs.add(rectF);
and then, I have this method to check the clicked and the rectF arrayList.
void lineHighighted(Point pt) {
int ct = 0;
for(RectF rectF : rectFs) {
if(rectF.contains(pt.x, pt.y)) {
ct++;
Log.d(tag, ct + "HERE");
}
}
}
my problem is, sometimes, the whole arraylist is selected or "called" even I didn't touch that "line".
Any wrong in my code?
Thanks in advance.
ADDITIONAL :
I found out that after adding this code in my canvas :
path.moveTo(coor1[0], coor1[1]);
path.lineTo(coor2[0], coor2[1]);
canvas.drawPath(path, paint2);
path.computeBounds(rectf, true);
my previous result :
it becomes like this :

It might be!Because i don't see your code of interaction with canvas ill post the code which fully working.The logic is that one line mustn't overlay another one in case to proper function.hope i could help you.
// setting where I will draw the ImageView for taking pictures
// rec is used for onInterceptTouchEvent. I pass this from the
// highest to lowest layer so that when this area of the screen
// is pressed, it ignores the TouchView events and passes it to
// this activity so that the button can be pressed.
rec.set((int)((double)mScreenWidth*.85),
(int)((double)mScreenHeight*.10) ,
(int)((double)mScreenWidth*.85)+mButtonDrawable.getMinimumWidth(),
(int)((double)mScreenHeight*.70)+mButtonDrawable.getMinimumHeight());
mButtonDrawable = null;
By This Logic you can use whatever you want in this logic it lets click happen not being overlaid

Moving Android ImageView by setting its coordinates

I am trying to do something fairly simple: move an image view by incrementing either the X or Y coordinates.
Initially I used the functions getX, getY, setX and setY on the image view, which worked in the emulator. However, when using it with the phone I had an error called NoSuchMethodError on these functions.
Here's the exact error I am getting (I get this for each of the functions I listed above):
java.lang.NoSuchMethodError: android.widget.ImageView.getX
According to my research this was caused by the fact that setX and setY are only implemented on the API11, in which case we are using API10. I have tried various other ways, such as using setMatrix, changePos() and a few other functions to change the ImageView's position.
My question is, what can I use to move the ImageViews like this, if I am using the API10?

You could try playing with layout parameters. Assuming you are using FrameLayout, or any other layout that supports margins
private ImageView myView;// populated in onCcreate
private void moveImage(int x, int y) {
ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams)myView.getLayoutParams();
lp.leftMargin = x;
lp.rightMargin = y;
requestLayout();
}

Here is a example for you:
LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) logoImage
.getLayoutParams();
lp.setMargins(0, 28, 0, 0);
logoImage.setLayoutParams(lp);
if your layout is a relativelayout ,then change the type LinearLayout.LayoutParams .