Develop Reference

Letting an image expand into view using an animation

In my Android app, I have a TextView with a white background. When it is clicked, its background will change to a .png picture of some icon by calling setBackgroundResource(R.drawable.icon) on the TextView. This works as intended, but the change is rather abrupt. I would like to make the icon appear more gradually; when the TextView is clicked, a tiny version of the icon should appear in the center of the TextView and then immediately expand and fill out the entire TextView. I believe the best way to do this would be by using an animation, which of the available animation types in Android are best for this task?
In case it is not clear what I mean, I drew a sketch to illustrate. The second sequence shows how the code works right now, the first shows how I would like it to be.

So, I managed to get the effect you want with an ImageView, using ScaleAnimation. Here's what you have to do:
First, our XML ImageView:
<ImageView
android:id="#+id/scale_anim"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#android:color/white" />
It has fixed dimensions and a white background.
The animation will start with one click with this, inside your onCreate() method:
ImageView starImageView = (ImageView) findViewById(R.id.scale_anim);
starImageView.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
ScaleAnimation starScaleAnimation =
new ScaleAnimation(0.3f, 1f, 0.3f, 1f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
starScaleAnimation.setDuration(500);
((ImageView) v).setImageResource(R.drawable.star);
ScaleAnimation scaleAnim = starScaleAnimation;
v.startAnimation(scaleAnim);
}
});
We are applying a scale animation on the ImageView that stars with 30% of the original size and scales to 100% of its size, from its center point. The duration of this animation is half a second. All these parameters can be changed.
Every time you click the ImageView, your drawable will be applied and the animation will start.

Try this way if it solve yours.
Create an ImageView (X) above your original ImageView (A) - same size and same place as (A)
Animate (X) with ObjectAnimator, listen for the onAnimationEnd call and set the (A)'s background. Then remove (X).
Hope this will help.

Android: AnimationDrawable squeezing my image

I have this weird behavior that I cannot find a solution around...
This only happens in my emulator API Level 10, on my smartphone (Android 4.1) works fine.
I wrote a dynamic animation to show a rolling dice, where 10 random frames are chosen as the frames of the animation, with a duration of 50ms.
When I press the button, the animation run, but squeezed into zero height..... (You can still see some colors from the animating dice), the layout also get messed up.
This does not happen on my phone though.
Here is the portion of the java code:
public void RollDice(View view) {
int id=-1;
AnimationDrawable diceAnimation = new AnimationDrawable();
//create 10 random frames from dice1.jpg to dice6.jpg into diceAnimation
for(int j=0;j<10;j++){
id=getResources().getIdentifier("dice"+String.valueOf(rng.nextInt(6)+1), "drawable", getPackageName());
diceAnimation.addFrame(getResources().getDrawable(id), 50);
}
//assigning and starting animation
diceAnimation.setOneShot(true);
dice.setImageDrawable(diceAnimation);
diceAnimation.start();
}
and the portion of the xml:
<ImageView
android:id="#+id/Dice1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/diceimage"
android:src="#drawable/dice1" />
The button onclick call RollDice().
As final remark, IF I hardcode in ImageView, say android:layout_height="100dp", then the dice will show during animation, but streched into funny shape...
I tried most scaling method, adjustviewbound etc with no luck...

I don't know whether your problem is solved or not.
But I would like to add the answer to this question.
You can try this :
Firstly , set you image view layout_width from match_parent to wrap_content.
Second make use of this below code so as to make the dice disappear completely :
frameAnimation.setVisibility(GONE);

Might have an answer for your, try it out with caution, since I'm a beginner myself.
ViewGroup.MarginLayoutParams mParams = new ViewGroup.MarginLayoutParams(view.getLayoutParams());
ImageView view = (ImageView)findViewById(R.id.image_dice);
layoutParams = new RelativeLayout.LayoutParams(mParams);
layoutParams.width=120;
layoutParams.height=120;
view.setLayoutParams(layoutParams);
Applying that to your image will adjust the .xml on the fly, atleast it works for me when I'm grabbing alot of differently sized images from the web.

Clickable ImageView during TranslateAnimation

I have an ImageView and I want to translate it to a random spot on the screen:
TranslateAnimation anim = new TranslateAnimation(0,100,0,100);
anim.setDuration(2000);
img.startAnimation(anim);
This works fine. But I want to have a clickable ImageView during the whole animation.
At this moment it only works at the beginning and at the end.

I think you have to use Animator class and not Animation class because when using TranslateAnimation, you are animating a image of a view and not a View it self.
I think this is explained somewhere there
http://android-developers.blogspot.com/2011/02/animation-in-honeycomb.html
And on the next page

How to achieve this type of animation in the Android SDK?

Take a look at this design I did for an interface of a game I want to develop on Android:
http://www.moboing.com/smallshow.jpg
When a user touches a balloon, I want that star/glare animation to play with the stars dropping down. All I'm curious about is the best general direction/approach to making that animation possible while developing the app in eclipse/java.
I was thinking making a few variations of stars as transparent PNG's, and making them animate on touch but I'm a newbie so I'm not entirely sure.

You can create the animation like a sequence of images and then use the AnimationDrawable class to make it animated. Let me show you an example:
ImageView my_image = (ImageView) findViewById(R.id.my_animation);
AnimationDrawable animation = new AnimationDrawable();
// We need to add each image to our final animation setting time interval between them
animation.addFrame(getResources().getDrawable(R.drawable.img_1), 200);
animation.addFrame(getResources().getDrawable(R.drawable.img_2), 200);
animation.addFrame(getResources().getDrawable(R.drawable.img_3), 200);
animation.setOneShot(false);
my_image.setBackgroundDrawable(animation); // Set as background to see it
animation.start(); // Start playing the animation
Where:
my_animation: your ImageView into your desire Layout.
img_1, img_2, img_3: images that compounds your animation (your should
create and save them into res/drawable folder).
I hope it can help you and draw a way to do it by yourself :)
PS: this should be into a method on the activity that you want (for example, into onCreate to show it when user start).

Android slow RotateAnimation with much pictures?

Find some trouble with android animation.
I have layout with RelativeLayout as root and have four ImageView's allocated in center of layout, and on top of them i have some picture.
Next i have some button and then in activity i make run next code
RotateAnimation anim2=new RotateAnimation(0, 360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
anim2.setFillEnabled(true);
anim2.setFillAfter(true);
anim2.setDuration(100);
ImageView animatedView1 = (ImageView) findViewById(R.id.imageView1);
animatedView1.startAnimation(anim2);
animation work with lags :(
Like i try run Doom 3 on S3 Trio video card :)))
But if i hide else 3 imageviews and show only one image wich i need to be rotated - i have no problems - it rotates smooth and how i need.
Also i found what it's no different size of images (files) 6 Kb,60Kb it's no difference :(
How i can do rigth animation with no LAGS