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:
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 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]); } }); }} |
