Develop Reference

Animation set view width from X to 0

I am trying to take a CardView (in a RecycleView) from actual width to 0. I am a newbie in android and in android animations. Could you say me what I am doing wrong?
This is my code:
final View v = cardViewHolder.cv;
int actualWidth = v.getMeasuredWidth();
ValueAnimator anim = ValueAnimator.ofInt(actualWidth, 0);
anim.setRepeatMode(ValueAnimator.REVERSE);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.width = val;
v.setLayoutParams(layoutParams);
}
});
anim.setDuration(R.integer.card_flip_time_full);
anim.start();
With a breakpoint I see that val is always 728 (the width) and never changes. What is my fail?

I solved it:
final View v = cardViewHolder.cv;
int actualWidth = v.getMeasuredWidth();
ValueAnimator anim = ValueAnimator.ofInt(actualWidth, 0);
anim.setRepeatMode(ValueAnimator.REVERSE);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
// This needs to be declared as Integer instead of int
v.requestLayout(); // #mhenryk advice
Integer val = (Integer) valueAnimator.getAnimatedValue();
int value = val.intValue(); // Then get the int value
ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
layoutParams.width = value;
v.setLayoutParams(layoutParams);
}
});
anim.setDuration(R.integer.card_flip_time_full);
anim.start();

Android Value Animator slow

I'm creating an animation for rail items for Android TV. I combined several animations using Value Animator but animations are really slow and there are a lot of frames skipped. It turns out the even if I play just one animation using Value Animator it causes this type of behavior. And I need to use five animations together. Here's my code:
public void setFocus(boolean hasFocus) {
//If card has focus
if (hasFocus) {
animWidth = ValueAnimator.ofInt(rlMain.getMeasuredWidth(), (int)
Utils.convertDpToPixel(215));
animWidth.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams =
rlMain.getLayoutParams();
layoutParams.width = val;
rlMain.setLayoutParams(layoutParams);
}
});
animHeight = ValueAnimator.ofInt(rlMain.getMeasuredHeight(), (int)
Utils.convertDpToPixel(328));
animHeight.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams =
rlMain.getLayoutParams();
layoutParams.height = val;
rlMain.setLayoutParams(layoutParams);
}
});
animTopMargin = ValueAnimator.ofInt((int) Utils.convertDpToPixel(42),
(int) Utils.convertDpToPixel(12));
animTopMargin.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams)
rlMain.getLayoutParams();
lp.setMargins(0, (Integer) animation.getAnimatedValue(),
(int) Utils.convertDpToPixel(12), 0);
rlMain.setLayoutParams(lp);
}
});
animTranslationX = ValueAnimator.ofFloat(rlContent.getX(),
rlContent.getX() + 15);
animTranslationX.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float xAnimatedValue = (float) animation.getAnimatedValue();
rlContent.setX(xAnimatedValue);
}
});
animTranslationY = ValueAnimator.ofFloat(rlContent.getY(),
rlContent.getY() - 17);
animTranslationY.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float yAnimatedValue = (float) animation.getAnimatedValue();
rlContent.setY(yAnimatedValue);
}
});
animatorSet = new AnimatorSet();
animatorSet.playTogether(animWidth, animHeight, animTopMargin,
animTranslationX, animTranslationY);
animatorSet.setDuration(1000);
animatorSet.start();
//Focus shadow visible
rlFocus.setVisibility(View.VISIBLE);
animWidth = null;
animHeight = null;
animTopMargin = null;
animTranslationX = null;
animTranslationY = null;
animatorSet = null;
} else {
animWidth = ValueAnimator.ofInt(rlMain.getMeasuredWidth(), (int)
Utils.convertDpToPixel(185));
animWidth.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams =
rlMain.getLayoutParams();
layoutParams.width = val;
rlMain.setLayoutParams(layoutParams);
}
});
animHeight = ValueAnimator.ofInt(rlMain.getMeasuredHeight(), (int)
Utils.convertDpToPixel(278));
animHeight.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams =
rlMain.getLayoutParams();
layoutParams.height = val;
rlMain.setLayoutParams(layoutParams);
}
});
animTopMargin = ValueAnimator.ofInt((int) Utils.convertDpToPixel(12),
(int) Utils.convertDpToPixel(42));
animTopMargin.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams)
rlMain.getLayoutParams();
lp.setMargins(0, (Integer) animation.getAnimatedValue(),
(int) Utils.convertDpToPixel(12), 0);
rlMain.setLayoutParams(lp);
}
});
animTranslationX = ValueAnimator.ofFloat(rlContent.getX(),
rlContent.getX() - 15);
animTranslationX.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float xAnimatedValue = (float) animation.getAnimatedValue();
rlContent.setX(xAnimatedValue);
}
});
animTranslationY = ValueAnimator.ofFloat(rlContent.getY(),
rlContent.getY() + 17);
animTranslationY.addUpdateListener(new
ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float yAnimatedValue = (float) animation.getAnimatedValue();
rlContent.setY(yAnimatedValue);
}
});
animatorSet = new AnimatorSet();
animatorSet.playTogether(animWidth, animHeight, animTopMargin,
animTranslationX, animTranslationY);
animatorSet.setDuration(1000);
animatorSet.start();
//Set focus shadow invisible with delay
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
rlFocus.setVisibility(View.INVISIBLE);
}
}, 1010);
animWidth = null;
animHeight = null;
animTopMargin = null;
animTranslationX = null;
animTranslationY = null;
animatorSet = null;
}
}
Is there any way to make those animations smooth? Any help would be highly appreciated :)

