Building a Math Game App
The course is part of this learning path
This is a highly practical course that walks you through how to create a simple math game for school children on Android. We will make use of the Kotlin components that we covered in the Android App Development with Kotlin learning path, bringing them all together in a real-world app.
- Learn how to use Kotlin and Android development tools to build your own app
This course is intended for anyone who wants to learn how to start building their own apps on Android.
To get the most out of this course, you should have some basic knowledge of the fundamentals of Android.
Course GitHub repos:
Well, hello everyone. We're going to continue to develop our math game application in this video. Last time we created the timer. So, we're going to develop the last part of the application in this video. If the user enters three wrong answers, well, we're going to define what's going to happen. Nope. It's not going to be the end of the world. Let's just open Android Studio. All right, so remember what we were saying, "What's going to happen after three wrong answers?" Well, let's open the app, click the addition button. So, I'm going to enter three wrong answers to the question to show you what will happen. All right, so wrong three times, now I have zero life. So, when the life goes down to zero, if I click on the next question button, the game shows a toast message. The message says "game over," also a new page opens. So, on this new page, the user can see the score and also two more buttons. First one of them is 'Play again'. And if the user clicks on the 'Play Again' button, guess what? The first page will open. Now, the second button is the Exit button. So, if the user clicks on the 'Exit' button, that's going to close up shop. Okay, so let's get started. First I want to create a new activity and I'll click 'File,' select 'New Activity,' Empty Activity. The name of this activity can be ResultActivity. And I will click 'Finish.' All right. So, after that, we'll need to design this space. So, I'll go to the XML page. I'll delete the ConstraintLayout and write LinearLayout. Also, the screen orientation, be vertical. And the background image of this layout will be... Remember we've got three pictures, so this will be the third one. Okay, so that's the background. Ready.
And after that's done, I'll design the score texts. So, let's see. There are two TextViews here. First one is the Label. And that's going to write "Congratulations" on the TextView. The second one is the score TextView and that will show the user's score. Now, I'll add two TextViews. The text of the first view will be "Congratulations." Color of the text can be black. The size of the text can be bigger. Let's go to 24sp. Also, the layout within this TextView will be wrap_content. All right, so now the text of the second TextView will be score 0 for now because this text will change after the game is over. So, the color of the text will be black. The size of the text can be 24sp.
Now, also the layout within this text should be wrap_content as well. All right, so now I just need to give some space between these TextViews. I'll select both of them, go to layout_margin property and find the layout_margin; top property to be 30dp. Okay, the gravity of the LinearLayout will be center_horizontal. Also, the textile of these TextViews can be bold. And then after that is done, I can add another LinearLayout. This will be horizontal LinearLayout. And I want to add two buttons under this horizontal layout. The layout_margin top property, the horizontal LinearLayout can be 100dp. Then, I will select these two buttons just by pressing the 'Ctrl' key. Then, layout_margin property of these two buttons will be 10dp.
Now, also the width of these buttons can be 200dp, all right? Good. So, I'll add the button shape that we created in the drawable folder to these buttons. And in the background property, I will select the button shaped background. Also, I should write @null into the backgroundTint field. The color of the texts will be blue. Also, the text size can be 20sp. Now we can change the text of the buttons. So, the first button I'll write "Play Again." And for the second button, I'll just write "Exit," all right? So, finally, in this activity I will not show the action bar to the user. So far, we have changed the color of the action bar for the category page and the game page. So, we learned how to use different themes for each activity, right? We also changed the title of the action bar and the game activity.
In this activity, I'll show you how to remove the action bar. So, that way you can learn all three of those methods when you're designing your application. So, what you do is, go to the project directory and I'll open the themes.xml file. And I can copy the thing that we created for the game page and just paste it here. So, first we'll change the name of this theme. Here I'll write "result." Now, let's change the color of the action bar and this time I will choose the color, "ice blue" because, well, this color is just more compatible with the background image that I added in the resultActivity. You'll see the method of my madness. All right, so let's remove the action bar. And to remove the action bar, I just choose no action bar from here.
Now, let's define this theme in the design area. So, from here, I'll select the result theme that I just created. And finally we'll define this theme in the manifest file. So, I'll open the manifest file, and I'm copying the theme here. Paste it between the tags of the ResultActivity. And I'm changing this to result as well. Cool, so that's it. Now, let's go back to the design area. And hey, wait. What happened to the action bar? It's gone. All right, so we finished the design of the resultActivity. So, finally, let's determine the ID of the components, right? So, ID of the Exit button can be Exit. ID of the Play Again button, guess what? Button again?
ID of the score TextView can be TextViewResult. All right, so we'll go to the Kotlin page and start to develop this page. First, I'll need to define these components: lateinnit var result: TextView. lateinnit var playAgain : Button. lateinnit var exit : Button. Then I'll continue to find these variables in the onCreate method: result = findViewById(R.id.textViewResult). playAgain = findViewById(R.id.buttonAgain). exit = findViewById(R.id.buttonExit). Then, add in some ClickListeners to the buttons: playAgain.setOnClickListener. And inside the curly braces, I'll create an Intent method: val intent = Intent. So, this Intent will take two parameters. The first one, is on which page this Intent will work; this@ResultActivity. The second one is, which page this Intent will open, so MainActivity::class.java. Then startActivity(intent). And also, I will call the finish method here. So, when this intent opens another page, this finish method will close this page.
This actually is quite important because when we pass using Intent from one activity to another activity, we should close the older activity. Otherwise, a lot of activities could stay open and that's not a good thing. When you close the last activity, the whole application will not close. The old activity will open, right? So, if the user closes the old activity too, this time another older activity will open and it will just continue like that forever. So, you got to prevent that problem by closing older activities using the finish method when you open new activities. All right. So, let's go ahead and add a clickListener to the exit button, exit.setOnClickListener. And here, we'll need to write the necessary codes to exit the application.
So, just using the finish () method here, does not close the application because, well, we'll use the finish() method in the game activity, but we will not use the finish () method in the main activity. Because that way, the user can just go to the main activity during the game and select a new category. So, main activity will always be on the back stack. If we just use the finish() method here, well, the result activity will close, and the main activity will open automatically. Therefore, we will use Intent again to exit the application here. And the intent is used for many functions not just for switching between activities. In addition, the codes that we will write here will be standard codes. So, let's just get to writing, right? So, here I am writing val intent = Intent(Intent. And of course, this time I'll write (Intent.ACTION_MAIN). Now, we will add a category to this intent, and I'm writing Intent.addCategory and I'll write (Intent.Catergory_Home) I will also define a new task flag for this intent, and I'm writing intent. flags = Intent.FLAG_ACTIVITY_NEW_TASK. All right, so now let's start the Intent. And I'm writing startActivity(intent). So, these codes are standard codes, like I said, used to close an application. So, now we can go to the game activity. All right,
so every wrong answer the user entered will reduce the user life -1, right? So, when the user life is zero, if the user clicks on the next question button, well, the game will be over, right? So, I need to go to the next question button, click 'Listener' then. Into the Clicklistener method, there are some operations. Also it's going to check the condition as well. So, if userlife == 0, it will do something else. It will do something else. So, if the userlife == 0, first it will show a toast message to the user. Toast.makeText(applicationContext, text: "Game Over", Toast.LENGTH_LONG).show(). Second, it will create an intent. val intent == Intent (packageContext: this@GameActivity, ResultActivity::class.java). Also we're going to need to send the user's score to the result page.
So, we'll do this using the put extra method: intent.putExtra( name:"score", userScore and this method takes two parameters. The first one is the keyword, so I'll write score as a keyword. Second one is the value that we're going to send. That, of course, is the user score. And then I'll write startActivity(intent). And also I'm going to call the finish() method. So, when the result activity opens, the game activity will be closed. And then after all that, we'll just write the else condition, else the game continued function will be called and the game will continue until life equals zero. All right. Now, we have now created intent. We've put in the extra method, but we did not take the score from the result page.
So, what are we going to do? Well, we need to take it on the result page. I will take the user score using intent and assign it a variable. So, I'll write val score = intent.getIntExtra. So, you remember if we want to take the energy value from another activity, we'll need to write keyword and default value. Keyword here will be score. Also the default value can be zero. So, then I need to write this integer score value on the result TextView when the result activity is open. So, result.text = "Your score: " + score variable. All right. So, everything is ready. You are ready? Are you ready? I'm ready, I know. So, let's run the application. So, the game opens. Let me click on the addition button that starts the game. Timer is still working.
Now, If I enter the wrong number and the question, my life will be reduced -1. Okay, so I'll click on the next question button. This time I want to enter the correct number. And when I enter the correct answer and click 'OK', see my score increases to 20, that's cool. So, I want to click on the next question button again. I'll enter the correct number. Again, and my score is now 20. Oh boy. All right, so I want to click on the next question again. So, I'll enter the wrong answer this time. I'll click on the 'OK' button and the timer stops. All right, so now my life is one. So, I'm going to click on the next question again, risk it all. When I click on the next question button, the timer resets. Cool.
So, I'll enter the wrong number again. Okay, now my life is zero and my score is 20. So, if I click on the next question again after my life is zero. When I click on the next question button, the result page is opened and the game doesn't continue anymore, it writes, "Hey, congratulations. Your score is 20." So, if I click on the 'Exit' button, the game is going to close, if I click on the 'Play again' button, the first page will open. So, I'll click on the 'Play again' button and there you go there. First page opens. That's cool. All right, so the game does look ready. So, what I want you to do is you got to do the same things for subtraction, multiplication, but I want to show you how to do it. Everything is the same. Just in the gameContinue() method, the real answer will equal number1 - number2 for the subtraction game. For multiplication, the real answer will be number1 * number2. That's it.
All right. So, go ahead, go through all that. And then if you want to, you can go ahead and prepare the game for publishing. In fact, you can even go ahead and develop this app further using a single activity for game activity. But it's not for me to tell you that. I just want you to do this. Figure it out. But I do want to give you the following tip. With the help of Intent, you will need to send some information to the game activity according to the category chosen by the user and according to this data: addition, subtraction, multiplication; that's what's going to be done. All right. What I'll do is I'll share the GitHub link of this application with you, and that way if you get stuck, you can check it from there. All right, my friends, congratulations, right? We have developed our second Android application with Kotlin. I hope you enjoyed as much as I do. It's been beneficial. I'm sure it's probably a lot to digest, but we'll take a short break here if you want to, and I'll see you in the next lesson.
Mehmet graduated from the Electrical & Electronics Engineering Department of the Turkish Military Academy in 2014 and then worked in the Turkish Armed Forces for four years. Later, he decided to become an instructor to share what he knew about programming with his students. He’s currently an Android instructor, is married, and has a daughter.