In this article, we will be building a Dice Game Project using Java and XML in Android. The Dice Game is based on a two-player game. Both players roll the dice and the player who gets the highest phase value will win the game. There will be a single activity in this application. This activity will show the two player’s name and their dice. The result will be displayed on the top and there will be a roll button at the bottom. A sample GIF 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: Before going to the coding section first you have to do some pre-task
- Dice Images: All the dice images are listed below. Save them in your drawable folder in resources. Go to the app > res > drawable and paste the following files:
- 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="gradStop">#0F9D58</color> <color name="white">#FFFFFF</color></resources> |
- background.xml file:
XML
<?xml version="1.0" encoding="utf-8"?> <item> <shape> <gradient android:angle="90" android:startColor="#0E5131" android:endColor="#0F9D58" android:type="linear"/> </shape> </item></selector> |
- btn_bg.xml file:
XML
<shape android:shape="rectangle"> <corners android:topLeftRadius="20dp" android:topRightRadius="20dp" android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp"/> <stroke android:color="@color/white" android:width="2dp"/> <solid android:color="#022127"/> </shape> |
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 game result. Then it contains two ImageView, each with a TextView for the Player name and the image of the rolled dice. At the bottom of the activity, there is a Button to roll the dice. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" android:padding="20dp"> <TextView android:id="@+id/tvVar2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginBottom="40dp" android:fontFamily="sans-serif-black" android:gravity="center" android:text="GFG | Android" android:textSize="40dp" android:textStyle="bold" /> <TextView android:id="@+id/tvVar1" android:layout_width="match_parent" android:layout_height="60dp" android:layout_below="@+id/tvVar2" android:fontFamily="sans-serif-smallcaps" android:gravity="center" android:text="WINNER : Player 1" android:textAlignment="center" android:textColor="@color/white" android:textSize="35dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/tvVar1" android:layout_marginTop="40dp" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="50dp" android:layout_gravity="center" android:layout_marginBottom="40dp" android:orientation="horizontal"> <TextView android:layout_width="140dp" android:layout_height="50dp" android:layout_gravity="center" android:gravity="center" android:padding="10dp" android:text="Player 1" android:textAlignment="center" android:textColor="#000000" android:textSize="25dp" /> <TextView android:layout_width="140dp" android:layout_height="50dp" android:layout_gravity="center" android:gravity="center" android:padding="10dp" android:text="Player 2" android:textAlignment="center" android:textColor="#000000" android:textSize="25dp" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="horizontal"> <ImageView android:id="@+id/ivVar1" android:layout_width="140dp" android:layout_height="140dp" android:padding="10dp" android:src="@drawable/dice6" /> <ImageView android:id="@+id/ivVar2" android:layout_width="140dp" android:layout_height="140dp" android:padding="10dp" android:src="@drawable/dice6" /> </LinearLayout> <Button android:id="@+id/btVar1" android:layout_width="wrap_content" android:layout_height="65dp" android:layout_gravity="center" android:layout_marginTop="60dp" android:background="@drawable/btn_bg" android:gravity="center" android:padding="12dp" android:text="Roll the Dice" android:textAlignment="center" android:textColor="#ffffff" android:textSize="30dp" /> </LinearLayout> </RelativeLayout> |
Step 4: Working with the MainActivity.java file
We will create an array inside the Java file that will contain all the images of the dice. Then we will call onClickListener() for the button and generate two random numbers using the Random function. Then we will check the two numbers and display the result respectively. Also, we will set the two images from the array. 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.widget.Button;import android.widget.ImageView;import android.widget.TextView; import androidx.appcompat.app.AppCompatActivity; import java.util.Random; public class MainActivity extends AppCompatActivity { public static Button button; public static TextView textView; public static ImageView img1, img2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // array to store dice images final int dice[] = {R.drawable.dice1, R.drawable.dice2, R.drawable.dice3, R.drawable.dice4, R.drawable.dice5, R.drawable.dice6}; // linking the roll button from its id.. button = findViewById(R.id.btVar1); // linking the result textview from its id.. textView = findViewById(R.id.tvVar1); // linking both the imageView of // the dice images from its id.. img1 = findViewById(R.id.ivVar1); img2 = findViewById(R.id.ivVar2); // call the on click function button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // generate two random numbers // using Random function Random random = new Random(); int num1 = random.nextInt(6); Random random1 = new Random(); int num2 = random.nextInt(6); // the bigger number will be displayed in the // textView as the winner otherwise draw.. if (num1 > num2) { textView.setText("WINNER : Player 1"); } else if (num2 > num1) { textView.setText("WINNER : Player 2"); } else { textView.setText("RESULT : Draw"); } // set the images from the array by the index // position of the numbers generated img1.setImageResource(dice[num1]); img2.setImageResource(dice[num2]); } }); }} |
