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.
Related
Today I got, as I suppose, very interesting question. On my job we are creating a dating service and one of the main features will be the screen, where photos of different girls (or guys) are shown and the user press either "Hot" or "Not" button. Both of these buttons are displayed below the photo on the screen.
Our analytics say that we should implement some kind of "gaming" mechanics, so the want such a thing: when user press, for example, "Not" button - it starts freezing and covering with ice, then it breaks and then the next photo is shown. That is not scale or rotate or translate animation... the button itself, its content should be changing over some small period of time (a second or two maybe).
That scares me a lot, because when I'm thinking about scaling these buttons on different devices, and different troubles with ninepatch and hand-made-frames animations I'm likely going to make.
Is it possible to make such thing? Or maybe there are any kind of workarounds or something.
Make images for your animation and keep in a folder in png format.
Animate those images with code below.
<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>
Then
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);
}
Create list of images in drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/loading"
android:oneshot="false" >
<item android:drawable="#drawable/preloader_01" android:duration="50" />
<item android:drawable="#drawable/preloader_02" android:duration="50" />
<item android:drawable="#drawable/preloader_03" android:duration="50" />
<item android:drawable="#drawable/preloader_04" android:duration="50" />
Use ImageView img instead of button and set the list as background in xml, then in code use AnimationDrawable to start the animation
AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();
// Start the animation (looped playback by default).
frameAnimation.start();`
You can animate Alpha, location and just about any property of a button using ObjectAnimators and ValueAnimators.
If you want custom animations such as the ice effect, you'll have to make these yourself.
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;
}
I am displaying number of icon on map, now i want those icon should blink, please guide me how to that.
can we use two image for light and dim, but main problem is that how to change that overlay image or how to put animation on that image to blink.
Thanks in advance.
if you are using ImageView for icon then put below xml in drawable and use as a Imageview src.
<animation-list android:id="#+id/my_animation" android:oneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/image1" android:duration="150" />
<item android:drawable="#drawable/image2" android:duration="150" />
</animation-list>
and use below code to set animation
ImageView img = (ImageView)findViewById(R.id.imageView);
AnimationDrawable frameAnimation = (AnimationDrawable)img.getDrawable();
frameAnimation.setCallback(img);
frameAnimation.setVisible(true, true);
frameAnimation.start();
You have to make a custom view and use it as a Map Overlay.
Tell Its OnDraw() to invallidate whole view after 500ms and everytime drawing again use alternative image.
This link might be helpful to you:
http://blog.pocketjourney.com/2008/03/19/tutorial-2-mapview-google-map-hit-testing-for-display-of-popup-windows/
I have a checkbox that should look like a green light when checked and a red blinking light when unchecked. To do this I created a selector called connected_selector.xml.
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/green_button" />
<item android:state_checked="false" android:drawable="#drawable/red_button_blinking" />
<item android:drawable="#drawable/red_button_blinking" />
</selector>
The green_button is simply a png and the red_button_blinking is an animation-list of pngs.
<?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/red_button" android:duration="500" />
<item android:drawable="#drawable/red_button_lit" android:duration="500" />
</animation-list>
The checkbox's background is set to #drawable/connected_selector. If the checkbox is initially unchecked, it doesn't blink, it just shows the #drawable/red_button. However if I check the box and then uncheck it, the checkbox will animate correctly.
How can I make the animation start initially since the checkbox will be initially unchecked? I guess I could try to start the animation manually in code, but I don't think that should be necessary.
Okay, I found an ugly, dirty hack to get around this. Note that I don't have the slightest clue why this happens, just a way around this. It is probably not even a generic way since different devices will have different loading times.
I execute the following workaround in onPostResume() to minimize the necessary delay time.
if(onOffStatus) {
// SLEEP 0.5 SECONDS HERE ...
new Handler().postDelayed(new Runnable() {
public void run() {
switcher.setBackgroundResource(R.drawable.button_state_anim);
// Get the background, which has been compiled to an AnimationDrawable object.
AnimationDrawable frameAnimation = (AnimationDrawable) switcher.getBackground();
// Start the animation (looped playback by default).
frameAnimation.start();
}
}, 500); // Actual required time will probably be dependent on device performance
}
It ain't pretty but I'm going with this until I find something better. Let me know if I overlooked something here.
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.