Mystery Box Android App Using Kotlin (ImageView, TextView, and Button)

In this tutorial we’re gonna learn about the most common Android widgets (ImageView, TextView, and Button) by creating a simple Mystery Box application. Hmm, basically we’re just gonna show a single image, text, and button inside this app, simple isn’t it? Okay then let’s get started shall we.

What is Mystery Box?

Mystery Box is a box that contains unknown item. You won’t know what you get until you open it. Some may get a good item and some may not. It’s a funny box actually and we will create it inside our app here. As always, we’re gonna use Kotlin for this app.

Note: In this post I used Android Studio 3.2.1 so the appearance might or might not be similar like yours and it’s okay though, but make sure you use the latest Android Studio, or if you already install it, be sure to check the latest update. The Kotlin version that I used is Kotlin 1.3.11.

Getting Started

Open your Android Studio and choose Start a new Android Studio Project.

 

Give the Application Name MysteryBox and don’t forget to check the Include Kotlin Support checkbox. After that give the Activity Name MainActivity like always. Wait until the Android Studio finish preparing your project.

Before we start writing the code, I think it might be good that you understand the basic fundamental of Android widget that we are gonna use for this app.

ImageView

ImageView is an Android widget that used to display image or picture. You can display image from file, drawable, or even image online.

TextView

TextView is an Android widget that used to display text such as label, description, etc.

Button

Button is an Android widget that used to handle user feedback like tapping or pressing to perform an action.

 

Okay let’s do the next step. I have some assets that will be used for this app and you have to download it from:

Download Assets

 

Copying Drawable and Mipmap Assets

After you download my assets, unzip it and you’ll get list of folder like this:

 

Inside of each drawable folder contains image files that we will use for our app. While inside of each mipmap folder is our app launcher icons. Now head back to our app and go to res/drawable and res/mipmap folder and expand both of it. You will see default icons and image files from your app, these files are generated by Android Studio when you first created your app.

 

Delete those default files because we’re gonna use our own assets that you have downloaded.

 

If you encounter a dialog above just click the Delete Anyway button. The next step is copy all of drawable and mipmap folder from our assets like this:

 

Paste it on out project application in the res folder like this:

 

After you click Paste button, it will display the dialog like this and just click OK to continue.

 

If you do these steps correctly, your res folder will be updated like this similar like mine.

 

Create the Layout

Open the activity_main.xml inside res/layout folder and replace the code with this code. We’re gonna use single ImageView, TextView, and Button inside our layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       android:layout_centerInParent="true"
       android:gravity="center_horizontal"
       android:paddingLeft="20dp"
       android:paddingRight="20dp">

       <ImageView
           android:id="@+id/ivImagePresent"
           android:layout_width="150dp"
           android:layout_height="150dp"
           android:src="@drawable/mysterybox"
           />

       <TextView
           android:id="@+id/tvPresent"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginTop="18dp"
           android:textColor="#4a4a4a"
           android:textSize="18sp"
           android:textStyle="bold"
           android:text="Open the box to get your present"/>

       <Button
           android:id="@+id/btOpenBox"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_marginTop="18dp"
           android:background="#3890de"
           android:textColor="#ffffff"
           android:text="Open Box"/>

   </LinearLayout>

</RelativeLayout>

 

This layout is very simple and straightforward. The parent layout in this code I use RelativeLayout and inside it there is a LinearLayout to place our image, text, and button. I use the @drawable/mysterybox image asset for our ImageView (remember the asset that you downloaded before). We give identifier ivImagePresent for our ImageView, tvPresent for TextView, and btOpenBox for Button. These identifier or id will be used inside out Kotlin code.

You can run your app right now, it will display the layout that we write above but you still can do nothing about it when you tap the Open Box button. Hmm that’s right, we haven’t write code to handle the button press.

 

Write the Code

Now head to MainActivity.kt file and add this import codes:

import kotlinx.android.synthetic.main.activity_main.*
import kotlin.random.Random

 

Inside the onCreate() method add this codes:

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   // button tap action
   btOpenBox.setOnClickListener {
       openBox()
   }
}

 

The code above will give our Button to respond the user tapping or pressing the button. Add a new method inside MainActivity.kt:

private fun openBox() {
   // get a random number from 0 until 3
   val number = Random.nextInt(4)

   // check the number
   if (number == 0) {
       ivImagePresent.setImageResource(R.drawable.car)
       tvPresent.text = "Congratulation! You get an amazing car"
   } else if (number == 1) {
       ivImagePresent.setImageResource(R.drawable.motorcycle)
       tvPresent.text = "Congratulation! You get a motorcycle"
   } else if (number == 2) {
       ivImagePresent.setImageResource(R.drawable.money)
       tvPresent.text = "Congratulation! You get $100,000"
   } else if (number == 3) {
       ivImagePresent.setImageResource(R.drawable.house)
       tvPresent.text = "Congratulation! You get a dream house!"
   }
}

 

The logic for openBox() method here is simply getting a random number to get your present from Mystery Box. We have only four presents (car, motorcycle, money, and house), so we just write it with code Random.nextInt(4) to get a random number from 0 until 3.

If we get a random number 0 so we get a car, the app display the car image from our assets before and also display a text or message for user like this “Congratulation! You get an amazing car”. The same goes with the other presents, if we get a random number 1, we get a motorcycle, and so on.

Up to this point you can run your app again and it will work properly. When you tap the button it will open your prize.

 

But our work here is still not done yet. When you open the box for the second, third times and so on, it will display your present directly without going back to display the mystery box image like the first time. So we will add the reset state of this game.

Adding Reset State

Whenever user get the present, we have to change the text of our Button to “Play Again” and when user click Play Again button, the app will display the first state when user haven’t opened the box for the first time, does this make sense to you?

Add variable declaration like this inside MainActivity.kt:

var isBoxOpened: Boolean = false

 

Add these codes in the end of our openBox() method:

private fun openBox() {

   .
   .
   .

   // change to play again button
   btOpenBox.text = "Play Again"
   isBoxOpened = true
}

 

The above code will give a state to our app that after user tap Open Box and get the present, it will set isBoxOpened to true and change the text of our Button to “Play Again”.

After that add a new method resetBox():

private fun resetBox() {
   ivImagePresent.setImageResource(R.drawable.mysterybox)
   tvPresent.text = "Open the box again to get your present"
   btOpenBox.text = "Open Box"
   isBoxOpened = false
}

 

Modify our btOpenBox.setOnClickListener like this:

btOpenBox.setOnClickListener {
   if (isBoxOpened == true) {
       resetBox()
   } else {
       openBox()
   }
}

 

So the logic will be like this, if the isBoxOpened is true, it will call resetBox() method to display mystery box image, reset the text to “Open the box again to get your present”, and change the Button text to “Open Box”, and finally set the isBoxOpened back to false so user can open the box again.

Hufftt, finally this is the end of our work here, the app can now work properly, thanks to you! Congratulation for your hard work to get here! You can run the app and play the game.

Where to go next?

You can download this entire code from my github repo here as I will try to put each of my tutorials there. In the next post I’m gonna talk about Android RecyclerView Tutorial using Kotlin so stay tuned. Be sure to check my other interesting post here about Get to Know about Android Activity. Hope you like my post and share it with love!