Develop Reference

Problems with Views and animations

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.

Android Animation - translate viewgroup, children not translating from the same place

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.

Translate Animation speed of sliding in from bottom

Good day,
I'm trying to implement an Animation that slides in a WebView from below onto my screen.
Here's the code of my animation xml file:
slide_in_from_bottom.xml:
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<translate android:fromYDelta="100%" android:toYDelta="0%"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="700"/>
</set>
Here is where I ask my WebView to slide in:
Animation slideIn = AnimationUtils.loadAnimation(this, R.anim.slide_in_from_bottom);
slideIn.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
Log.d("animation", "started");
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
webView.setVisibility(View.VISIBLE);
Log.d("animation", "stopped");
}
});
webView.startAnimation(slideIn);
This works fine, but the problem is that my WebView does not always have the same size. This causes it to slide in really fast if it's a large WebView, and (relatively) slow if it's rather small.
I've tried using an ObjectAnimator as well:
ObjectAnimator moveInFromBottom = ObjectAnimator.ofFloat(webView,
"translationY", 900f, 0f);
moveInFromBottom.setDuration(700);
moveInFromBottom.start();
This works fine, but there is a bug that removes the cursor from an inputText in my WebView. (Really weird, can't find any info on it). Then I can still type in text in the inputText, but I can't remove it using backspace :S
So, my question is: How can I make sure my Animation always slides in at the same speed, whatever the height of my WebView is?

android sequential tween animation

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.

Trouble with clicking after layout animation

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);