I have an image view which i have set to 400dp(width) and 300dp(height). This image view is used in a list view where i am loading the images from url. During loading of the images, i show an progess bar like animation which is set something like this:
imageView.setBackgroundResource(R.drawable.progress);
final AnimationDrawable startAnimation = (AnimationDrawable) imageView
.getBackground();
startAnimation.start();
once the image is finished loading , i ll remove this animation and set the loaded image as shown below:
imageView.setBackgroundResource(0);
imageView.setImageBitmap(bitmap);
But the probelm is, the animation is also taking the specified width and height, ie 400dp and 300dp respectively, how can i reduce the size of animation drawable alone ?
my animation file: progress.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/anim_black"
android:oneshot="false" >
<item
android:drawable="#drawable/frame_1"
android:duration="100"/>
<item
android:drawable="#drawable/frame_2"
android:duration="100"/>
<item
android:drawable="#drawable/frame_3"
android:duration="100"/>
<item
android:drawable="#drawable/frame_4"
android:duration="100"/>
<item
android:drawable="#drawable/frame_5"
android:duration="100"/>
<item
android:drawable="#drawable/frame_6"
android:duration="100"/>
<item
android:drawable="#drawable/frame_7"
android:duration="100"/>
<item
android:drawable="#drawable/frame_8"
android:duration="100"/>
<item
android:drawable="#drawable/frame_9"
android:duration="100"/>
<item
android:drawable="#drawable/frame_10"
android:duration="100"/>
<item
android:drawable="#drawable/frame_11"
android:duration="100"/>
<item
android:drawable="#drawable/frame_12"
android:duration="100"/>
</animation-list>
frame 1, frame 2 ....frame 12 are the png files which i got by splitting the gif image.
You should use setImageResource for animation in your case. Background image is always scaled to fit the whole image. You also need to chage a ScaleType before starting an animation and after the image is loaded as well.
imageView.setImageResource(R.drawable.progress);
imageView.setScaleType(ScaleType.CENTER);
final AnimationDrawable startAnimation = (AnimationDrawable) imageView.getDrawable();
startAnimation.start();
// and once image is loaded
imageView.setImageBitmap(bitmap);
imageView.setScaleType(ScaleType.CENTER_INSIDE);
Come on dude. You are doing it the longer way. Its better to use a custom Progressbar for your purpose. What you need to do is to use a frame layout of the same size of your Imageview and put a progress bar & your imageview into the same view above your imageview. Once the image is loaded change the visibility of progressbar to View.GONE or View.INVISIBLE. It can be fairly used in listviews as well without any memory issues. For implementing a custom progressbar use this.
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateDrawable="#anim/progress_bar_anim" >
</ProgressBar>
Where yout drawable progress_bar_anim.xml is
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/pro_indi"
android:pivotX="50%"
android:pivotY="50%" />
pro_indi is any circular image to be rotated.
<FrameLayout>
<ImageView>
<Progressbar>
</FrameLayout>
Related
I need to design a component for animation rendering. Because you probably are much smarter than me I ask your opinion.How would you do the following design?
More precisely I want to have a horse which can run, stop, jump and dodge.
I can obtain all the frames needed for all these states. For example, I can draw all the frames containing the horse running(f[1] - f[n]). But what if the horse needs to dodge while running on f[k] frame (1
How can I design this type of transitions? What classes would you use? Do I need to draw transitions for every f[k]?
More details if helps: Design will be implemeneted in Android SDK.
Thank you very much!
Please try below code . hope it will work
You need to create animation-list under res/drawable
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/animationFrame"
android:oneshot="false" >
<item
android:drawable="#drawable/es0"
android:duration="100"/>
<item
android:drawable="#drawable/es1"
android:duration="100"/>
<item
android:drawable="#drawable/es2"
android:duration="100"/>
<item
android:drawable="#drawable/es3"
android:duration="100"/>
<item
android:drawable="#drawable/es4"
android:duration="100"/>
</animation-list>
Write below code in your activity
private AnimationDrawable m_frameAnimation = new AnimationDrawable();
imageView.setBackgroundResource(R.drawable.animationFrame);
m_frameAnimation = (AnimationDrawable) imageView.getBackground();
m_frameAnimation.start();
i want to create a progressbar in android like that image
i try to use
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/loadingicon"
android:pivotX="50%"
android:pivotY="50%" />
but i think it not meet in my requirement
Here is a good example to customize progressbar: http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html
U must draw all state of you future progress bar (img1.png, img2.png, img3.png, img4.png). put image to /res/drawable.
pb_animation.xml:
<animation-list android:id="#+id/myprogressrbar" android:oneshot="false">
<item android:drawable="#drawable/img1" android:duration="50" />
<item android:drawable="#drawable/img2" android:duration="50" />
<item android:drawable="#drawable/img3" android:duration="50" />
<item android:drawable="#drawable/img4" android:duration="50" />
</animation-list>
And then, in yor code:
ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image);
img.setBackgroundResource(R.drawable.pb_animation);
AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();
frameAnimation.start();
you could use an AnimationDrawable in combination with an ImageView and add a drawable for every state of your loading indicator, but a better way to this, is creating a new Style for a ProgressBar view (by extending de platform default style) and use your AnimationDrawable as loading indicator.
The Android styles are open source, so you can easily find them and extend them for your needs.
Good luck!
I want an animated gif, since this isn't possible in Android I am using individual frames in a transition.
except it seems like the transition class only will show two frames ever! I saw other animation methods but they didn't seem to apply to what I was doing, or seemed old and convulated like for an older infant android build
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/activateanima"></item>
<item android:drawable="#drawable/activateanimb"></item>
<item android:drawable="#drawable/activateanimc"></item>
<item android:drawable="#drawable/activateanimc"></item>
<item android:drawable="#drawable/activateanimd"></item>
<item android:drawable="#drawable/activateanime"></item>
<item android:drawable="#drawable/activateanimf"></item>
<item android:drawable="#drawable/activateanimg"></item>
</transition>
How do I animate an image to behave like an animated gif, in place. no rotations or translations here. Using android 2.1+
Are you after a Frame animation? See: here. This will play a standing still animation.
Example from above site:
XML file saved at res/anim/rocket.xml:
<?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/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>
To use:
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
rocketAnimation.start();
Just use a view flipper to flip between the images. Just define your in and out animations to be 0seconds long and they should be instantianous. (but use alpha to be sure). View flipper has the benefit of also auto animating and auto starting
I wanted to create a frame by frame animation when the user touches the screen. The images I've decided to use should appear, animate and disappear at the touched coordinates.
<animation-list xmlns:android=
"http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/animation1" android:duration="50" />
<item android:drawable="#drawable/animation2" android:duration="50" />
<item android:drawable="#drawable/animation3" android:duration="50" />
<item android:drawable="#drawable/animation4" android:duration="50" />
</animation-list>
I attempted to do this via drawable.animationdrawable but it seems like I needed to have the image on screen in the main.xml before I can do this. Is there a way I can do it without having this code in the main.xml?
<ImageView
android:id="#+id/animation1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
you can easily set source for your ImageView using java code. Get reference to imageview in xmllayout. for eg. imageview is image
then do image.setResource(a drawable to be passed here).
Create a view + add visibilty_GONE + add set_anim property, as you have defined your animation file.
Use some onDown(MotionEvent e).
Inside this onDown, set your view_visibilty_VISIBLE.
I have a layer list object, it contain two images, one is background,
and the other is a rotation disk image which will be raotated at the
top of the background image. i.e. I use this layer-list as a linearlayout background,
and I only want to animate "disk_bg" item of the layer-list;
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/
android">
<item android:drawable="#drawable/player_bg" />
<item android:top="166dp" >
<bitmap android:id="#+id/disk_bg" android:src="#drawable/cd"
android:gravity="center" />
</item>
I use this layer-list as a layout background, do you know how can I animate the disk_bg layer in my application?
can you help me, many thanks to you~
don't you get my question? or there is no way to do that?
First create 2(or more) layer-list resources ie *layer_frame1.xml* and *layer_frame2.xml* , where you set your frames. In your case let's say changing the android:top of the disk item.
Then create an animation-list resource where you set the timing and order of the frames :
<?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/layer_frame1"
android:duration="100"/>
<item
android:drawable="#drawable/layer_frame2"
android:duration="100"/>
</animation-list>
Save it in a file ie *drawable/player_animation.xml* and set it as background on a View
<View
android:id="#+id/animation_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/player_animation" />
Finally in your code just say when you want the animation start.
((AnimationDrawable)findViewById(R.id.animation_test).getBackground()).start();
Watch out do not start the animation inside onCreate() method.