In a RelativeLayout I have a TextView and a Button under the TextView and an ImageView covering both of the other objects. As the user opens the activity, the ImageView should cover the other items.
As the user swipes on the image (left or right), it should dismiss so the user can operate the button and read the textfield.
Whith an onClick listener I could dismiss the Image when clicked but I would like an animation, exactly like in a RecicleView when swiping to delete an element.
You could add the desired animation to the onClick event.
1) create(or add if existing) the anim folder inside the res directory and put slide_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="800" />
</set>
2) Add this code to the onclick action of the image view :
// Refer the ImageView like this
imageView = (ImageView) findViewById(R.id.imageView);
// Load the animation like this
animSlide = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.slide_animation);
// Start the animation like this
imageView.startAnimation(animSlide);
You can modify the animation specs in the xml so you can get the desired effect.
And then just implement AnimatorListener so you can dismiss the image view at animation end.
animSlide.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//remove image view from the layout
}
});
Related
I have an imageView that I want to start as invisible. After a certain button is clicked, I want to animate the Image into view and then I want it to remain at alpha 1. How do I do that? So far no luck. If I set the alpha to 0 in xml, then I never see the image. If I don't set alpha in xml then the image is always visible, and when the button is clicked it animates from 0 to 1 alpha.
Here is my animation code.
AlphaAnimation animation1 = new AlphaAnimation(0.0f, 1.0f);
animation1.setDuration(1000);
animation1.setStartOffset(5000);
animation1.setFillAfter(true);
tokenBtn.startAnimation(animation1);
In MainActivity.java add
public void blink(View view) {
ImageView image = (ImageView) findViewById(R.id.imageView);
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.blink);
image.startAnimation(animation1);
}
Create file named blink.xml in res>anim folder and add this code
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="--YOUR DURATION--"
android:repeatMode="reverse"
android:repeatCount="0"/>
</set>
And make sure that onClick function on button is named blink
Try to make your ImageView invisible in xml:
<ImageView
...
android:visibility="invisible"/>
Then, by adding an AnimationListener, make it visible in onAnimationStart:
...
animation1.setFillAfter(true);
animation1.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// pass it visible before starting the animation
tokenBtn.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation) { }
});
// finally, start the animation
tokenBtn.startAnimation(animation1);
You can simply set initial alpha to 0 then animate it through 1 with desired duration;
imageView.setAlpha(0);
imageView.animate()
.alpha(1)
.setDuration(200);
I am working on a App that is simple in work and it is working quite efficiently. But I have one place where I am looking something is not looking great and that is flipping Animation.
What I Want :
I have a Button and a ImageView beneath the button. On a Button click I want to make a Animation that it looks like ImageView has flipped and next image is shown in the ImageView. So on every click it should show next image with a flipping animation but there are some problems. I would discuss later but first let me show you how I am doing this.
What I have done so far :
flipping.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:valueFrom="0" android:valueTo="180" android:propertyName="rotationY" >
</objectAnimator>
in Activity
#Override
public void onClick(View v) {
flipAnimation();
ivAnimPicture.setImageResource(myImage1);
}
private void flipAnimation(){
ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.flipping);
anim.setTarget(ivAnimPicture);
anim.setDuration(1500);
anim.start();
}
Problem
When It rotates to 180 from 0 , when it comes exactly at 90 degree we can see image view edges so it makes the animation look not so good. and Also the image changes first then the Flipping animation starts where as I want that Flipping animation should start and in the middle of it the new image should appear. so when the animation stops there should be surprisingly new image for the user.
So I really do not want Image to set in the image-view and then the Animation starts and Animate the image view
Please suggest me more good way or if there is library which is not obsolete.
Chathuranga's solution will do the job. but you better:
1.Use ViewPropertyAnimator. Specially, when you need to perform different animations on several ImageViews.
2.rotate from 270f to 360f for second flip, otherwise your image will be mirrored.
3.Load your second Image into a Drawable before starting the animation, to have a smooth rotation.
final Drawable drawable=getResources().getDrawable(R.drawable.a);
final ImageView iv = ((ImageView)findViewById(R.id.imageView1));
iv.setRotationY(0f);
iv.animate().rotationY(90f).setListener(new AnimatorListenerAdapter()
{
#Override
public void onAnimationEnd(Animator animation)
{
iv.setImageDrawable(drawable);
iv.setRotationY(270f);
iv.animate().rotationY(360f).setListener(null);
}
});
I was in your situation trying to figure out how to get this animation done. Here's how I achieve this.
you need to define two animations. one to rotate from 0 degree to 90 degree and other for to rote from 90 degree to 180 degree
flipstage1.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="rotationY"
android:valueFrom="0"
android:valueTo="90">
</objectAnimator>
flipstage2.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="rotationY"
android:valueFrom="90"
android:valueTo="180">
</objectAnimator>
Place these two files under res/animator
In your code start first animation first, add a listener to it. On animation end change the image and start second animation.
ObjectAnimator animStage1 = (ObjectAnimator) AnimatorInflater.loadAnimator(getActivity(), R.animator.flipstage1);
final ObjectAnimator animStage2 = (ObjectAnimator) AnimatorInflater.loadAnimator(getActivity(), R.animator.flipstage2);
animStage1.setTarget(imageIcon1);
animStage2.setTarget(imageIcon1);
animStage1.setDuration(500);
animStage2.setDuration(500);
animStage1.start();
animStage1.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
animStage2.start();
imageIcon1.setImageDrawable(ResourcesCompat.getDrawable(view.getResources(),R.drawable.okicon,null));
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
imageIcon1 is the reference to image view in xml layout.
Try this simple piece of code and let me know
ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.flipping);
anim.setTarget(ivAnimPicture);
anim.setDuration(1500);
anim.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
ivAnimPicture.setImageResource(myImage1);
}
});
anim.start();
recently I wrote a function.it's about a refresh button in each list item. what I want is click the button or List Item, the refresh button starts rotate. stops when the request finished.
I use animation as follows:
<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fromDegrees="0"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:toDegrees="358" />
and some source code are here:
public void refresh(View v) {
Animation rotation = AnimationUtils.loadAnimation(mContext,
R.anim.rotate);
rotation.setFillAfter(true);
v.startAnimation(rotation);
}
public void completeRefresh(View v) {
v.clearAnimation();
}
when the request finished, I call notifyDataSetChanged() to refresh the LiseView.
the problem is that the button was indeed rotating. but when I click it the second time. it's rotating but a little fuzzy. just like this:
any suggestions? thanks a lot.
What is most likely happening on your second (and subsequent clicks) is that the animation is running on it again.
In your current implementation, try using setTag(...) like this:
public void refresh(View v) {
if(v.getTag() != null && (boolean)v.getTag()) {
//do nothing, since we are setting the tag to be true once pressed
} else {
//this view hasn't been clicked yet, show animation and set tag
v.setTag(true);
Animation rotation = AnimationUtils.loadAnimation(mContext, R.anim.rotate);
rotation.setFillAfter(true);
v.startAnimation(rotation);
}
}
In your Adapter, you should keep track of which list items are being animated (I'm assuming multiple items can be clicked at the same time). Once you know that the 'request' is finished, you can update the adapter with the correct items and then call notifyDataSetChanged()
I wanna translate 2 images image When I click on Button, At that time from left image move left to right and right image move right to left(both image come in center at that time stop animation) on emulator using android animation.I'm new to android animation.How could i do that.?
coding is much appreciated.Thanks..
i can't explain everything here but i help you to do that. first you must create two new XML file (Animation in old versions or Tween Animation in new versions) for each image , then use translate. for example:
<translate android:fromXDelta="10"
android:toXDelta="100"
android:duration="2000"
/>
for left image, and for right one use your numbers.
then in java file, set your Button and images. then define animation and use them. i think this example is comprehensible:
final ImageView iv1 = (ImageView) findViewById(R.id.imageView1);
final ImageView iv2 = (ImageView) findViewById(R.id.imageView2);
final Button b = (Button) findViewById(R.id.button1);
b.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Animation anim = AnimationUtils.loadAnimation(main.this, R.anim.animation);
iv1.startAnimation(anim);
iv2.startAnimation(anim);
}
});
in this example, i use one animation for both of them.
and remember in this site, you can get help from other, not absolute code.
add two xml files to res/anim folder of your project like below:
lefttoright.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<translate android:fromXDelta="-600%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%" android:duration="300"
android:zAdjustment="bottom">
</translate>
righttoleft.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<translate android:fromXDelta="0%" android:toXDelta="400%"
android:fromYDelta="0%" android:toYDelta="0%" android:duration="300"
android:zAdjustment="bottom">
</translate>
In your layout file keep one ImageView at the left of the screen and other one at the right of the screen
Use the following code snippet in your button's onClick event:
lefttoright = AnimationUtils.loadAnimation(context,
R.anim.lefttoright);
righttoleft = AnimationUtils.loadAnimation(context,
R.anim.righttoleft);
imageView1.startAnimation(lefttoright);
imageView2.startAnimation(righttoleft);
then implement your animation listener:
lefttoright.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
//update imageView's position (e.g. center)
}
});
Do same thing for righttoleft.
Hope it helps.
I have a ListView on screen and a menu at the bottom. Upon a click of menu key, it animates-slides off the screen and the ListView expands.
menuBtmVisable = false;
Animation menu_off = AnimationUtils.loadAnimation(this, R.anim.menu_off);
menubtm.startAnimation(menu_off);
Display display = getWindowManager().getDefaultDisplay();
LayoutParams listlp = new LayoutParams(display.getWidth(), display.getHeight()-87 , 0, 50);
ListViewMain.setLayoutParams(listlp);
menu_off.xml
<set
android:fillEnabled="true"
android:fillAfter="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="0"
android:toYDelta="120"
android:duration="500"
/>
</set>
Yet when, with the menu down, I click on the ListView item "13" ( see picture ), it results in a menu click, as if it is still in place...
What do you think would be the best way to take care of it?
I've looking for an answer for a problem like that, and finally, after a week, I've managed to solve my problem. Since it looks similar to yours, maybe it will help you.
Set up and AnimationListener() in your animation and, onAnimationEnd, change the layout as you want. In my case, I wanted to slide a layout up, so 2 buttons would appear from below. However, the layout just slided visually; the buttons would still be off screen, interactionally speaking. So I have something like this:
final View screen = findViewById(R.id.welcome_screen);
final Animation a = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_home_up);
a.setFillAfter(true);
a.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
screen.clearAnimation();
screen.setPadding(0, -222, 0, 0);
}
});
screen.startAnimation(a);