1. sylsau's Avatar
    Hello,

    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 :

    Code:
    <?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 :

    Code:
    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 :



    Don't hesitate to give it a try and give your feedbacks.

    Thanks.

    Sylvain
    01-31-2017 03:48 AM
  2. B. Diddy's Avatar
    Thanks for the link!
    01-31-2017 10:11 AM

Similar Threads

  1. Always On display Brightness
    By Nickd12345 in forum Samsung Gear S2
    Replies: 2
    Last Post: 02-15-2017, 05:55 AM
  2. Replies: 3
    Last Post: 01-31-2017, 03:36 AM
  3. Is it safe to log into Gmail after my phone is rooted?
    By SlaughterMelon in forum Samsung Galaxy S5
    Replies: 1
    Last Post: 01-31-2017, 03:28 AM
  4. Replies: 0
    Last Post: 01-31-2017, 01:20 AM
  5. Can't install Android 7.1.1 update on my Nexus 6p
    By AC Question in forum Ask a Question
    Replies: 0
    Last Post: 01-30-2017, 11:00 PM

Tags for this Thread

LINK TO POST COPIED TO CLIPBOARD