I have a button animation which is defined to scale from 1.0 to 1.1 and back. The text of the button ("Next") scales up and then down, but the button size does not change.
1. Is this expected behavior?
2. There is a jerk when it restarts the animation. I assume this is happening at the loadAnimation() call. Is there a way to make that seamless?
public void startAnimation() {
final View nextButtonView = fragmentActivity.findViewById(R.id.game2NextButton);
nextButtonView.setVisibility(View.VISIBLE);
Animation anim = AnimationUtils.loadAnimation(fragmentActivity, R.anim.scale_button);
anim.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationEnd(Animation arg0) {
Animation anim = AnimationUtils.loadAnimation(fragmentActivity, R.anim.scale_button);
anim.setAnimationListener(this);
nextButtonView.startAnimation(anim);
}
#Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
});
nextButtonView.startAnimation(anim);
}
scale_button.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
android:duration="1000"
android:fillBefore="false"
android:fillAfter="false"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.1"
android:toYScale="1.1" />
<set android:interpolator="#android:anim/decelerate_interpolator" >
<scale
android:duration="1000"
android:fillBefore="false"
android:fillAfter="false"
android:fromXScale="1.1"
android:fromYScale="1.1"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="1000"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
</set>
Next Button is in layout like so:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/game2NextButton"
style="#style/navigation_button"
android:contentDescription="#string/nextbutton"
android:text="#string/next" />
</LinearLayout>
Navigation button style:
<style name="navigation_button">
<item name="android:layout_width">320dp</item>
<item name="android:layout_height">80dp</item>
<item name="android:textColor">#drawable/text_color</item>
<item name="android:background">#drawable/navigation_button_shape</item>
<item name="android:onClick">onButtonClicked</item>
<item name="android:textSize">32sp</item>
<item name="android:textStyle">bold</item>
<item name="android:maxLines">1</item>
</style>
Button shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/darkgrey2" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
Edit:
As Ercan suggests, then best approach is to use android:repeatMode="reverse" as below. Thus the animation is implemented entirely on xml.
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fillBefore="true"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="#android:anim/decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toXScale="1.1"
android:toYScale="1.1" />
This is an expected behavior. The view animation does not really scale the view bounds. It only scales the image of it. Use ObjectAnimator for this purpose. if you are supporting pre honeycomb i recommd Jake Wharton's 9olddroids library
2.As I see from here, you are trying to repeat the same animation infinitely by restarting.
you may do it by adding :
android:repeatCount="infinite"
and also you can use this to obtain more seamless result :
android:repeatMode="reverse"
I hope this helps.
Related
I have made a splash screen for Android by implementing a new Activity. It points to a xml theme that includes android specific code (#style/Splash). That points to a drawable xml of splash.
My question is, If we can do these kinds of platform specific implementations, can we also create animations using this same pattern? I have placed an example of code from the android dev website to give you an idea of what I am trying to include. If yes, what would this code look like in XF.Android and how can we reference it?
SplashActivity.cs
[Activity(Label = "SplashActivity", Theme = "#style/Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
StartActivity(typeof(MainActivity));
}
}
style/Splash
<style name="Splash" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash</item>
</style>
drawable/splash
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#03045E"/>
</item>
<item>
<bitmap
android:src="#drawable/logo1"
android:tileMode="disabled"
android:gravity="center"/>
</item>
</layer-list>
Example anim that I want to include hyperspace_jump.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700" />
<set
android:interpolator="#android:anim/accelerate_interpolator"
android:startOffset="700">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
</set>
</set>
1. Create a Anim folder and put the hyperspace_jump.xml file in it.
2. Create the layouts.
SplashScreen Layout:
<RelativeLayout xmlns:p1="http://schemas.android.com/apk/res/android"
p1:minWidth="25px"
p1:minHeight="25px"
p1:layout_width="match_parent"
p1:layout_height="match_parent"
p1:background="#android:color/white"
p1:id="#+id/relativeLayout1">
<ImageView
p1:layout_width="wrap_content"
p1:layout_height="wrap_content"
p1:id="#+id/imageView"
p1:layout_centerVertical="true"
p1:layout_centerHorizontal="true"
p1:src="#drawable/a01" />
</RelativeLayout>
Main Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<TextView
android:text="Main Activity Started"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView1"/>
</LinearLayout>
3. Code Behind:
SplashScreenActivity:
public class SplashScreenActivity : Activity
{
ImageView imageView;
Animation view_animation;
TextView textview;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
RequestWindowFeature(Android.Views.WindowFeatures.NoTitle);
SetContentView (Resource.Layout.SplashScreen);
imageView = (ImageView)FindViewById(Resource.Id.imageView);
view_animation = AnimationUtils.LoadAnimation(this,Resource.Animation.hyperspace_jump);
imageView.StartAnimation(view_animation);
view_animation.AnimationEnd += Rotate_AnimationEnd;
}
private void Rotate_AnimationEnd(object sender, Animation.AnimationEndEventArgs e)
{
Finish();
StartActivity(typeof(MainActivity));
}
}
MainActivity:
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.Main);
Toast.MakeText(this, "Welcome to MainActivity", ToastLength.Long).Show();
}
4. Screenshot:
You could download from the GitHub for reference. https://github.com/WendyZang/Test/tree/master/SplashScreenDemo
In my application I have this animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="true">
<alpha
android:duration="1000"
android:startOffset="2000"
android:fromAlpha="0"
android:toAlpha="1"/>
<scale
android:duration="400"
android:startOffset="4000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9"/>
<scale
android:duration="400"
android:startOffset="4400"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1"/>
<alpha
android:duration="1000"
android:startOffset="5800"
android:fromAlpha="1"
android:toAlpha="0"/>
</set>
Generally it shows image, make "press" gesture and hide it. What I want is run this animation in infinite loop. Setting parameter repeatCount doesn't work. Only way I found is to start animation again in animation listener.
final Animation pointerAnim = AnimationUtils.loadAnimation(this, R.anim.pointer);
pointerAnim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(final Animation animation) {}
#Override
public void onAnimationEnd(final Animation animation) {
pointerView.startAnimation(pointerAnim);
}
#Override
public void onAnimationRepeat(final Animation animation) {}
});
pointerView.startAnimation(pointerAnim);
But here comes my problem. Between end and new start animation, the image "blink" (appeared and disappeared in short moment) and I don't know how to prevent this. Using fillAfter doesn't work. Also setting appropriate visibility in listener doesn't work. Note that target API is 10.
I'll be glad for any advice
This was surprisingly tricky, but here's an answer that seems to work and avoid the blinking. Break the animation up into two parts and set two animation listeners so that when each of them finish, they trigger the other one to start. It looks as follows:
pointer_fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="true">
<alpha
android:duration="1000"
android:startOffset="2000"
android:fromAlpha="0"
android:toAlpha="1"/>
<scale
android:duration="400"
android:startOffset="4000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9"/>
</set>
pointer_fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="400"
android:startOffset="0"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1"/>
<alpha
android:duration="1000"
android:startOffset="1400"
android:fromAlpha="1"
android:toAlpha="0"/>
</set>
Then the code:
final Animation pointerFadeInAnim = AnimationUtils.loadAnimation(this, R.anim.pointer_fade_in);
final Animation pointerFadeOutAnim = AnimationUtils.loadAnimation(this, R.anim.pointer_fade_out);
pointerFadeInAnim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(final Animation animation) {}
#Override
public void onAnimationEnd(final Animation animation) {
pointerView.startAnimation(pointerFadeOutAnim);
}
#Override
public void onAnimationRepeat(final Animation animation) {}
});
pointerFadeOutAnim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
pointerView.startAnimation(pointerFadeInAnim);
}
#Override
public void onAnimationRepeat(Animation animation) {}
});
pointerView.startAnimation(pointerFadeInAnim);
Hope this works for you!
Did you try combining both repeatMode and repeatCount attributes like in the following example
<scale
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
Hope it has helped
Maybe it's just a workaround that won't be applicable in your case, but would it be possible to offset the entiere animation, so that it starts at 3000 ? (Thus, when alpha=1.0)
(Well, after some thought, I'm pretty sure you can't do that, because the alpha transition should be the first when the object first appears on screen)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="true">
<scale
android:duration="400"
android:startOffset="1000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9"/>
<scale
android:duration="400"
android:startOffset="1400"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1"/>
<alpha
android:duration="1000"
android:startOffset="2800"
android:fromAlpha="1"
android:toAlpha="0"/>
<alpha
android:duration="1000"
android:startOffset="5800"
android:fromAlpha="0"
android:toAlpha="1"/>
</set>
I have used animation on an activity in my game where user sees his score in form of stars(maximum score gets 3 stars). I have used animation on each of the stars(using startAnimation() method). The golden stars gets placed on the blank grey colored stars with translation, scale and alpha animation(I have used set animation).
But whenever that score activity starts the animation gets displayed with jerkiness/lag/unsmoothness.
Whats the solution to make that animation smooth and timely?
Following is the java code to dislplay 3 out of 3 stars
protected void onCreate(Bundle savedInstanceState)
{
............
Myanim1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha_scale_left);
Myanim2= AnimationUtils.loadAnimation(getApplicationContext(), R.anim.aplha_scale_mid);
Myanim3= AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha_scale_right);
......}
if(pattern_Score>targetScore*90/100)
{
mCountDownTimer = new CountDownTimer(1000,100) {
#Override
public void onTick(long millisUntilFinished) {
starIv1.setImageResource(R.drawable.star_gray);
}
#Override
public void onFinish() {
starIv1.startAnimation(Myanim1);
starIv1.setImageResource(R.drawable.star);
Toast.makeText(getApplicationContext(), "timer1 stopped", Toast.LENGTH_SHORT).show();
}
};
mCountDownTimer.start();
starIv1.clearAnimation();
mCountDownTimer1=new CountDownTimer(2000,100) {
#Override
public void onTick(long millisUntilFinished) {
starIv2.setImageResource(R.drawable.star_gray);
}
#Override
public void onFinish() {
//starIv2.clearAnimation();
starIv2.startAnimation(Myanim2);
starIv2.setImageResource(R.drawable.star);
}
};
mCountDownTimer1.start();
starIv2.clearAnimation();
mCountDownTimer2=new CountDownTimer(3000,100) {
#Override
public void onTick(long millisUntilFinished) {
starIv3.setImageResource(R.drawable.star_gray);
}
#Override
public void onFinish() {
//starIv3.clearAnimation();
starIv3.startAnimation(Myanim3);
starIv3.setImageResource(R.drawable.star);
}
};
mCountDownTimer2.start();
starIv3.clearAnimation();....}
alpha_scale_left.xml(animation on left star)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="-100%"
android:fromXDelta="-20%"
android:toYDelta="0"
android:toXDelta="0"
android:duration="600"/>
<scale
android:fromXScale="3000%"
android:fromYScale="3000%"
android:toXScale="1"
android:toYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:duration="900"
/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="600" />
</set>
alpha_scale_mid.xml(animation on middle star)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="-100%"
android:fromXDelta="-5%"
android:toYDelta="0"
android:toXDelta="0"
android:duration="600"/>
<scale
android:fromXScale="3000%"
android:fromYScale="3000%"
android:toXScale="1"
android:toYScale="1"
android:pivotX="50%"
android:pivotY="0%"
android:duration="600"
/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="600" />
</set>
alpha_scale_right.xml(animation on right star)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="-100%"
android:fromXDelta="5%"
android:toYDelta="0"
android:toXDelta="0"
android:duration="600"/>
<scale
android:fromXScale="3000%"
android:fromYScale="3000%"
android:toXScale="1"
android:toYScale="1"
android:pivotX="50%"
android:pivotY="0%"
android:duration="600"
/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="600" />
</set>
I don't understand the meaning of 3000% in your xmls try changing in the range of ~100%
Looking at the code I can suggest you to use some threads and not load all the animations on the main thread and you should rather use Asynctask and based on some progress you may use onprogressupdate method to make changes to the UI thread.
OR
Graphics and Animations are handled by the GPU or in more common
term the Processor of your device. If not rendered properly then it
could possibly be the result of a processor with low clock rate.
I want to animate a custom view programmatically. I want it to only animate in the position where it is declare in the xml file, and I don't want it to mess the layout. Also this animation is affected by other factor so the android Animation class is out of the question.
I have test this sample tutorial and watch this videos. My problem is that most tutorial is for animating a sprite into a canvas where you will trace your sprite's location.
How can you animate the custom view without affecting layout and without using the Android Animation class?
Edited:
The custom view will act as a animated-gif and will toggle another set of frames whenever an event activates it.
you can create animation XML and apply that animation from program to your ImageView check following example
you can start animation for your customized view just call viewobject.startAnimation(animationobject);
animation.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700" />
<set
android:interpolator="#android:anim/accelerate_interpolator"
android:startOffset="700">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
</set>
your main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
/>
<ImageView android:id="#+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
</LinearLayout>
then your activity class myActivity.java
public class myActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView image = (ImageView) findViewById(R.id.ImageView01);
//create animation class object
Animation hyperspaceJump =
AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
//start animation for image
image.startAnimation(hyperspaceJump);
}
}
If you want "frame by frame" animation that just "runs" like an animated gif, you can follow:
drawable-animation official tutorial.
Quoting from the tutorial:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust3" android:duration="200" />
</animation-list>
and in your code
AnimationDrawable rocketAnimation;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
}
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
rocketAnimation.start();
return true;
}
return super.onTouchEvent(event);
}
I have three activities whose launch modes are single instance.
Using onfling(), I swing them left and right.
The problem is when I swipe right to left the slide transition is okay but when I swipe left to right, I get the transition of swiping right to left.
I know why this is happening its because I am always sending new intents. But, now I need to change the animation of sliding left to right.
I know there is a method named overridingTransitionPending(), but I do not know how to define my animation in XML.
Use this xml in res/anim/
This is for left to right animation:
<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>
This is for right to left animation:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="0%" android:toXDelta="100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="700" />
</set>
In your coding use intent like for left to right:
this.overridePendingTransition(R.anim.animation_enter,
R.anim.animation_leave);
In your coding use intent like for right to left
this.overridePendingTransition(R.anim.animation_leave,
R.anim.animation_enter);
If you want the transition work for whole application you can create a rootacivity and inherit it in the activity you need. In Root Activity's onCreate call overridePendingTransition with desired direction. And onStart call overridePendingTransition with other direction if activity is resumed. Here I am giving full running code below.Correct me if I am wrong.
create this xml file on your anim folder
anim_slide_in_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="600"
android:fromXDelta="100%"
android:toXDelta="0%" >
</translate>
</set>
anim_slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="600"
android:fromXDelta="-100%"
android:toXDelta="0%" >
</translate>
</set>
anim_slide_out_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="600"
android:fromXDelta="0%"
android:toXDelta="-100%" >
</translate>
</set>
anim_slide_out_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="600"
android:fromXDelta="0%"
android:toXDelta="100%" >
</translate>
</set>
RootActivity
import android.app.Activity;
import android.os.Bundle;
public class RootActivity extends Activity {
int onStartCount = 0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
onStartCount = 1;
if (savedInstanceState == null) // 1st time
{
this.overridePendingTransition(R.anim.anim_slide_in_left,
R.anim.anim_slide_out_left);
} else // already created so reverse animation
{
onStartCount = 2;
}
}
#Override
protected void onStart() {
// TODO Auto-generated method stub
super.onStart();
if (onStartCount > 1) {
this.overridePendingTransition(R.anim.anim_slide_in_right,
R.anim.anim_slide_out_right);
} else if (onStartCount == 1) {
onStartCount++;
}
}
}
FirstActivity
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
public class FirstActivity extends RootActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView tv = (TextView) findViewById(R.id.tvTitle);
tv.setText("First Activity");
Button bt = (Button) findViewById(R.id.buttonNext);
bt.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Intent i = new Intent(FirstActivity.this, SecondActivity.class);
startActivity(i);
}
});
}
}
SecondActivity
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
public class SecondActivity extends RootActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView tv = (TextView) findViewById(R.id.tvTitle);
tv.setText("Second Activity");
Button bt = (Button) findViewById(R.id.buttonNext);
bt.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Intent i = new Intent(SecondActivity.this, ThirdActivity.class);
startActivity(i);
}
});
}
}
ThirdActivity
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
public class ThirdActivity extends RootActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView tv = (TextView) findViewById(R.id.tvTitle);
tv.setText("Third Activity");
Button bt = (Button) findViewById(R.id.buttonNext);
bt.setText("previous");
bt.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
finish();
}
});
}
}
and finally
Manifest
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.transitiontest"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="18" />
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
<activity
android:name="com.example.transitiontest.FirstActivity"
android:label="#string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="com.example.transitiontest.SecondActivity"
android:label="#string/app_name" >
</activity>
<activity
android:name="com.example.transitiontest.ThirdActivity"
android:label="#string/app_name" >
</activity>
</application>
</manifest>
If you want to apply the animation on "activity" start. then write below code.
startActivity(intent);
overridePendingTransition(R.anim.opening_anim, R.anim.closing_anim);
If you want to apply the animation on "dialog" then firstly add below code in styles.xml file
<style name="my_style”>
<item
name="#android:windowEnterAnimation">#anim/opening_anim</item>
<item
name="#android:windowExitAnimation">#anim/closing_anim</item>
</style>
Use this style as I defined below.
final Dialog dialog = new Dialog(activity);
dialog.getWindow().getAttributes().windowAnimations = R.style.my_style;
If you want to apply the animation on "view" then write below code
txtMessage = (TextView) findViewById(R.id.txtMessage);
// load the animation
Animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.animation);
// start the animation
txtMessage.startAnimation(animFadein);
Below, I have mentioned most of the animation .xml code.
appear - make it just appear.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="1"
android:fromAlpha="1.0"
android:toAlpha="1.0"/>
</set>
===========================================
make it slowly fades into view.xml
<?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="300"
android:repeatCount="0" />
</set>
==========================================
fadeout - make it slowly fade out of view.xml
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="300"
android:repeatCount="0" />
</set>
==========================================
push_down_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="-100%p" android:toYDelta="0" android:duration="400"/>
</set>
==========================================
push_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%p" android:duration="400"/>
</set>
==========================================
push_left_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="300"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
==========================================
push_left_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
==========================================
push_right_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="300"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
==========================================
push_right_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="300"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
==========================================
push_up_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="300"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
==========================================
push_up_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%p" android:duration="300"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
==========================================
rotation.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="-90"
android:pivotX="50%"
android:pivotY="50%"
android:duration="0" android:fillAfter="true">
</rotate>
==========================================
scale_from_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:fromYScale="0" android:toYScale="1.0"
android:fromXScale="0" android:toXScale="1.0"
android:duration="500" android:pivotX="100%"
android:pivotY="100%" />
</set>
==========================================
scale_torwards_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:fromYScale="1.0" android:toYScale="0"
android:fromXScale="1.0" android:toXScale="0"
android:duration="500"/>
</set>
==========================================
shrink_and_rotate_a(exit).xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="1.0" android:toXScale="0.8"
android:fromYScale="1.0" android:toYScale="0.8"
android:pivotX="50%p" android:pivotY="50%p"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="100"
/>
<scale
android:fromXScale="1.0" android:toXScale="0.0"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotX="50%p" android:pivotY="50%p"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="150"
android:startOffset="100"
/>
==========================================
shrink_and_rotate_b(entrance).xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.0" android:toXScale="1.0"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotX="50%p" android:pivotY="50%p"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="150"
android:startOffset="250"
/>
<scale
android:fromXScale="0.8" android:toXScale="1.0"
android:fromYScale="0.8" android:toYScale="1.0"
android:pivotX="50%p" android:pivotY="50%p"
android:interpolator="#android:anim/accelerate_interpolator"
android:duration="100"
android:startOffset="400"
/>
========================================
blink.xml
<?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="800"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>
========================================
ZoomIn.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="3"
android:toYScale="3" >
</scale>
</set>
========================================
ZoomOut.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" >
</scale>
</set>
========================================
FadeIn.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
========================================
FadeOut.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
</set>
========================================
Move.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="80%p"
android:duration="1000" />
</set>
========================================
SlideDown.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="800"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:interpolator="#android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
========================================
SlideUp.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
android:duration="800"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="#android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0" />
</set>
========================================
Bounce.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="#android:anim/bounce_interpolator">
<scale
android:duration="800"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
Made a sample code implementing the same with slide effects from left, right, top and bottom.
(For those who dont want to make all those anim xml files :) )
Checkout out the code on github
Also, you can do this:
FirstClass.this.overridePendingTransition(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
And you don't need to add any animation xml
I was not able to find any solution for this type of animation using ViewPropertyAnimator.
Here's an example:
Layout:
<FrameLayout
android:id="#+id/child_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/child_view"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
/>
</FrameLayout>
Animate - Right to left and exit view:
final childView = findViewById(R.id.child_view);
View containerView = findViewById(R.id.child_view_container);
childView.animate()
.translationXBy(-containerView.getWidth())
.setDuration(TRANSLATION_DURATION)
.setInterpolator(new AccelerateDecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
childView.setVisibility(View.GONE);
}
});
Animate - Right to left enter view:
final View childView = findViewById(R.id.child_view);
View containerView = findViewById(R.id.child_view_container);
childView.setTranslationX(containerView.getWidth());
childView.animate()
.translationXBy(-containerView.getWidth())
.setDuration(TRANSLATION_DURATION)
.setInterpolator(new AccelerateDecelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
childView.setVisibility(View.VISIBLE);
}
});
If your API level is 19+ you can use translation as above.
If your API level is less than 19, you can take a look at similar tutorial: http://trickyandroid.com/fragments-translate-animation/
For from right to left slide
res/anim/in.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:fromYDelta="0%" android:toYDelta="0%"
android:duration="700" />
</set>
res/anim/out.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:fromYDelta="0%" android:toYDelta="0%"
android:duration="700" />
</set>
in Activity Java file:
Intent intent = new Intent(HomeActivity.this, ActivityCapture.class);
startActivity(intent);
overridePendingTransition(R.anim.in,R.anim.out);
you can change the duration times in the xml files for the longer or shorter slide animation.