I have a button and I want to make an animation of going down. I made it but the functionality is left at the previous position(like the button moves but if I click on it, it doesn't work, but if I click its previous position it will work)
Animation logbtn = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.logbtnanim);
button.startAnimation(logbtn);
And the animation code is this.
P.S. Parent is the constraint layout.
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<translate
android:fromYDelta="0"
android:toYDelta="100"
android:duration="1000"/>
</set>
First of all you don't need the AnimatorSet Tag if you only have one animation. This is used if you want to play multiple animations together.
Second you are using TranslateAnimation which does not animate the Buttons property, it only moves the pixels on the screen, so after the animation, Android still thinks the view is at the old position, that is why it is still clickable there.
I suggest doing it in Java code using ViewPropertyAnimator something like :
button.animate().translationY(...f).duration(1000);
Or ObjectAnimator which is a little more flexible since you can also do it in xml.
Related
I have an ImageView. When I change its image resource, I want to fade to the new resource. (I don't want the old resource to fade out and the new one to fade in; I want the new one to already be in the background and the old image to fade out, revealing the new image.) Is there a way to do this with only one View? I don't want to use two stacked Views because I need to do this with enough images that it would be bad for performance. Right now, I just have the basics:
fadeout animation
<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator"
android:fromAlpha="1.0" android:toAlpha="0.0" />
using fadeout animation on the View
Animation fadeout = AnimationUtils.loadAnimation(this, R.anim.fadeout);
fadeout.setDuration(0);
boardView[location].startAnimation(fadeout);
Now, I need to somehow make the new image appear in the background as the View is fading out. Is this possible without adding a second View in the background?
ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(view, View.ALPHA, 1,0);
This would be the one of the way to do fade in/out animation. You just needs to the pass the view to which perform the animation, objectAnimator supports from honeycomb version
I'm trying to create a "fill-up" animation on a shape in Android. It should start being completely invisible and then gradually "fill up" from the bottom like this:
What I am specifically trying to animate is a circle such as this one:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#666666"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>
I have checked out the AlphaAnimation, RotateAnimation, ScaleAnimation and TranslateAnimation (sublasses of Animation) but I can't find a way to use them for this.
Here is how I eventually solved it:
I included this library from github https://github.com/lzyzsd/CircleProgress which contains a circular progress bar (CircleProgress). I added a countdowntimer to gradually increase the "progress" it is displaying
Here is the code:
final CircleProgress circularProgress =(CircleProgress)findViewById(R.id.circleProgress);
//Hides the text and the part of the circle which should not be shown
circularProgress.setUnfinishedColor(Color.parseColor("#00000000"));
circularProgress.setTextColor(Color.parseColor("#00000000"));
//Makes the circle red
circularProgress.setFinishedColor("#FF0000");
final int timeToCountDownMilis = 10000;
circularProgress.setMax(timeToCountDownMilis);
//Initiates and starts the countdowntimer which gradually increases the "progress" in the progress bar
new CountDownTimer(timeToCountDownMilis,70){
onTick(long milisUntilFinished){
circularProgress.setProgress(timeToCountDownMilis-(int)milisUntilFinished);
}
onFinish(){
}
}.start();
Thanks to Stan for pointing me to circular progress bars!
You could dig deep in Animations, like drawPath etc. What I should do in this case is simplier a bit:
-place a full red circle on a screen
-put a View with white bg over it (like a square), covering all the circle
-animate that white square View moving up revealing your circle
You could use a simple transition animation to do it.
That way it gonna looks like a filling animation you want.
Well, my answer was given following images you provide and it covers the target good enough. But if you wish something like a progress bar looking so, you should visit https://github.com/snowdream/awesome-android and check circular progress bar libs there, at least you'll maybe lern how to achieve your goal Or find out its already done.
Good day, I would like to ask for some advice on coding up one pretty strange graphical element.
The point is - there should be a button in the middle (green), but it should be surrounded with an animated element (blue strip around green button on a sketch).
So when user clicks the button, the blue element starts rotating, when he taps again, it stops.
any ideas on that? thanks!
Easiest way is a custom view, where you overwrite onDraw to draw exactly what you want to the canvas. Rotation can be done by keeping track of how many radians of rotation you want and using a rotation matrix on the canvas. Animation can be done by using a Handler to post a delayed message to invalidate the view.
you could make use of the Animation features of android.
make the green button as ImageButton and the blue ring as static drawable.
then create an RotateAnimation which you toggle with the button press. this animation then rotates the drawable that contains the blue ring.
here is something about the rotate animation
http://developer.android.com/reference/android/view/animation/RotateAnimation.html
Problem & Question:
I currently have a view pager, with just 2 pages/views inside it, which are next to each other horizontally.
My views are custom ones which draw a two-color gradient and an image over the top of it at a low opacity/alpha value.
I'm finding that when I swipe across the screen to move from the first view/page to the second or vice-versa, the images are getting squashed. How can I stop this from happening, and draw them normally?
Example:
The left image shows the first view that is visible, pre-swipe; the right image shows the two views, midway through swipe.
Code:
I have a Drawable variable I set earlier, overlayImage, that I have not done anything to other than setting opacity.
#Override
protected void onDraw(Canvas canvas) {
p.setShader(new LinearGradient(0, 0, 0, getHeight(), startColor, endColor, Shader.TileMode.MIRROR));
canvas.drawPaint(p);
//Pretty sure the mistake is around these two next lines
overlayImage.setBounds(canvas.getClipBounds());
overlayImage.draw(canvas);
}
I actually think it is in your
overlayImage.setBounds(canvas.getClipBounds());
line of code. When you are getting the clip bounds of the left most (swiping in the right most) view, it is getting the size of the viewable area (i.e. the smaller shrinking area) and thus the image is being drawn into that shrinking space.
You probably want to be setting the bounds by the overall size of the view it is being overlayn on, not the clipped bounds. Use instead getHeight() and getWidth() of the canvas and build up your own bounds.
I actually think that you really should setup the overlayImage bounds ONLY ONCE in your setup code. The draw code shouldnt necessarily need to set that up at all, then when the view begins to go off screen the drawing of the overlayImage will naturally move with the rest of the drawing canvas.
I think that you need to make a xml in the drawable-hdpi folder.
Which will contain your shader/linear gradiant.. (for options look here)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#474946"
android:endColor="#181818"
android:angle="270"/>
</shape>
And then you can set the xml as background.. which should fix the problem i think.
(If it doesn't work try without the android:shape="rectangle", that might help)
i have a grid view and i want to apply flip rotation animation on every child of grid view.
when user touch on a grid view element it perform flip rotation animation and change image.
and i use table layout to create grid of images.
i want to perform like thisPlz check once
this performs on one(layout).
but i want to perform on a 48 elements.
any help from someone....
plz give suggestion soon..
thanks in advance....
One of the most convincing 3D flip animation I've seen is done here https://code.google.com/p/android-3d-flip-view-transition.
A lot of the other tutorials and sample codes don't produce believable 3D flips. A simple rotation on the y-axis isn't what's done in iOS.
There is also a video here: http://youtu.be/52mXHqX9f3Y
So, to flip each grid element, simple call:
ViewFlipper viewFlipper = getViewFlipperForItem(i);
AnimationFactory.flipTransition(viewFlipper, FlipDirection.LEFT_RIGHT);
Where getViewFlipperForItem is a method you implement to get the ViewFlipper on that cell. I suggest you add each cell as a ViewFlipper (or ViewAnimator) and add the images you intend to flip within the ViewFlipper (or ViewAnimator). If this isn't clear to you, let me know.
Use the below code for adding flip animation to a view in android.
final ObjectAnimator animation = ObjectAnimator.ofFloat(view, "rotationY", 0.0f, 360f);
animation.setDuration(3000);
animation.setRepeatCount(ObjectAnimator.INFINITE);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.start();
view.startAnimation(animation);
Thanks Ephraim,
I used view flipper in my project and used that library that you have mentioned. It looks great and it help me out. Please any one who want to animate his view like rotate should use this library.
https://code.google.com/p/android-3d-flip-view-transition.