Pre-requisites:
- Android App Development Fundamentals for Beginners
- Guide to Install and Set up Android Studio
- How to Create/Start a New Project in Android Studio?
- Running your first Android app
- CountDownTimer in Android with Example
- Random Class in Java
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 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="Lazyroar" 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:
