Frame-by-frame animations - android

When I try to code a frame-by-frame animation in Eclipse, It gives me a bug. I found something on the internet that says they screwed up in the sdk tutorial documentation but I cannot help but wonder what android:id="selected" means or what should be put in the quotations instead.
Also, can somebody explain the last part of the frame animation tutorial to me?
http://developer.android.com/guide/topics/resources/animation-resource.html#Frame
Do you put another code in the filename.Java, and if so, where do you put it?
I cannot understand where to put the second code that is not XML. I think I need to know what the code below is and where it should go:
ImageView fileimage = (ImageView) findViewById(R.id.file_image);
fileimage.setBackgroundResource(R.drawable.file_image2);
fileAnimation = (AnimationDrawable)fileimage.getBackground();
fileAnimation.start();
But here is the XML code I used:
<animation-list android:id="selected" android:oneshot="false">
<item android:drawable="#drawable/filename" android:duration="200" />
<item android:drawable="#drawable/filename2" android:duration="200" />
</animation-list>
Should anything be removed or added from that? I don't know what else to do, because I need to start the animation and have the code for that (1st one) but I don't know where it goes, or if I need another code along with it.

This is how I implemented it.
In your main java file you should have something like this.
public class Main extends Activity {
AnimationDrawable mainanimation;
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
ImageView mainimage = (ImageView) findViewById(R.id.MainAnim);
mainimage.setBackgroundResource(R.anim.mainanim);
mainanimation = (AnimationDrawable) mainimage.getBackground();
So you set the ImageView in your main.xml layout file to the xml that contains the animation (R.id.MainAnim)
Then in your MainAnim.xml (located in res/anim) file you write
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:drawable="#drawable/image1" android:duration="2000" />
<item android:drawable="#drawable/image2" android:duration="2000" />
</animation-list>
Now image1 and image2 will alternate back and forth at 2 seconds each. Also I didn't use andriod:id="selectable".
To recap you need 3 files. Your Main.java, your main.xml layout file, and your mainanim.xml file located in res/anim. Also your 2 images in the drawable folder.
Hope that clears it up a little.

Related

How to use animation-list in android studio

I am developing an app in which i want to use frame animation. for this i am using animation-list. I am using android studio in which i created an anim folder inside the res folder.now i m not able to add any item. studio does not showing any tag like item when i pressed ctrl + space.
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
</animation-list>
You don't need to create anim folder. You have to paste the images and resource xmls in drawable folder. If you do not have drawable folder then create one inside of your res folder.
I have pasted 4 png images and a spin_animation.xml file inside of the drawable folder.
spin_animation.xml
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/selected" android:oneshot="false">
<item android:drawable="#drawable/ani4" android:duration="500" />
<item android:drawable="#drawable/ani3" android:duration="500" />
<item android:drawable="#drawable/ani2" android:duration="500" />
<item android:drawable="#drawable/ani1" android:duration="500" />
</animation-list>
Suppose you want to replace a imageView
ImageView gyroView = (ImageView) findViewById(R.id.gyro);
to show animation. Set the background of that imageView
gyroView.setBackgroundResource(R.drawable.spin_animation);
Create an Animation Drawable object based on this background:
AnimationDrawable gyroAnimation = (AnimationDrawable) gyroView.getBackground();
Start the animation:
gyroAnimation.start();
For detail help check this.
in Android Studio, put the xml file in the res/drawable/ directory of your Module.
See these google offical doc below:
http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html
http://developer.android.com/guide/topics/graphics/drawable-animation.html

Android Animation with onDraw or ImageView?

I want to create an android game. Everytime someone touches the display the player should go up, and if he releases the player should fall.
With the help of many tutorials I made it work but now I want to animate it and I'm stuck. That means the image of the player should be changed every half a second. Additionally an animated rotation should be created when the player goes up.
However (after hours of googling) I couldnt find any helpful answer to my problem. The Android Developers site talks about creating an ImageView and a XML file. But thats where I'm stuck: I dont have an ImageView, my player (for which I used a PNG file) is simply created by the onDraw() method:
public void onDraw(Canvas canvas) {
for (Sprite s : sprites) {
canvas.drawBitmap(s.getGraphic(), s.getLocation().x,
s.getLocation().y, null);
}
}
Now I wanted to ask how I should do the animation and the animated rotation. Should I start off with an ImageView or can I somehow "convert" the onDraw method to an ImageView? Or is there another way to do the animation and animated rotation without an ImageView?
Secondly, if I had to create the ImageView I don't understand how I can make the player "dynamic", i.e.: changing the position when someone touches the display.
Thanks in advance :)
EDIT:
Ok, I created my animation.xml file in the drawable folder:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" android:id="#+id/splashAnimation">
<item android:drawable="#drawable/ship" android:duration="200" />
<item android:drawable="#drawable/ship_2" android:duration="200" />
</animation-list>
and in my main file I added:
ImageView img = (ImageView) findViewById(R.id.splashAnimation);
img.setBackgroundResource(R.drawable.animation);
ship_anim= (AnimationDrawable) img.getBackground();
ship_anim.start();
However, now I get the error message: NullPointerException
Where is the Problem?
if you have drawables that describe animation, you can always create xml in your drawable folder like this than add this as imageView to the layout
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/img1" android:duration="100" />
<item android:drawable="#drawable/img2" android:duration="100" />
<item android:drawable="#drawable/img3" android:duration="100" />
<item android:drawable="#drawable/mimg4" android:duration="100" />
<item android:drawable="#drawable/img5" android:duration="100" />
</animation-list>
The code for it would look like this:
myAnimation = (AnimationDrawable) findViewById(R.id.animation);
Add just event handler than
if (!isPlaying)
{
playDrawableAnimation();
isPlaying = true;
} else
{
faceAnimation.stop();
isPlaying = false;
}

