I have Linear Layouts that i want to replace each other on click.
At start: Linear Layout A is visible, Linear Layout B is gone
I want when A is clicked to be gone and B to be visible and vice versa.
without the animation it all worked just fine, but when i set animation after clicking B B is gone, but A is not visible although if i click in its place the Log gives me that it's visible
here's the code, any help would be appreciated
private void switchRowItems(final LinearLayout toBeHiddenRow,final LinearLayout toBeShownRow){
toBeHiddenRow.animate()
.rotation(toBeHiddenRow.getHeight()/2)
.alpha(0.0f)
.setDuration(300)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
toBeHiddenRow.clearAnimation();
toBeHiddenRow.setVisibility(View.GONE);
toBeShownRow.clearAnimation();
toBeShownRow.setVisibility(View.VISIBLE);
}
});
//toBeShownRow.clearAnimation();
// toBeShownRow.setVisibility(View.VISIBLE);
}
and the on click checker is as simple as:
if (llRowTwoItemOne.getVisibility() == View.VISIBLE) {
Log.d("llRowTwoItemOne","visible");
} else {
Log.d("llRowTwoItemOne","not visible");
}
I do it in this way:
Create xml file in res/anim resource directory. Let's call it myanimation.xml and write there:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:duration="300">
</rotate>
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="200">
</alpha>
</set>
You can see that it is a set of animations you need: rotation and alpha.
Then I write in the switchRowItem function this:
private void switchRowItems(final LinearLayout toBeHiddenRow, final LinearLayout toBeShownRow){
Animation anim = AnimationUtils.loadAnimation(this, R.anim.myanimation);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
toBeHiddenRow.setVisibility(View.GONE);
toBeShownRow.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
toBeHiddenRow.startAnimation(anim);
}
That's all. It works pretty well. Hope this is what you asked for.
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 simply translating a cardview that contains an image and textview, horizontally from outside the screen, to inside.
here is my animation xml which is referenced using android:layoutAnimation of the cardview xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-300"
android:toXDelta="0"
android:fromYDelta="0"
android:toYDelta="0"
android:duration="1000"/>
</set>
I want the card to maintain its look and animate as a whole from one point to another, but instead I get a weird delay between the card and its contained views making for an ugly animation, the below image is my best attempt to describe it visually:
Any help would be greatly appreciated!
I have done like this
ObjectAnimator settleAnimator;
if(settleAnimator==null){
settleAnimator = ObjectAnimator.ofFloat(yourView, "translationX", 0);
settleAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
inAnimation = true;//just a boolean
}
#Override
public void onAnimationEnd(Animator animation) {
inAnimation = false;
}
#Override
public void onAnimationCancel(Animator animation) {
inAnimation = false;
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
}
settleAnimator.setDuration(200);//millisec
//this will take start value and end value in pixels ie. (from, to)
settleAnimator.setFloatValues(+300, 0);
settleAnimator.start();
}
The problem was that while I was testing different ways of doing this I left both the programmatic code and the xml code in, thus causing strange doubled up animations.
I want to implement sliding panel that slide on touch from top to bottom in Android like this design
You can also implement same via Translate Animation.
First you need to write xml file under res/anim folder.
slide_down_service.xml
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="#android:integer/config_longAnimTime"
android:fromXDelta="0%p"
android:toXDelta="0%p"
android:fromYDelta="0%"
android:toYDelta="120%">
</translate>
you can change YDelta value as per requirement.
Then you need to intialize Animations in following way in your activity.
Animation animContentDown = AnimationUtils.loadAnimation(
getApplicationContext(), R.anim.slide_down_service);
animContentDown.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
});
And then start your animation : yourview.startAnimation(animContentDown);
That's a sliding drawer. Implementation is easy, you just need the two views for the handle and the content. Be careful though, it has been deprecated.
Ok.. I got this animation set up for a small imageview for translating from "0%" to "50%" in XML...
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<translate
android:duration="400"
android:fromXDelta="0%"
android:toXDelta="+50%" />
</set>
After this, I need to add another sequential animation which would change the Y co-ordinate from "0%" to "50%".. I tried adding another <set> but it did not work... What should I do to get sequential animation?
You can use android:startOffset to delay animations. Delay in milliseconds before the animation runs, once start time is reached. Must be an integer value, such as "100". -- "developer.android.com"
Another way is you can use AnimationListener to "listen" animations and do whatever you want.
This link is useful for you: How to run several translate animations sequentially?
I'm not completly sure what you really want to do, but if you want to "translate" both the "x" and "y" at the same time simply add android:fromYDelta="0%" and android:toYDelta="+50%" to your existing <translate>.
If you want to "translate" the Y values after the X ones, you will need a new XML file, which you will need to call when the X ones finish.
A quick, untested example:
mAnimatedView = findViewById(R.id.viewToAnimate);
mAnimX = (TranslateAnimation) AnimationUtils.loadAnimation(mContext, R.anim.aX);
mAnimY = (TranslateAnimation) AnimationUtils.loadAnimation(mContext, R.anim.aY);
mAnimX.setAnimationListener(new AnimationListener(){
#Override
public void onAnimationEnd(Animation animation) {
if (mAnimatedView) {
mAnimatedView.startAnimation(mAnimY);
}
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationStart(Animation animation) {
}
});
mAnimY.setAnimationListener(new AnimationListener(){
#Override
public void onAnimationEnd(Animation animation) {
if (mAnimatedView) {
mAnimatedView.startAnimation(mAnimX);
}
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationStart(Animation animation) {
}
});
mAnimatedView.startAnimation(mAnimX);
Hope that helps and is clear enough.
I'm trying to set up 2 layouts - I want one layout to slide up, and when it's finished another layout should fade in.
I've managed to get it working, but at the end of the two animation and first layout blinks once.
How can I solve it?
Here's the code(first layout is named titleLay and the second one is called registerLayout)-
final TranslateAnimation slide = new TranslateAnimation(0, 0, 0,-100 );
slide.setDuration(500);
slide.setFillAfter(true);
slide.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
RelativeLayout registerLayout = (RelativeLayout) findViewById(R.id.registerLay);
Animation fadeInAnimation = AnimationUtils.loadAnimation(con, R.anim.fade_in_anim);
registerLayout.startAnimation(fadeInAnimation);
registerLayout.setVisibility(View.VISIBLE);
}
});
titleLay.startAnimation(slide);
And that's the XML code of the R.anim.fade_in_anim-
<?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="500"/>
</set>
Edit: If I use other types of animations(fade out, slide etc...) it works fine, without flicking.
Thanks!
If you are using animateLayoutChanges in your layout file in combination with the animation onAnimationEnd toggling the View visibility it will result in two animations running and the view flashing or blinking. Setting view visibility causes the layouts animateLayoutChanges to run and to fade the view in once and then the animation you created causes a second animation to run as well.
Instead of setting the view's visibility, try to use the setAlpha function.
registerLayout.setAlpha(0f); //invisible
registerLayout.setAlpha(1f); //visible
Remove the declerations and initilizations from your onAnimationEnd, the initilization may take a long time since the XML needs to be parsed from resources,
put thouse two lines in your onCreate:
RelativeLayout registerLayout = (RelativeLayout) findViewById(R.id.registerLay);
Animation fadeInAnimation = AnimationUtils.loadAnimation(con, R.anim.fade_in_anim);
and set visibility to slide:
final TranslateAnimation slide = new TranslateAnimation(0, 0, 0,-100 );
slide.setDuration(500);
slide.setFillAfter(true);
slide.setAnimationListener(new
AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
registerLayout.startAnimation(fadeInAnimation);
registerLayout.setVisibility(View.VISIBLE);
}
});
titleLay.startAnimation(slide);
titleLay.setVisibilty(View.VISIBLE);