Button animations in android

Question

Good day, everyone!

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 (god "bless" them...) 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 "godblessed" content should be changing over some small period of time (a second or two maybe). That scares me alot, cause when I'm thinking about scaling these buttons on different devices, and different troubles with ninepatch and hand-made-frames animations I' m (as it looks like) going to make - I want to cry...

Tell me please, I need your expertise - is it really to make such thing??? Or maybe there are any kind of workarounds or something...

Please, I'm nearly panic...

Answer 1

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);
}

Answer 2

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();`

Answer 3

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.