Shape Android Material Design

I want to ask about how to create animation for changing shape in android material design. And this is video that I got from Android Material Design guidelines.
Material can change shape
Thank you.

This is a quick implementation of that animation you linked to. It's using CardView from the support library, plus a custom PathInterpolator to make it move more like in the video (the default AccelerateDecelerateInterpolator is too abrupt, but you go with that one in pre-Lollipop devices). It's not a work of art, but hopefully this should give you an idea of one possible way these paper animations can be created.
Here's a demo video https://drive.google.com/file/d/0B7TH7VeIpgSQYkx2TVlSakZidXM/view.
final int origSize = getResources().getDimensionPixelSize(R.dimen.original_size);
final int origRadius = getResources().getDimensionPixelSize(R.dimen.original_radius);
final int targetRadius1 = getResources().getDimensionPixelSize(R.dimen.target_radius_1);
final int targetRadius2 = getResources().getDimensionPixelSize(R.dimen.target_radius_2);
final int targetSize1 = origSize * 2;
final int targetSize2 = origSize * 4;
final int ANIMATION_INTERVAL_MS = 600;
final int ANIMATION_DURATION_MS = 700;
private void doMaterialAnimation() {
ValueAnimator va1 = ObjectAnimator.ofFloat(1, 0);
va1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
transformMaterial(origSize, targetSize1, origRadius, targetRadius1, animation);
}
});
ValueAnimator va2 = ObjectAnimator.ofFloat(1, 0);
va2.setStartDelay(ANIMATION_INTERVAL_MS);
va2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
transformMaterial(targetSize1, targetSize2, targetRadius1, targetRadius2, animation);
}
});
ValueAnimator va3 = ObjectAnimator.ofFloat(1, 0);
va3.setStartDelay(ANIMATION_INTERVAL_MS);
va3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
transformMaterial(targetSize2, origSize, targetRadius2, origRadius, animation);
}
});
AnimatorSet aset = new AnimatorSet();
aset.playSequentially(va1, va2, va3);
aset.setDuration(ANIMATION_DURATION_MS);
aset.setInterpolator(new PathInterpolator(0.75f, 0.1f, 0.25f, 0.9f));
aset.start();
}
private void transformMaterial(int origSize,
int targetSize,
int origRadius,
int targetRadius,
ValueAnimator animation) {
float fraction = (float) animation.getAnimatedValue();
cardView.setRadius(interpolate(origRadius, targetRadius, fraction));
cardView.getLayoutParams().width = cardView.getLayoutParams().height
= (int) ((targetSize - origSize) * (1 - fraction) + origSize);
cardView.requestLayout();
}
private float interpolate(int from, int to, float fraction) {
return ((from - to) * fraction) + to;
}
This is the card, just for reference.
<android.support.v7.widget.CardView
android:id="#+id/card"
android:background="#color/background_material_light"
app:cardCornerRadius="#dimen/original_radius"
android:layout_centerInParent="true"
android:layout_width="#dimen/original_size"
android:layout_height="#dimen/original_size"
>

ZigZag Animation of image in android

I am working an android app in which i have 10 balloons
i want to animate those balloons in zig zag style.
i am usning valueanimator
my code is
Display display = getWindowManager().getDefaultDisplay();
display.getRectSize(mDisplaySize);
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);
mScale = metrics.density;
mRootLayout = (RelativeLayout) findViewById(R.id.main_layout);
new Timer().schedule(new ExeTimerTask(), 0, 2000);
}
public void startAnimation(final ImageView aniView) {
aniView.setPivotX(aniView.getWidth()/2);
aniView.setPivotY(aniView.getHeight()/2);
aniView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
Toast.makeText(getBaseContext(), "Clicked", Toast.LENGTH_SHORT).show();
}
});
long delay = new Random().nextInt(Constants.MAX_DELAY);
final ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
animator.setDuration(Constants.ANIM_DURATION);
animator.setInterpolator(new AccelerateInterpolator());
animator.setStartDelay(delay);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
// int angle = 40 + (int)(Math.random() * 101);
//int angle = 40 + (int)(Math.random() * 101);
int movex = new Random().nextInt(mDisplaySize.right);
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = ((Float) (animation.getAnimatedValue())).floatValue();
// aniView.setRotation(angle*value);
aniView.setTranslationX((movex-40)*value);
aniView.setTranslationY((mDisplaySize.bottom + (150*mScale))*value);
}
});
animator.start();
}
private Handler mHandler = new Handler() {
#Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
int viewId = new Random().nextInt(LEAVES.length);
Drawable d = getResources().getDrawable(LEAVES[viewId]);
LayoutInflater inflate = LayoutInflater.from(FallAnimationActivity.this);
ImageView imageView = (ImageView) inflate.inflate(R.layout.ani_image_view, null);
imageView.setImageDrawable(d);
mRootLayout.addView(imageView);
mAllImageViews.add(imageView);
LayoutParams animationLayout = (LayoutParams) imageView.getLayoutParams();
animationLayout.setMargins(0, (int)(-150*mScale), 0, 0);
animationLayout.width = (int) (60*mScale);
animationLayout.height = (int) (60*mScale);
startAnimation(imageView);
}
};
private class ExeTimerTask extends TimerTask {
#Override
public void run() {
// we don't really use the message 'what' but we have to specify something.
mHandler.sendEmptyMessage(Constants.EMPTY_MESSAGE_WHAT);
}
}
but it's motion is not zigzag how to make animation zigzag any idea thanks in advance

try this:
class ZigZagAnimation extends Animation {
private PathMeasure pm;
float[] pos = new float[2];
public ZigZagAnimation() {
Path p = new Path();
p.moveTo(0f, 0f);
p.lineTo(12f, 5f);
p.lineTo(8f, 14f);
p.lineTo(25f, 17f);
p.lineTo(13f, 31f);
pm = new PathMeasure(p, false);
setDuration(4000);
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
float distance = pm.getLength() * interpolatedTime;
pm.getPosTan(distance, pos, null);
t.getMatrix().postTranslate(pos[0], pos[1]);
}
}

I did it with two different animations, one to slide on X/Y axis and one for moving in the remain axis:
shake.xml (On Y axis):
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="40"
android:fromYDelta="0%"
android:toYDelta="-8%"
android:repeatCount="5"
android:repeatMode="reverse"
/>
</set>
in activity ( + X axis movement):
float ctr = 0f;
imageView.startAnimation(AnimationUtils.loadAnimation(this, R.anim.shake));
while (ctr <= X_YOU_WANT_TO_REACH) {
imageView.animate().x(ctr).setDuration(500).start();
ctr++;
}

Animate view added on WindowManager

