How to Build a Simple Magic 8 Ball App in Android?

In this article, we will be building a Magic 8 Ball App Project using Java and XML in Android. The application is based on a decision making application. In this app, a user can ask the ball what decision they should make. The ball will randomly answer Yes, No, Not Sure, and other such answers. There will be a single activity in this application. A sample GIF is given below to get an idea about what we are going to do in this article. 

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

Ball Images: All the ball images are listed below. Save them in your drawable folder in resources. Go to the app > res > drawable and paste the following files:

• Ball 1
• Ball 2
• Ball 3
• Ball 4
• Ball 5

Change the style to NoActionBar in the themes.xml file: 

<style name=”AppTheme” parent=”Theme.AppCompat.NoActionBar”>

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 display the title. Then it contains an ImageView of the ball in the center of the activity. At last, we have a Button at the bottom of the activity for asking the application to make decisions. This is a single activity application. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0F9D58"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="3">

            <!--textview to display the title of the activity-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:text="Make everyday decisions easier!"
                android:textColor="#000000"
                android:textSize="25dp"
                android:textStyle="bold" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="2">

            <!--imageview to display the balls-->
            <ImageView
                android:id="@+id/image_eightBall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/ball1" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="2">

            <!--button to ask the app for decision-->
            <Button
                android:id="@+id/askButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="#3F51B5"
                android:text="Ask"
                android:textColor="#FFFFFF" />

        </RelativeLayout>

    </LinearLayout>

</RelativeLayout>

Step 4: Working with the MainActivity.java file

In the java file we will create an onClickListener() function for the ask button also we will create an array to store the id of all the images. Inside the onClickListener() we will generate a random number from 1-4 using the Random() function. After that, we will set the image from the array of random number’s position in the image view. 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 androidx.appcompat.app.AppCompatActivity;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // link all the variables with its id
        final ImageView imageView = (ImageView) findViewById(R.id.image_eightBall);
        Button button = (Button) findViewById(R.id.askButton);

        // create an array to store all the images
        final int a[] = {R.drawable.ball2, R.drawable.ball3, R.drawable.ball4, R.drawable.ball5};

        // ask button's onClick function
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // generate a number using Random() function
                Random random = new Random();
                int x = random.nextInt(4);

                // set the image to the view
                imageView.setImageResource(a[x]);
            }
        });
    }
}

Output: