How to Build a Rock Paper Scissor Game in Android Studio?

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.