Open In App

How to Create a Simple Lucky Draw Spinning Wheel in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

Pre-requisites:

We are going to build a lucky draw spinning wheel, that lets you spin a wheel when a button is clicked. This is a glimpse of the application we are going to build. The application contains a single Activity with a single TextView, two ImageView, and one Button to spin the wheel,  A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

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: Add necessary assets

Now, go to app > res > drawable, and paste the following images to the drawable folder.

wheel.png:

wheel.png

target.png:

target.png

You can add any other similar images you want. But make sure to name the images as wheel.png and target.png respectively. Once you’ve pasted the images in the drawable folder, it will look something like this,

Step 3: Working with the activity_main.xml file

We have added the necessary resource files for the application we are building. Now, Let’s design the UI for our application. Add this XML file to app > res > layout. Below is the code for the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GeeksforGeeks"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="48sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <ImageView
        android:id="@+id/ivWheel"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_marginStart="55dp"
        android:layout_marginTop="116dp"
        android:layout_marginEnd="56dp"
        android:rotation="17"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:srcCompat="@drawable/wheel" />
  
    <ImageView
        android:id="@+id/ivTarget"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="181dp"
        android:layout_marginTop="59dp"
        android:layout_marginEnd="181dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:srcCompat="@drawable/target" />
  
    <Button
        android:id="@+id/btnSpin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="161dp"
        android:layout_marginTop="44dp"
        android:layout_marginEnd="161dp"
        android:text="SPIN"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/ivWheel" />
  
</androidx.constraintlayout.widget.ConstraintLayout>


Preview:

activity_main.xml

Step 4: Working with the MainActivity.java file

Now it’s time to initialize everything in MainActivity. We are using Random class in java, to generate a random number to spin, and CountDownTimer class to rotate the image each millisecond by 2 degrees. Here is the complete code for MainActivity. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




package com.cs.luckyspinner;
  
import androidx.appcompat.app.AppCompatActivity;
  
import android.os.Bundle;
import android.os.CountDownTimer;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
  
import java.util.Random;
  
public class MainActivity extends AppCompatActivity {
  
    Button btnSpin;
    ImageView ivWheel;
    CountDownTimer timer;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // initializing views
        btnSpin = findViewById(R.id.btnSpin);
        ivWheel = findViewById(R.id.ivWheel);
  
        // creating an object of Random class
        // to generate random numbers for the spin
        Random random = new Random();
  
        // on click listener for btnSpin
        btnSpin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // disabling the button so that user
                // should not click on the button
                // while the wheel is spinning
                btnSpin.setEnabled(false);
  
                // reading random value between 10 to 30
                int spin = random.nextInt(20)+10;
  
                // since the wheel has 10 divisions, the
                // rotation should be a multiple of
                // 360/10 = 36 degrees
                spin = spin * 36;
  
                // timer for each degree movement
                timer = new CountDownTimer(spin*20,1) {
                    @Override
                    public void onTick(long l) {
                        // rotate the wheel
                        float rotation = ivWheel.getRotation() + 2;
                        ivWheel.setRotation(rotation);
                    }
  
                    @Override
                    public void onFinish() {
                        // enabling the button again
                        btnSpin.setEnabled(true);
                    }
                }.start();
  
            }
        });
  
    }
}


That’s it. Now we can run the application. Make sure that your project contains all the following files.

Here is the preview of the final application.

Output:



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