Question

Hello I am trying to create an animation like creating heart like bubbles but not 100% like this. This could on some static Activity.

But I am at no where. Documentation lacks examples and examples in API are just unacceptable. It shouldn’t be so hard to make such animation.

I am pasting my code please help me.

Class File

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class AnimationTest extends Activity {
AnimationDrawable animation;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Button btnStart = (Button) findViewById(R.id.btnStart);
    final ImageView imgView = (ImageView) findViewById(R.id.img);

    btnStart.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startAnimation();
        }
    });
    imgView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });
}

class Starter implements Runnable {
    public void run() {
        animation.start();
    }
}

private void startAnimation() {
    animation = new AnimationDrawable();
    animation.addFrame(getResources().getDrawable(R.drawable.one), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.two), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.three), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.four), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.five), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.six), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.seven), 100);
    animation.addFrame(getResources().getDrawable(R.drawable.eight), 100);
    animation.setOneShot(false);


    ImageView imageView = (ImageView) findViewById(R.id.img);
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(80, 90);
    params.alignWithParent = true;
    params.addRule(RelativeLayout.CENTER_IN_PARENT);
    imageView.setLayoutParams(params);
    imageView.setImageDrawable(animation);
    imageView.post(new Starter());
}

}

XML File

    <TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:text="Frame by Frame Animation Example"
        android:gravity="center" />

    <RelativeLayout android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:layout_gravity="center_horizontal">

        <ImageView android:id="@+id/img" android:layout_width="80px"
            android:layout_height="90px" android:layout_centerInParent="true" />

        <Button android:id="@+id/btnStart" android:text="Start Animation"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_alignParentRight="true" />

    </RelativeLayout>

</LinearLayout>

Images, you can past some other images too
124

EDIT
What I want to accomplish
step1: a fish comes from left side
setp2: a fish comes from right side

step3: a heart appears and grows bigger in very center of both fish
step4: then small hearts fly away and disappear

Answer 1

Grow animations

Translate + scale + rotate animation set

Start by looking at those. That will teach the basics of Animation API. In order to get the the one after another chain effect you are looking for the only way I’ve found to do it is using animationListener to get a call back when one ends and then start the next one from there. Honestly it may easier to implement for your needs if you just make this into a movie file and play it in a VideoView rather than creating all of those views seperately and applying Animations to all of them.