Learn to create a Flip Coin Application on Android

When you start to learn Android Development, it can be interesting to make some little and fun applications. It’s good to motivate yourself and it is also a great way to discover some specific part of the Android SDK. Today, I propose you to create a Flip Coin Application on Android to help you to discover how to use the Animation API.

Note that you can discover this tutorial directly in video on Youtube :

 

To create a Flip Coin Application, the first thing is to have two images for the head and the tail of the coin. We will use a Minnesota Quarter Coin here :

 

 

 

The second step is to define an ImageView and a Button in the layout of the Main Activity :


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.ssaurel.coinflip.MainActivity">

  <ImageView
    android:id="@+id/coin"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/heads"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="40dp"/>

  <Button
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/coin"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="60dp"
    android:text="Flip"/>

</RelativeLayout>

 

Now, we can write the Java code. The most interesting part of our application is implemented in the flipCoin() method. We create two animations :

  • A Fade Out animation to let the coin disappear when the user will click on the button to flip the coin
  • A Fade In animation to let the coin appear after we flip the coin randomly

The Fade Out and Fade In animations are created via the AlphaAnimation class on Android. We are going to animate the alpha property from 1 to 0 for the Fade Out effect and then from 0 to 1 for the Fade In effect.

We add an AnimationListener on the Fade Out animation to be sure to flip the coin and to start the Fade In animation just when the Fade Out effect will be ended.

The code for the Main Activity will have the following form :


package com.ssaurel.coinflip;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.DecelerateInterpolator;
import android.widget.Button;
import android.widget.ImageView;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

  public static final Random RANDOM = new Random();
  private ImageView coin;
  private Button btn;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    coin = (ImageView) findViewById(R.id.coin);
    btn = (Button) findViewById(R.id.btn);
    btn.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        flipCoin();
      }
    });
  }

  private void flipCoin() {
    Animation fadeOut = new AlphaAnimation(1, 0);
    fadeOut.setInterpolator(new AccelerateInterpolator());
    fadeOut.setDuration(1000);
    fadeOut.setFillAfter(true);
    fadeOut.setAnimationListener(new Animation.AnimationListener() {
      @Override
      public void onAnimationStart(Animation animation) {

      }

      @Override
      public void onAnimationEnd(Animation animation) {
        coin.setImageResource(RANDOM.nextFloat() > 0.5f ? R.drawable.tails : R.drawable.heads);

        Animation fadeIn = new AlphaAnimation(0, 1);
        fadeIn.setInterpolator(new DecelerateInterpolator());
        fadeIn.setDuration(3000);
        fadeIn.setFillAfter(true);

        coin.startAnimation(fadeIn);
      }

      @Override
      public void onAnimationRepeat(Animation animation) {

      }
    });

    coin.startAnimation(fadeOut);
  }

}

 

Now, you can run the application and enjoy the final result :

Leave a Reply