Button animations in Android

Issue

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.

Solution

1. Make images for your animation and keep in a folder in png format.
2. 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);
}

Answered By - Justin Mathews