Open In App

How to Build Spin the Bottle Game Application in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will be building a Spin the Bottle Game Project using Java and XML in Android. The application is based on a multiplayer game. One player spins the bottle and the direction in which the bottle spins will determine the player who gets selected for a task or any other stuff. There will be a single activity in this application. A sample GIF is given below to get an idea about what we are going to do in this article.

Spin the Bottle Game Android App Sample GIF

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Before going to the coding section first you have to do some pre-task

  • Add Bottle Image: Go to app -> res -> drawable and add this bottle image.
  • Modify the colors.xml file:

XML




<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="green">#0F9D58</color>
</resources>


Step 3: Working with the activity_main.xml file

The XML codes are used to build the structure of the activity as well as its styling part. It contains a TextView at the very top of the activity to show the title. Then it contains an ImageView of the bottle in the center of the activity. Below is the code for the activity_main.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/green"
    tools:context=".MainActivity">
  
    <!--to show the game title-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:fontFamily="cursive"
        android:text="GFG Spin the Bottle"
        android:textSize="40dp" />
  
    <!--image of the bottle with 
        an onClick function-->
    <ImageView
        android:id="@+id/bottle"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:onClick="spinBottle"
        android:src="@drawable/bottle" />
      
</RelativeLayout>


Step 4: Working with the MainActivity.java file

We will create a function inside the Java file that will be called when the bottle’s image is clicked. Inside this function, we will generate a random number from 1-1800 that will be the direction of the image’s rotation. For this, we will be using the Random() function. We will create a method of RotateAnimation function that will have four parameters. The parameters are the initial direction, final direction, the pivot of rotation in the X direction, and the pivot of rotation in the Y direction. Since we want the image to rotate from the center we will make the center the pivot. Therefore:

  • initial direction = 0,
  • final direction = random generated number from 0 – 1800,
  • pivotX = half of image width,
  • pivotY = half of image height. 
  • After every spin initial direction = final direction. 

Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
  
import androidx.appcompat.app.AppCompatActivity;
  
import java.util.Random;
  
public class MainActivity extends AppCompatActivity {
  
    private ImageView bot;
    private Random rand = new Random();
    private int lstDr;
    private boolean spn;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bot = findViewById(R.id.bottle);
    }
  
    // onClick function
    public void spinBottle(View v) {
        // check if the bottled has stopped spinning
        if (!spn) {
              
            // generate a random number from 1-1800
            int num = rand.nextInt(1800);
              
            // set the pivot to the centre of the image
            float pX = bot.getWidth() / 2;
            float pY = bot.getHeight() / 2;
              
            // pass parameters in RoatateAnimation function
            Animation rot = new RotateAnimation(lstDr, num, pX, pY);
              
            // set rotate duration 2500 millisecs
            rot.setDuration(2500);
              
            // rotation will persist after finishing
            rot.setFillAfter(true);
            rot.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                    spn = true;
                }
  
                @Override
                public void onAnimationEnd(Animation animation) {
                    spn = false;
                }
  
                @Override
                public void onAnimationRepeat(Animation animation) {
                }
            });
              
            // change the last direction
            lstDr = num;
              
            // start the animation
            bot.startAnimation(rot);
        }
    }
}


Output:



Last Updated : 15 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads