I am creating an animation in android for two buttons.Button1 moves from bottom center to center of the screen vertically upwards direction(say in 2 seconds).Once it reaches there,the image should be there for say 2 seconds.Then the second image moves from center_right side of the screen to the center_left side of the screen while the first button is still present.Can some body please tell me how to make the first image be there for some time on the screen.Following is my code :
R.anim.alpha
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="200%p"
android:toYDelta="-11%p"
android:duration="3000"
android:repeatCount="infinite"
/>
</set>
R.anim.anim_card
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="600%"
android:toXDelta="-100%"
android:repeatCount="infinite"
android:duration="4000"
android:fillAfter="true"
/>
</set>
And in Java code:
Animation a = AnimationUtils.loadAnimation(this, R.anim.alpha);
a.reset();
_image.clearAnimation();
_image.startAnimation(a);
Animation b =AnimationUtils.loadAnimation(this, R.anim.anim_card);
b.reset();
btn_card.clearAnimation();
btn_card.startAnimation(b);
You will have to use AnimationListener for that:
Animation a = AnimationUtils.loadAnimation(this, R.anim.alpha);
a.reset();
_image.clearAnimation();
_image.startAnimation(a);
Animation b =AnimationUtils.loadAnimation(this, R.anim.anim_card);
b.reset();
a.setAnimationListener(new 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
btn_card.clearAnimation();
btn_card.startAnimation(b);
}
});
Hope it helps.
Related
How can I move an object out of the screen?
This is how I move the TextView from under the screen into the screen.
slide_up_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="100%" android:toYDelta="0%" android:duration="500" android:fillAfter="true"/>
</set>
This is how I move it out of the screen:
slide_down_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%" android:toYDelta="100%" android:duration="500" android:fillAfter="true"/>
</set>
But the TextView appears again. Why?
That is because it renders it again after the animation and will actually place the TextView to its default position from the screen/layout.
solution:
You need to add a listener and set the visibility of your TextView to gone or invisible at the end of the listener.
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation) {
You_text_view.setVisibility(View.INVISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) { }
});
I want to apply animation on layout
when i click on arrow the slide meny look like
then clink on arrow reanimation the menuenter code here
You can define an animation like this one that animates left to right and apply that to your layout:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="-100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="700"/>
</set>
To apply animation to a layout resource:
Animation slideInLeft;
...
slideInLeft = AnimationUtils.loadAnimation(this, R.anim.slide_in_left);
mYourLayout.startAnimation(slideInLeft);
Edit:
When the animation is finished the layout will go back to the starting position. to avoid that you can use one of these 3 approaches:
1- Define an animation listener like this and hide your layout
anim.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationStart(Animation arg0) {
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationEnd(Animation arg0) {
}
});
2- Use a postDelayed Handler with the same duration has your animation duration and hide the layout at the end.
3- add this line to your animation:
anim.setFillAfter(true);
Hope it helps.
I have an activity (A) that launches another activity (B) after a calculation. My problem is that when Activity B is launched, an arrow drawable that is supposed to move from left to right while incrementing in size (scaled from .33 to 1) is first displayed for a very short fraction of time before it starts the tween animation. The end result is a bothering flicker of the full size drawable right before it starts animating.
Everything seems to point that the problem is related to the animation file (.xml) and not to the java class. This can be observed when I delete the line arrowImage.startAnimation(arrowExtent); in the following code:
protected void arrowAnimation(Animation arrowExtent) {
// TODO Auto-generated method stub
arrowImage.setImageResource(R.drawable.arrowimage);
arrowImage.startAnimation(arrowExtent);
arrowExtent.setFillAfter(true);
I have tried the following:
Using setImageDrawable instead of setImageResource to the Drawable object.
Setting arrowImage.setFillBefore(false);
Any recommendations will be greatly appreciated.
The animation xml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<set android:interpolator="#android:anim/accelerate_decelerate_interpolator">
<scale
android:fromXScale="0.33"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="0"
android:duration="1000"
android:fillBefore="false" />
<translate
android:fromXDelta="0%"
android:toXDelta="75%p"
android:duration="1000" />
</set>
When activity start you should make ImageView invisible in xml or in onCreate() and when animation starts, you should change it to visible.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// referencing views etc.
arrowImage.setVisibility(View.INVISIBLE);
// or make image invisible in xml
}
protected void arrowAnimation(Animation arrowExtent) {
arrowExtent.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
arrowImage.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation) { }
});
arrowImage.setImageResource(R.drawable.arrowimage);
arrowImage.startAnimation(arrowExtent);
}
is it possible to have structure like the one below.
And have LinearLayout that is at front to be off screen:
<FrameLayout>
<LinearLayout>
.. Back Layout
</LinearLayout>
<LinearLayout>
.. Front layout
</LinearLayout>
</FrameLayout>
Here is the image.
What I have tried:
I have tried setting android:layout_marginLeft="-300dp" for LinearLayout A (front), but as soon as I test it on my phone the A layout is back inside of visible area.
I have also tried pushing the A layout off the screen with TranslateAnimation, after animation ends A layout is back inside of visible area.
Please help me solve the problem. Thank you.
So in case anyone needs something like this here how I solved it.
Sliding menu on top of content.
Layout structure as described in the question. Here is a simple animation in xml:
show_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="-100%"
android:toXDelta="0%"
android:duration="400">
</translate>
</set>
hide_menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%"
android:toXDelta="-100%"
android:duration="400">
</translate>
</set>
in MyActivity
//loading hide animation and setting listener.
anim = AnimationUtils.loadAnimation(this, R.anim.hide_menu);
anim.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
}
//on animation end setting visibility to gone
#Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
MenuList.setVisibility(View.GONE);
}
});
Same thing is done for animation for show_menu animtaion except it would have onAnimationStart setting visibilty to visible.
MenuList in the code is A layout from the figure in the question.
Update:
*The best way to do a sliding menu today is to use the DrawerLayout.*
I implement the translateAnimation to a imageview.
it Successfully animatated.
One translate is moving up and another one is moving down. i need to change image when start second translate.
My code is:
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:shareInterpolator="true">
<translate
android:fromXDelta="0%" android:toXDelta="0%p"
android:fromYDelta="0%" android:toYDelta="20%"
android:drawable="#drawable/bs_bunny1"
android:duration="2000" android:startOffset="100"/>
<translate
android:fromXDelta="0%" android:toXDelta="0%p"
android:fromYDelta="0%p" android:toYDelta="-20%p"
android:duration="3000" android:startOffset="100"/></set>
I set the above animation to the imageview.
But i want to chage the image when start to load the second translate.. How to do it.
You need to break it up into two animations, and register a Animation.AnimationListener to the first translate animation. On Animation.AnimationListener's onAnimationEnd(Animation animation) callback, do the image change and then start the second animation, like thus:
translate.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
view.setImageResource(resId);
view.startAnimation(translate2);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});