How to Build a Rock Paper Scissor Game in Android Studio?
Last Updated :
08 Feb, 2022
Rock Paper Scissor (which is also called Stone Paper Scissor) is a hand game and played between two people, in which each player simultaneously forms one of three shapes. The winner of the game is decided as per the below rules:
- Rock vs Paper -> Paper wins.
- Rock vs Scissor -> Rock wins.
- Paper vs Scissor -> Scissor wins.
In this game, the user will be asked to make choice and according to the choice of user and computer and then the result will be displayed along with the choices of both computer and user. In this article, we will be building Rock Paper Scissor Game in Android Studio using Kotlin and XML.Â
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 Kotlin as the programming language.
Step 2: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.Â
XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Rock Paper Scissors"
android:textColor="@color/black"
android:textSize="34dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:paddingTop="10dp"
android:text="Computer"
android:textColor="@color/teal_200"
android:textSize="30dp"
android:textStyle="bold" />
<ImageView
android:id="@+id/computer_move_img"
android:layout_width="match_parent"
android:layout_height="120dp"
android:src="@drawable/question_mark" />
<TextView
android:id="@+id/winner_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:text=" "
android:textColor="#F11010"
android:textSize="30dp" />
<ImageView
android:id="@+id/user_move_img"
android:layout_width="match_parent"
android:layout_height="120dp"
android:src="@drawable/question_mark" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Player"
android:textColor="@color/teal_200"
android:textSize="30dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/rock_btn"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/stone_icons" />
<ImageView
android:id="@+id/paper_btn"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/paper_icon" />
<ImageView
android:id="@+id/scissors_btn"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/scissors_icons" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="Player Score"
android:textColor="@color/black"
android:textSize="20sp" />
<TextView
android:id="@+id/player_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="0"
android:textColor="@color/black"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="Computer Score"
android:textColor="@color/black"
android:textSize="20dp" />
<TextView
android:id="@+id/computer_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="0"
android:textColor="@color/black"
android:textSize="20sp" />
</LinearLayout>
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="@+id/restart_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:backgroundTint="#ED7716"
android:text="Restart Game"
android:textColor="@color/white" />
</android.support.v7.widget.LinearLayoutCompat>
</android.support.v7.widget.LinearLayoutCompat>
 Â
After writing this much code our UI looks like this:
Â
Â
Step 3: Working with the MainActivity.kt file
Â
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.Â
Â
Kotlin
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.activity_main.view.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
restart_btn.setOnClickListener {
clear_score()
}
// when player click on scissor icon.
scissors_btn.setOnClickListener {
// set the image of user move to scissors
user_move_img.setImageDrawable(getResources().getDrawable(R.drawable.scissors));
// choose a random number between 1 to 3.
val computer_move = (1..4).random() // 4 is not included.
// 1 denotes "Rock"
// if value of computer move is 1 it means computer has chosen Rock
// 2 denotes "Paper"
// if value of computer move is 2 it means computer has chosen paper
// 3 denotes "Scissors"
// if value of computer move is 1 it means computer has chosen Scissors
if (computer_move == 1) {
// set the image of computer move to rock
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.rock));
// rock beats scissors.
winner_tv.text = "Computer has won"
// increase the computer score
val cscore: Int = computer_score.text.toString().toInt() + 1
computer_score.text = cscore.toString()
} else if (computer_move == 2) {
// set the image of computer move to paper
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.paper));
// scissors beats paper
winner_tv.text = "Player has won"
// increase the player score
val pscore: Int = player_score.text.toString().toInt() + 1
player_score.text = pscore.toString()
} else {
// set the image of computer move to scissors
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.scissors));
// both user move and computer move are "scissors"
winner_tv.text = "Draw"
}
}
// when player clicks on paper icon
paper_btn.setOnClickListener {
// set the image of player move to paper
user_move_img.setImageDrawable(getResources().getDrawable(R.drawable.paper));
val computer_move = (1..4).random()
// 1 denotes "Rock"
// if value of computer move is 1 it means computer has chosen Rock
// 2 denotes "Paper"
// if value of computer move is 2 it means computer has chosen paper
// 3 denotes "Scissors"
// if value of computer move is 1 it means computer has chosen Scissors
if (computer_move == 1) {
// set the image of computer move to rock
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.rock));
// paper beats rock
winner_tv.text = "Player has won"
// increase count of player score
val pscore: Int = player_score.text.toString().toInt() + 1
player_score.text = pscore.toString()
}
else if (computer_move == 2) {
// set the image of computer move to paper
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.paper));
// both user move and computer move are "paper"
winner_tv.text = "Draw"
} else {
// set the image of computer move to scissors
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.scissors));
// scissors beats paper
winner_tv.text = "Computer has won"
// increase the computer score
val cscore: Int = computer_score.text.toString().toInt() + 1
computer_score.text = cscore.toString()
}
}
// when player click on rock icon.
rock_btn.setOnClickListener {
// set the image of user move to rock
user_move_img.setImageDrawable(getResources().getDrawable(R.drawable.rock));
val computer_move = (1..4).random()
// 1 denotes "Rock"
// if value of computer move is 1 it means computer has chosen Rock
// 2 denotes "Paper"
// if value of computer move is 2 it means computer has chosen paper
// 3 denotes "Scissors"
// if value of computer move is 1 it means computer has chosen Scissors
if (computer_move == 1) {
// set the image of computer move to rock
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.rock));
// both user and computer moves are rock
winner_tv.text = "Draw"
} else if (computer_move == 2) {
// set the image of computer move to paper
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.paper));
// paper beats rock
winner_tv.text = "Computer has won"
// increase the computer score
val cscore: Int = computer_score.text.toString().toInt() + 1
computer_score.text = cscore.toString()
} else {
// set the image of computer move to scissors
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.scissors));
// rock beats scissors
winner_tv.text = "Player has won"
// increase the count of player
val pscore: Int = player_score.text.toString().toInt() + 1
player_score.text = pscore.toString()
}
}
}
private fun clear_score() {
// set the computer and player score to 0
computer_score.text = "0"
player_score.text = "0"
winner_tv.text = ""
// set the images of computer move and user move to "Question mark image".
user_move_img.setImageDrawable(getResources().getDrawable(R.drawable.question_mark));
computer_move_img.setImageDrawable(getResources().getDrawable(R.drawable.question_mark));
}
}
 Â
Output: Now run your app and see the output of the app.
Â
Â
Get the complete Project from here.
Â