I have a login screen with some EditText TextView and Button what I want to do is when the login screen is created I want to animate the first EditText from top to bottom then the second EditText from top to bottom after the first EditText is animated, so it should look like all the views are animating from top to bottom one by one.
This is kinda ugly but it'll work.
float pixels = 20f;
view1.animate().translationY(pixels).setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationEnd(Animator animation) {
view2.animate().translationY(pixels).setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationEnd(Animator animation) {
view3.animate().translationY(pixels);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
Step 1
Animation scaleDown = AnimationUtils.loadAnimation(youContext, R.anim.scale_down);
ImagView v = findViewById(R.id.your_view);
v.startAnimation(scaleDown);//Start Animation
Step 2 Set Animation listener
Step 3 On Animation end start animated next view like above
so on.....
Related
i started learning animation on android today, and i'm having trouble positioning views after animations end.
When app starts, It shows an search EditText in the center of the screen, and when you search for something, this EditText should slide to top using this code below
public void slideToTop(View view){
view.animate()
.translationY((-parent.getHeight()/2) + view.getHeight())
.setInterpolator(new AccelerateInterpolator())
.setDuration(500)
.setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animator) {
}
#Override
public void onAnimationEnd(Animator animator) {
layoutContent.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationCancel(Animator animator) {
}
#Override
public void onAnimationRepeat(Animator animator) {
}
});
fadeOutAndHideImage(logo);
}
How can I show the results below the EditText that now is on top of the layout?
I tried to use layout_below attribute from RelativeLayout, the set the visibility when the animation ends, but it seems that the position is calculated before the animation
You have to set position of your view programatically to (-parent.getHeight()/2) + view.getHeight() using Layout Params when the animation ends, this might help you to solve your problem.
I'm trying to animate a button to fade away, and then set its visibility to VIEW.GONE in order for it to not take up space on the page.
The code is as follows
myContinueButton.animate().setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
myContinueButton.setEnabled(false);
myContinueButton.setVisibility(View.GONE);
}
}).alpha(0f);
The issue is that the button will fade away, but then it will briefly appear in full when the visibility is set in side the onAnimationEnd.
Ive tried setting alpha before the listener, but the result is always the same:
Object fades away, then appears again on screen, then hides as it is set to View.Gone
Try to use this code
myContinueButton.animate().alpha(0f).setDuration(500).setInterpolator(new LinearInterpolator()).setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
myContinueButton.setAlpha(0f);
myContinueButton.setEnabled(false);
myContinueButton.setVisibility(View.GONE);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
}).start();
I am trying to achieve something like that
I have white circle image views in Stack currently I am doing like this to animate but it's not working properly please help me what am I doing wrong
this my code for animating but my imageViews falls down all together viewPasscodeis Linear layout to which I add imageViews pragmatically please I need little help
private void animPass() {
float bottomOfScreen = getResources().getDisplayMetrics()
.heightPixels - (viewPasscode.getHeight() * 4);
//bottomOfScreen is where you want to animate to
for (final ImageView imageView1 : passViewsStack) {
imageView1.animate()
.translationY(bottomOfScreen)
.setInterpolator(new AccelerateInterpolator())
.setInterpolator(new BounceInterpolator())
.setDuration(2000).setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
viewPasscode.removeView(imageView1);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
}
All is good. Just keep some difference of duration for respective views i.e. kepp a difference of 300-500 in .setDuration(2000). e.g.,
for view 1: .setDuration(2000)
for view 2: .setDuration(1500)
so on.
you will get expected results.
I want to implement zoom feature on an ImageButton by Property Animation. For example, when I click the button, it will zoom out. And when I click it again, it will zoom in.
Here is part of my code:
OnClickListener clickPlayButtonHandler = new OnClickListener() {
#Override
public void onClick(View v) {
final ImageButton clickedButton = (ImageButton) v;
if((Boolean) v.getTag()) {
// zoom out
clickedButton.animate().setInterpolator(new AnticipateInterpolator()).setDuration(500).scaleXBy(-0.4f).scaleYBy(-0.4f).setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
clickedButton.setImageResource(R.drawable.bg_pause);
System.out.println(clickedButton.getWidth()); // output the width of the button for checking
}
#Override
public void onAnimationEnd(Animator animation) {
clickedButton.setTag(false);
int d = clickedButton.getWidth();
System.out.println(clickedButton.getWidth());// output the width of the button for checking
}
#Override
public void onAnimationCancel(Animator animation) {}
#Override
public void onAnimationRepeat(Animator animation) { }
});
} else {
// process zoom in
}
}
};
I printed the width of the button before the animation start and the animation finished. However, I found they were the same. I thought when the zoom out animation finished the button width should be small than before. But it didn't.
Could not change view size by ViewPropertyAnimator?
There won't be changes in clickedButton.getWidth(), because the width of a view is not affected by scaling. You can think of getWidth() as a way to get unscaled width of a view. To change the width of a View requires a new measure/layout pass.
ViewPropertyAnimator doesn't change View's width/height or anything that could potentially trigger another layout pass. This is simply because layout passes are expensive and therefore could cause frame skipping, which is the last thing we want see during an Animation.
If you need to get scaled width of the button, you can do getScaleX() * clickedButton.getWidth()
Try the ObjectAnimator:
ObjectAnimator xAnimator =
ObjectAnimator.ofFloat(clickedButton, "scaleX", 1.0f, -0.4f);
ObjectAnimator yAnimator =
ObjectAnimator.ofFloat(clickedButton, "scaleY", 1.0f, -0.4f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(500);
animatorSet.playTogether(xAnimator, yAnimator);
animatorSet.setInterpolator(new AnticipateInterpolator());
animatorSet.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
clickedButton.setImageResource(R.drawable.bg_pause);
System.out.println(clickedButton.getWidth());
}
#Override
public void onAnimationEnd(Animator animation) {
clickedButton.setTag(false);
int d = clickedButton.getWidth();
System.out.println(clickedButton.getWidth());
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
animatorSet.start();
I am animating a view using translate animation. I've used setFillAfter(true) and it animates successfully.
My code is.
final ImageView image= (ImageView) findViewById(R.id.image2);
image.setBackgroundResource(R.drawable.lamb);
final Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
animation.setFillAfter(true);
image.startAnimation(animation);
animation.setAnimationListener(new AnimationListener()
{
public void onAnimationStart(Animation animation) { }
public void onAnimationRepeat(Animation animation) { }
public void onAnimationEnd(Animation animation)
{
Handler ss = new Handler();
ss.postDelayed(new Runnable()
{
public void run()
{
image.setVisibility(View.INVISIBLE);
}
} ,4000);
}
});
I use a Handler for hiding the image view after 4 seconds, but it does not hide. How can I hide the image after some time?
After the animation ends, I want to show the image on the last position that it was so I use setFillAfter(true); after 4 seconds I hide the image view.
How can I make the image invisible?
You will need to set AnimationListener. And when animation will end, make the view invisible.
moveForward.setAnimationListener(new AnimationListener(){
#Override
public void onAnimationEnd(Animation animation) {
view.setVisibility(View.INVISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationStart(Animation animation) {
}
});
image.clearAniamtion(), before setVisibility(View.INVISIBLE)