I am trying to animate a view to scale up on touch down and scale down on touch up. The following is my animation declarations:
scale_up.xml
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="true"
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.5"
android:toYScale="1.5" />
scale_down.xml
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="true"
android:duration="500"
android:fromXScale="1.5"
android:fromYScale="1.5"
android:toXScale="1.0"
android:toYScale="1.0" />
I then use SurfaceHolder's onTouch method to reach to MotionEvents:
public boolean onTouchEvent(MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
mView.startAnimation(mScaleUp);
mView.invalidate();
// Intentional fall-through
case MotionEvent.ACTION_MOVE:
float[] focusCoords = translatePointerCoords(this, event);
mView.setX(focusCoords[0] - mView.getWidth() / 2);
mView.setY(focusCoords[0] - mView.getHeight() / 2);
mView.invalidate();
mView.requestLayout();
break;
case MotionEvent.ACTION_UP:
mView.startAnimation(mScaleDown);
mView.invalidate()
break;
}
}
public static float[] translatePointerCoords(View view, MotionEvent event) {
final int index = event.getActionIndex();
final float[] coords = new float[] { event.getX(index), event.getY(index) };
Matrix matrix = new Matrix();
view.getMatrix().invert(matrix);
matrix.postTranslate(view.getScrollX(), view.getScrollY());
matrix.mapPoints(coords);
return coords;
}
The mView view is 120dp x 120dp and it is drawn initially at lication (0, 0). If animations are disabled, I can see the view being dragged under my finder. However, when animations are enabled, upon touching my finger down, I see the view scale up but it also displaced in the bottom-right direction. As it turns out, if I put my finger close to parent's (0, 0) coordinates, the view doesn't get displaced. This means that somehow the pivotX and pivotY either get ignored or somehow they get cached with the old view's position when I load the animations. Also, when I start moving my finger, I see that the scaled image gets distorted and all messed up:
Based on all of this, I'm getting the idea that tween animations with movable/dynamic views are not meant to play together. Should I use property animations? Is that what is commonly used to perform such tasks?
Thanks for any advice!
I have the same problem, too. It is because your "real" LayoutParam is too small to update the whole "fillAfter" region. A simple way to solve that: invalidate the parent layout!
Related
I have a Linear Layout which I want to be animated to resize when I click on it. Once it is resized you should be able to see buttons and text. I've tried animating using this:
container.animate().scaleX(scale);
container.animate().scaleY(scale);
Also I tried this:
container.startAnimation(anim);
where anim is (for making the view bigger):
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="10.0"
android:fromYScale="1.0"
android:toYScale="10.0"
android:pivotX="0%"
android:pivotY="0%"
android:fillAfter="false"
android:duration="700" />
But the problem is that each time I resize the LinearLayout the children inside get resized as well. This should be compatible to AndroidSDK 16 and above. How to achieve this without resizing the children inside?
Thanks
Hello you can override onMeasure() method of the children and make its dimensions as constants for example.
float scale = 1.2f;
ValueAnimator animator = ValueAnimator.ofInt(0,100);
animator.setTarget(container);
animator.setDuration(1000).start();
animator.addUpdateListener(new AnimatorUpdateListener()
{
#Override
public void onAnimationUpdate(ValueAnimator animation)
{
LayoutParams layoutparams = container.getLayoutParams();
layoutparams.height = (int)(layoutparams.height* animation.getAnimatedValue() *(scale -1f));
layoutparams.width= (int)(layoutparams.width* animation.getAnimatedValue() *(scale -1f));
container.setLayoutParams(layoutparams);
}
});
I have Relative layout, in that layout I have image views which altogether looks like one image. I want animate the 6 image views. 3 are right_top,right_center,right_bottom and another 3 are left-top,left-center,left-bottom. and all these are within its parent layout only...
I want to implement exactly like this image.
Hope THIS may help you.
And if you want to add scaling to tour animation add this scale inside your each animation set
<scale
android:fromYScale="1.0"
android:toYScale="0.5"
android:startOffset="0"
android:duration="1200"
android:fromXScale="1.0"
android:toXScale="0.5"
android:fillAfter="true" />
siddhu,sorry for late.
#Override
public void onClick(View v) {
TranslateAnimation mAnimation1 = new TranslateAnimation(0, mImageViewX.getX(),
mImageView1.getY(), mImageViewX.getY());
mAnimation1.setDuration(500);
mAnimation1.setFillAfter(true);
mImageView1.startAnimation(mAnimation1);
TranslateAnimation mAnimation2 = new TranslateAnimation(0,
- mImageViewX.getX(), mImageView2.getY(), mImageViewX.getY());
mAnimation2.setDuration(500);
mAnimation2.setFillAfter(true);
mImageView2.startAnimation(mAnimation2);
TranslateAnimation mAnimation3 = new TranslateAnimation(0, mImageViewX.getX(),
mImageView3.getX(), -mImageViewX.getY());
mAnimation3.setDuration(500);
mAnimation3.setFillAfter(true);
mImageView3.startAnimation(mAnimation3);
}
The xml is this :
you should learn animation first..it's not hard.
android.view.animation.TranslateAnimation.TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
```
How can I create one animation which always translates from left to right and then if animation stops it turns the other way and translates from right to left. I can create Translate animation in xml and programatically too.
Create this xml, it will translate from left to right and from right to left.
/res/anim/translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:fillAfter="true" >
<translate
android:interpolator="#android:anim/linear_interpolator"
android:fromXDelta="0%p"
android:toXDelta="10%p"
android:duration="2000"
android:startOffset="0" />
<translate
android:interpolator="#android:anim/linear_interpolator"
android:fromXDelta="10%p"
android:toXDelta="-10%p"
android:duration="2000"
android:startOffset="2000" />
</set>
Suppose you want to apply this animation to an image then write the code below in your class file.
ImageView image = (ImageView)findViewById(R.id.imageView1);
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
image.startAnimation(animation);
Edit:
If you want your animation to repeat infinitely add the following attributes to the translate tag.
android:repeatCount="infinite"
android:repeatMode="restart"
Depends on your min API level actually. Essentially You should look at ViewPropertyAnimator class.
Let's say you have view to animate, and parent - parent of this view. Your code would look like this:
final float startX = 0; //start position
final float endX = parent.getWidth() - view.getWidth(); //end position - right edge of the parent
API 12+:
view.animate().translationX(endX).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
view.animate().translationX(startX).start();
}
}).start();
API 16+:
view.animate().translationX(endX).withEndAction(new Runnable() {
#Override
public void run() {
view.animate().translationX(startX).start();
}
}).start();
Your startX and endX might be different - depending on your needs.
Please note that start() method call is optional.
Also I have not mentioned solution for API <12 since I personally think that nobody should support those legacy APIs :)
In My Android map application, I have some cluster icons. whenever the cluster icon is pressed i want to display a popup infobox with text and button. If we pressed the button, it will lead to next activity.
private void drawInfoWindow(Canvas canvas, MapView mapView, boolean shadow,
int x, int y) {
if (isSelected_) {
Point selDestinationOffset = new Point();
mapView.getProjection().toPixels(cluster_.center_,
selDestinationOffset);
// Setup the info window with the right size & location
int INFO_WINDOW_WIDTH = 125;
int INFO_WINDOW_HEIGHT = 25;
RectF infoWindowRect = new RectF(0, 0, INFO_WINDOW_WIDTH,
INFO_WINDOW_HEIGHT);
infoWindowRect.offset(x, y);
// Draw inner info window
canvas.drawRoundRect(infoWindowRect, 5, 5, getInnerPaint());
// Draw the MapLocation's name
int TEXT_OFFSET_X = 10;
int TEXT_OFFSET_Y = 15;
canvas.drawText(cluster_.number+" Incidents", x + TEXT_OFFSET_X, y
+ TEXT_OFFSET_Y, getTextPaint());
}
}
This shows only a small textview like popup window. But i want to display a popup infobox with text and button. Please provide me the best way....
Thanks...
You can use a custom layout xml file to create a overlay on mapview, instead of using canvas.
Create a xml file for your overlay(I use overlay_pin_layout.xml here). For example, a linearlayout which has a textview on the top and a button on the bottom.
Add this overlay to where you want.
// Inflate your overlay from xml file
View overlayPin = getLayoutInflater().inflate(R.layout.overlay_pin_layout, null);
// Set the textview
((TextView)(overlayPin.findViewById(R.id.textview_overlayerpin))).setText(YOUR_TEXT);
// set button touch listener
((Button)(overlayPin.findViewById(R.id.button_overlayerpin))).setOnLongClickListener(
new View.OnLongClickListener() {
#Override
public boolean onLongClick(View v) {
// Do something on button click
return false;
}
}
);
// add your overlay on mapview by geopoint
overlayPin.setLayoutParams(new MapView.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT,
new GeoPoint(YOUR_LAT, YOUR_LON),
MapView.LayoutParams.BOTTOM_CENTER));
mapView.addView(overlayPin);
For a pop-up like animation , try this one.
Create a anim folder in res, if you do not have one.
Create a xml with the code below in anim folder. I call it animation_pop_up.xml.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="500"
android:repeatCount="0"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_interpolator"
>
</scale>
<alpha
android:fromAlpha="0"
android:toAlpha="1"
android:duration="500"
android:repeatCount="0"
android:repeatMode="reverse">
</alpha>
</set>
When you add overlayPin on mapview, play the animation.
Animation animation = AnimationUtils.loadAnimation(mainActivity.getApplicationContext(),
R.anim.animation_pop_up);
overlayPin.startAnimation(animation);
Here is simple xml android animation:
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="-110"
android:toYDelta="-110" android:duration="1000" android:fillAfter="true" />
I want to move animated object from the center of the screen to 0, 0 positions. How cat I make it (it should work at all screen resolutions)
My Answer:
Thank you guys for your help. But I have fix my problem by other way, dynamically, without xml. Here's full code of this method:
public void replace(int xTo, int yTo, float xScale, float yScale) {
// create set of animations
replaceAnimation = new AnimationSet(false);
// animations should be applied on the finish line
replaceAnimation.setFillAfter(true);
// create scale animation
ScaleAnimation scale = new ScaleAnimation(1.0f, xScale, 1.0f, yScale);
scale.setDuration(1000);
// create translation animation
TranslateAnimation trans = new TranslateAnimation(0, 0,
TranslateAnimation.ABSOLUTE, xTo - getLeft(), 0, 0,
TranslateAnimation.ABSOLUTE, yTo - getTop());
trans.setDuration(1000);
// add new animations to the set
replaceAnimation.addAnimation(scale);
replaceAnimation.addAnimation(trans);
// start our animation
startAnimation(replaceAnimation);
}
My solution:
Thank you guys for your help. But I have fix my problem by other way, dynamically, without xml. Here's full code of this method:
public void replace(int xTo, int yTo, float xScale, float yScale) {
// create set of animations
replaceAnimation = new AnimationSet(false);
// animations should be applied on the finish line
replaceAnimation.setFillAfter(true);
// create scale animation
ScaleAnimation scale = new ScaleAnimation(1.0f, xScale, 1.0f, yScale);
scale.setDuration(1000);
// create translation animation
TranslateAnimation trans = new TranslateAnimation(0, 0,
TranslateAnimation.ABSOLUTE, xTo - getLeft(), 0, 0,
TranslateAnimation.ABSOLUTE, yTo - getTop());
trans.setDuration(1000);
// add new animations to the set
replaceAnimation.addAnimation(scale);
replaceAnimation.addAnimation(trans);
// start our animation
startAnimation(replaceAnimation);
}
First, insert object in container that occupies entire screen. Then modify you animation xml like this
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="50%p" android:fromYDelta="50%p"
android:toXDelta="0%p" android:toYDelta="0%p"
android:duration="1000"
android:fillAfter="true" />
You can also check this android API reference http://developer.android.com/guide/topics/resources/animation-resource.html#translate-element
%p suffix translates element "in percentage relative to the parent size".
If you want it to work on all screens you aren't going to be able to hardcode x,y values. Animations allow you to use percents. This animation would move your view from 0% x and y(relative to itself. In other words where ever it is before the animation it will start from there) It will move to 0%p x and y (which means 0% relative to the parent) This should take you to the top left. Depending on how far into the corner you want it you may try 5%p or 10%p to get some extra margin.
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%" android:fromYDelta="0%" android:toXDelta="0%p"
android:toYDelta="0%p" android:duration="1000" android:fillAfter="true" />
In my case I used an ImageView, randomly moved it using setY() and setX() and then animated it on the new position with a Scale animation in xml.
That didn't work. It always started from the initial position and scaled out to the new position.
The way I solved it was to wrap the animated View in a RelativeLayout and then move the RelativeLayout with the ImageView inside it.
PivotX and PivotY always uses the center of the parent view.