I have a view (customView) added to the WindowManager.
WindowManager mWm = (WindowManager)activity.getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
WindowManager.LayoutParams(WindowManager.LayoutParams.FILL_PARENT, 0, PixelFormat.TRANSPARENT);
mWl.dimAmount = 0.0f;
mWm.addView(customView, mWl);
Inside the custom view, I will call a translate animation when close button is pressed.
//// This is the handler for the animation ////
final Handler translateHandler = new Handler();
final Runnable mtranslateUp = new Runnable() {
public void run() {
Log.v("TEST","mtranslateUp Runnable");
startAnimation(translateUp);
}
};
//// This is the listener for the close button////
View.OnClickListener closeButtonListener = new View.OnClickListener() {
public void onClick(View v) {
translateHandler.post(mtranslateUp);
}
};
//// This is the translate up animation ////
translateUp = new TranslateAnimation(0,0,0,-200);
translateUp.setFillAfter(true);
translateUp.setDuration(1000);
translateUp.setAnimationListener(new AnimationListener(){
#Override
public void onAnimationEnd(Animation animation) {
Log.v("TEST","translateUp onAnimationEnd");
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationStart(Animation animation) {
Log.v("TEST","translateUp onAnimationStart");
}}
);
If the customView is added to an activity, these code works fine!
When the customView is added to a WindowManager, the Log inside the onAnimationStart didn't show but the Log inside the Runnable can be shown.
Can anybody tells how to do animation on a view that is added to the WindowManager?

You should animate the view LayoutParameters. For example I use a method to update the view layout:
public void updateViewLayout(View view, Integer x, Integer y, Integer w, Integer h){
if (view!=null) {
WindowManager.LayoutParams lp = (WindowManager.LayoutParams) view.getLayoutParams();
if(x != null)lp.x=x;
if(y != null)lp.y=y;
if(w != null && w>0)lp.width=w;
if(h != null && h>0)lp.height=h;
mWindowService.updateViewLayout(view, lp);
}
}
Obviously mWindowService is context.getSystemService(Context.WINDOW_SERVICE).
I trigger this method in the animation:
public static void overlayAnimation(final View view2animate, int viewX, int endX) {
ValueAnimator translateLeft = ValueAnimator.ofInt(viewX, endX);
translateLeft.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
updateViewLayout(view2animate, val, null, null, null);
}
});
translateLeft.setDuration(ANIMATION_DURATION);
translateLeft.start();
}

I was facing similar problem with a View attached to WindowManager.Try adding ViewGroup to WindoManager than View directly. It should work.

windowManager need a animation by android system. so the custom animation will not work

I had a problem.
When i use updateViewLayout in onAnimationUpdate, and i set the LayoutParams's width, the animation has dropped frames.
But i set the LayoutParams's x or y, the animation is ok.
like the below code:
mViewWidth = 800;
mViewHeight = 800;
final int oldX = mFloatWindowParams.x;
final int oldWidth = mFloatWindowParams.width;
final int oldHeight = mFloatWindowParams.height;
final int deltaWidth = mViewWidth - oldWidth;
final int deltaHeight = mViewHeight - oldHeight;
final boolean isWidthLarger = deltaWidth > deltaHeight;
int first = isWidthLarger ? oldWidth : oldHeight;
int end = isWidthLarger ? mViewWidth : mViewHeight;
ValueAnimator va = ValueAnimator.ofInt(first, end);
va.setDuration(1000);
va.setInterpolator(new LinearInterpolator());
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
int value = (Integer) animation.getAnimatedValue();
float fraction = animation.getAnimatedFraction();
Log.i("onAnimationUpdate", value + "");
if (isWidthLarger) {
mFloatWindowParams.width = value;
mFloatWindowParams.height = oldHeight + (int) (deltaHeight * fraction);
} else {
mFloatWindowParams.width = oldWidth + (int) (deltaWidth * fraction);
mFloatWindowParams.height = value;
}
mFloatWindowParams.x = oldX - (int) (deltaWidth * fraction);
mWindowManager.updateViewLayout(mRootView, mFloatWindowParams);
}
});
va.start();