Designing animation for android application

What is the best way to design and embed an animation into an android app.
(I'm not talking about transitions and activities in/out animations.)
I can think of 2 ways of doing it:
designing the animation with flash or something similar, export png-sequence with transparent bgs and creating an animation from the images in an xml file (How do I write this kind of xml?)
creating a grid of images with all the frames of the animation that I've created
and save it into one image. than using something like background-position in css in order to move the visible area of the image on each frame enter (By Java code, or by xml)
which of this is better/most common? and how do I implement the solution (if there is a better solution - that would be great).
and what programs do you usually use for this kind of task
(the goal is to achieve something that works like the frog in cut the rope or the birds in angry birds for example)
thanks!
I used simple animation in one project... It's on your first point... A sequence of *.png files in /res/drawable, and *.xml like:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/s250" android:duration="200" />
<item android:drawable="#drawable/s251" android:duration="200" />
<item android:drawable="#drawable/s252" android:duration="200" />
<item android:drawable="#drawable/s253" android:duration="200" />
<item android:drawable="#drawable/s254" android:duration="200" />
<item android:drawable="#drawable/s255" android:duration="200" />
<item android:drawable="#drawable/s256" android:duration="200" />
<item android:drawable="#drawable/s257" android:duration="200" />
<item android:drawable="#drawable/s258" android:duration="200" />
</animation-list>
... and source...
final ImageView pygalo = (ImageView) findViewById(R.id.imageanimation);
pygalo.setBackgroundResource(R.anim.animation);
final AnimationDrawable pygaloanimation = (AnimationDrawable) pygalo.getBackground();
pygalo.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View vp) {
pygaloanimation.stop();
pygaloanimation.start();
}
});
It is very easy to do...

Android, Animation in progress bar doesn't run

In my application I want to override default look and feel of progress bar. Default one is a rectangle and has loading animation. So, what i did?
First in res/drawable i created loadinganim.xml (loading01-6 are my .png images).
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false" >
<item android:drawable="#drawable/loading01" android:duration="300" />
<item android:drawable="#drawable/loading02" android:duration="300" />
<item android:drawable="#drawable/loading03" android:duration="300" />
<item android:drawable="#drawable/loading04" android:duration="300" />
<item android:drawable="#drawable/loading05" android:duration="300" />
<item android:drawable="#drawable/loading06" android:duration="300" />
</animation-list>
Then in res\layout, i created another xml file, named layout_loading.xml.
<?xml version="1.0" encoding="utf-8"?>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/blankImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/loading01"/>
In code, I have a button that when you press it progress bar will appear. The code is:
private ProgressDialog progressBar;
private AnimationDrawable myAnimation;
Button btnCustom1 = (Button) findViewById(R.id.custom1);
btnCustom1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
progressBar = ProgressDialog.show(MainActivity.this, "", "");
progressBar.setContentView(R.layout.layout_loading);
progressBar.setCancelable(true);
final ImageView imageView = (ImageView) progressBar.findViewById(R.id.blankImageView);
imageView.setBackgroundResource(R.drawable.loadinganim);
myAnimation = (AnimationDrawable) imageView.getBackground();
myAnimation.start();
}
});
The problem is when i click on the button, the image will show but there is no animation. like following image. Please tell me how can i run the animation? or where is my fault?
Thank you for helping me.
I found the answer.
Actually the above code doesn't have problem and its correct. The reason of not showing of animation is because of a bug (at least, i think) in Android 2.3.3 (API 10). When I run the project on other emulator (API 15), it was animating fine and it has not any problem.
Therefore, hey Google guy, please do something this is a real bug.

Android custom animation like airport schedule board

I want to create an animation for the text like on Airport the flight schedule board does. Dropping from top and change the text on it. Here is the image. So When I click on button the text on the image should change with the said animation. Does it possible with android?
Please guide me how can I achieve this kind of animation in android?
EDIT:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/clockbg1" android:duration="150" />
<item android:drawable="#drawable/clockbg2" android:duration="150" />
<item android:drawable="#drawable/clockbg3" android:duration="150" />
<item android:drawable="#drawable/clockbg4" android:duration="150" />
<item android:drawable="#drawable/clockbg5" android:duration="150" />
<item android:drawable="#drawable/clockbg6" android:duration="150" />
</animation-list>
My Activity Class:
public class XMLAnimation extends Activity {
private static AnimationDrawable animation;
private ImageView refresh;
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
refresh = (ImageView) findViewById(R.id.simple_anim);
refresh.setBackgroundResource(R.drawable.loader_animation);
animation = (AnimationDrawable) refresh.getBackground();
}
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
animation.start();
}
Now How to place vertically animated text on this images so it looks like the animation I wanted to create?
Thanks,
AndroidVogue
It isn't exactly the thing you want, but there's a nice 3-part tutorial by Kevin Dion that starts here for creating a custom odometer widget that looks something like what you want. It should help get you started.
To get the effect of the top half of the letters falling down (if that's what you want), you can fake it by drawing the letter into a buffer image and then scaling the vertical extent of the letter to get a foreshortening effect.
I got working library. Originally developed by someone else but I provided support for down version from Froyo. I hope this can help you out.
AbhanFlipView
Ref:
Library Developed By: Emil Sjölander
Animations Created By: Jake Wharton
UPDATE
It has a document named HowTo.txt shows how to integrate.
Thanks.

Categories

Resources