I'm working on my first Android project, and I'm starting off by making a simple splash screen that fades to black before the main menu is revealed. So far it works. The problem is right after the image fades out, it pops back up for a split second before showing the main menu.
Here's the code for SplashActivity.java:
public class SplashActivity extends Activity
{
LinearLayout mLinearLayout;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.splash);
mLinearLayout = new LinearLayout(this);
ImageView i = new ImageView(this);
i.setImageResource(R.drawable.splash);
mLinearLayout.addView(i);
setContentView(mLinearLayout);
Animation fade = AnimationUtils.loadAnimation(this, R.anim.fade_out);
i.startAnimation(fade);
fade.setAnimationListener(new AnimationListener() {
public void onAnimationEnd(Animation animation)
{
startActivity(new Intent(SplashActivity.this, MenuActivity.class));
SplashActivity.this.finish();
}
public void onAnimationRepeat(Animation arg0) {
}
public void onAnimationStart(Animation arg0) {
}
});
}
}
Here's the code for splash.xml:
<?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:background = "#000">
</LinearLayout>
Finally, here's the xml for fading out:
<set android:shareInterpolator="false" xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="500"
android:startOffset="2500">
</alpha>
</set>
A couple notes:
Right now the splash screen is just for show (meaning I'm aware that right now it's not serving any real purpose).
I can paste the AndroidManifest xml or whatever else you think might be necessary.
Any and all help is appreciated. Thanks!
The animation ends, then it flips back to what it was previously. Android animation is confusing, but imagine what you're seeing is a mirage. Nothing about the view you're animating actually changes. Once its over, it goes right back to what it was.
As an example, create a button 100dp x 100dp, and animate is by scaling is small, or rotating. Very slowly. As its running, if you click on areas that look blank, the button will still register the hit. That's because its still "there", but you don't see it.
What you need to do is set visibility on the image in the animation listener:
public void onAnimationEnd(Animation animation)
{
startActivity(new Intent(SplashActivity.this, MenuActivity.class));
SplashActivity.this.finish();
i.setVisibility(View.INVISIBLE);
}
You may need to do it in onAnimationStart. Experiment.
I did a presentation on this a while back. May be useful:
https://docs.google.com/present/view?id=djqv5kb_187c62jvbf7
This would help.
public void onAnimationEnd(Animation animation)
{
i.setVisibility(View.INVISIBLE);
startActivity(new Intent(SplashActivity.this, MenuActivity.class));
SplashActivity.this.finish();
}
Related
I am working on a App that is simple in work and it is working quite efficiently. But I have one place where I am looking something is not looking great and that is flipping Animation.
What I Want :
I have a Button and a ImageView beneath the button. On a Button click I want to make a Animation that it looks like ImageView has flipped and next image is shown in the ImageView. So on every click it should show next image with a flipping animation but there are some problems. I would discuss later but first let me show you how I am doing this.
What I have done so far :
flipping.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:valueFrom="0" android:valueTo="180" android:propertyName="rotationY" >
</objectAnimator>
in Activity
#Override
public void onClick(View v) {
flipAnimation();
ivAnimPicture.setImageResource(myImage1);
}
private void flipAnimation(){
ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.flipping);
anim.setTarget(ivAnimPicture);
anim.setDuration(1500);
anim.start();
}
Problem
When It rotates to 180 from 0 , when it comes exactly at 90 degree we can see image view edges so it makes the animation look not so good. and Also the image changes first then the Flipping animation starts where as I want that Flipping animation should start and in the middle of it the new image should appear. so when the animation stops there should be surprisingly new image for the user.
So I really do not want Image to set in the image-view and then the Animation starts and Animate the image view
Please suggest me more good way or if there is library which is not obsolete.
Chathuranga's solution will do the job. but you better:
1.Use ViewPropertyAnimator. Specially, when you need to perform different animations on several ImageViews.
2.rotate from 270f to 360f for second flip, otherwise your image will be mirrored.
3.Load your second Image into a Drawable before starting the animation, to have a smooth rotation.
final Drawable drawable=getResources().getDrawable(R.drawable.a);
final ImageView iv = ((ImageView)findViewById(R.id.imageView1));
iv.setRotationY(0f);
iv.animate().rotationY(90f).setListener(new AnimatorListenerAdapter()
{
#Override
public void onAnimationEnd(Animator animation)
{
iv.setImageDrawable(drawable);
iv.setRotationY(270f);
iv.animate().rotationY(360f).setListener(null);
}
});
I was in your situation trying to figure out how to get this animation done. Here's how I achieve this.
you need to define two animations. one to rotate from 0 degree to 90 degree and other for to rote from 90 degree to 180 degree
flipstage1.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="rotationY"
android:valueFrom="0"
android:valueTo="90">
</objectAnimator>
flipstage2.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="rotationY"
android:valueFrom="90"
android:valueTo="180">
</objectAnimator>
Place these two files under res/animator
In your code start first animation first, add a listener to it. On animation end change the image and start second animation.
ObjectAnimator animStage1 = (ObjectAnimator) AnimatorInflater.loadAnimator(getActivity(), R.animator.flipstage1);
final ObjectAnimator animStage2 = (ObjectAnimator) AnimatorInflater.loadAnimator(getActivity(), R.animator.flipstage2);
animStage1.setTarget(imageIcon1);
animStage2.setTarget(imageIcon1);
animStage1.setDuration(500);
animStage2.setDuration(500);
animStage1.start();
animStage1.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
animStage2.start();
imageIcon1.setImageDrawable(ResourcesCompat.getDrawable(view.getResources(),R.drawable.okicon,null));
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
imageIcon1 is the reference to image view in xml layout.
Try this simple piece of code and let me know
ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.flipping);
anim.setTarget(ivAnimPicture);
anim.setDuration(1500);
anim.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
ivAnimPicture.setImageResource(myImage1);
}
});
anim.start();
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'm trying to translate an ImageView, moving it downward one step at a time with each click. However, the animation only works for the first button click; all subsequent clicks only change the ImageView's location without the animation.
Here is my move_down.xml file:
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="500"
/>
Here is my button declaration in my main.xml:
<Button
android:id="#+id/bGo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go"
android:onClick="startAnimation" />
Here is my startAnimation function:
public void startAnimation(View view) {
Animation test = AnimationUtils.loadAnimation(this, R.anim.move_down);
character.startAnimation(test);//This is the ImageView I'm trying to animate
test.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {}
public void onAnimationRepeat(Animation animation) {}
public void onAnimationEnd(Animation animation) {
character.setY(character.getY() + character.getHeight());
}
});
}
When I commented out the line
character.setY(character.getY() + character.getHeight());
The animation would work but the location of the ImageView would snap back after the animation was finished.
take out
character.setY(character.getY() + character.getHeight());
Use the fillAfter attribute of the Animation to make it stay where it is at when the animation ends.
Like this:
Animation test = AnimationUtils.loadAnimation(this, R.anim.move_down);
test.setFillAfter(true);
Maybe you should try something like this
public void startAnimation(View view)
{
Animation test = AnimationUtils.loadAnimation(this, R.anim.move_down);
character.startAnimation(test);
character.setVisibility(View.GONE);//when returns to original position, make it invisible
character.setY(character.getY() + character.getHeight());//move to new location
character.setVisibility(View.VISIBLE);//make it visible
}
After animation ends, it returns to the original location, so you need to make it invisible and then move it to the new location where it moved to in the animation and then make it visible. When running, it should appear seamless.
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);
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);