1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Building a Math Game App on Android

Math Game - Part 3

Contents

keyboard_tab
Building a Math Game App
1
Math Game - Part 1
PREVIEW7m 14s
2
Math Game - Part 2
PREVIEW10m 5s

The course is part of this learning path

Start course
Overview
Difficulty
Intermediate
Duration
1h 24m
Students
2
Description

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.

Learning Objectives

  • Learn how to use Kotlin and Android development tools to build your own app

Intended Audience

This course is intended for anyone who wants to learn how to start building their own apps on Android.

Prerequisites

To get the most out of this course, you should have some basic knowledge of the fundamentals of Android.

Resources

Course GitHub repos:

Transcript

Hello everyone. So, we will continue to develop our Math Game application. The last video, we finished the first page. Now, we want to develop a second page. So, this is the Game Page, right?

So, we're going to design this page right now in this video. So, on the first line, we have the score, the life, and the time and on the second line, we have the question text where we're going to ask questions to the user in this TextView. See so, on the third line there is an EditText, the user will write the answer in the text here. So, the last line is going to be two buttons, and these are OK and Next, alright. So, let's get to it. Let's go to Android Studio. So, I want to first open the game activity.kt file and Activity Game .xml file. Also, we can close the main activity and its xml file.

So now, we can start the design. I want to go to the xml page and change the constraint layout to linear. Then, I will change its orientation to vertical and I will now change the background. So, I'll select the second image as a background image for this and I'll go to the design page. So, I want to add another Linear Layout and this time it will be horizontal. So, this will be the first line. I will add six TextViews under this horizontal layout. Three of the six are for labels; the other three are for the changing number such as time, score, and life. And I will change the text of the first TextView to be score, and I want to write zero into the text of the second TextView, and I'll write Life in the third TextView. So, I'm going to write 3 to the fourth TextView. I will give three lives to the user and what will I write for time to the fifth TextView? I'll just write time.

Okay, so the last one will be 60. So I'm going to give a minute or 60 seconds to the user to answer the question, alright. So, after all of that, I'll select these six TextViews. Press the Control key and I will change whatever are the common properties. We can change them all at once. So, I'll change the text color. Also, change the TextSize property, will make them all 16sp. I'm also going to change the layout margin property of the horizontal linear layout. So, I can make it 5dp. So, after that I will add one text for you and one number EditText under the vertical linear layout. So, I added the TextView but it doesn't appear because the layout height of the horizontal layout. Remember match_parent. So, I'll change it to wrap content. Now you can see it. So, I need to add the number EditText. So, now I have one TextView and one EditText. I will change the layout within the height of this TextView and it can be 300dp by 75dp. TextSize of the TextView can be bigger as well, it's like 24sp. And also, I need to place the text in the center so, I'll just select this TextView and go to gravity property. And I will check the center text box. There you go, now the text is center. Alright, so once that's done, I will select EditText. Then I will change the layout with an height of EditText. So, it can be 300dp by 75dp. Also, I'll change the textColor of the EditText of white as well

and you know what, I'll add a hint to this EditText. So, that way the user will know where to write the answer. And let's have the hint to be 'Write your answer here' and also I need to place this text in the center. Gosh, don't let that slip. So, I'll select this EditText and go to gravity property then, I'll check the center check box and that centers the text. Also, we can change the color of the hint. So for this, we'll use the text color hint property. And in the 'Search Bar' here, I'll write Color and the relevant property is right here. So, I'll change this color to white. Now, also will increase the textSize of the EditText a little bit. I think 20sp is ideal for the textSize of the EditText. I still don't believe that, okay good. So, change the background color of the TextView and the EditText. Choose these two components, choose a background property from the attributes section.

So, here I click on the Color tab, and here I'll choose the color blue. Alright so, now I need to give some space between the TextView and the EditText, and I'll select the TextView and go to the layout margin. So here, I'll write 20dp to layout_marginTop. Select EditText and write 20dp as well. Also, I want to change the textColor of the TextView to white. And after that, place these two components in the center. So, I'll select the vertical linear layout, go to grab, check the center_horizontal checkbox. Alright, so, two components are in the center horizontally now. So, the user will write the answer just right here. So, after that I need to add two buttons. I'll add another LinearLayout, it'll be the horizontal layout. I'll add two buttons under this layout. Okay so, once that's there, I'll change the background color of these buttons but I will create a new shape for the buttons. So, this I've got to create a new xml file in the drawable folder. All right, click on the drawable folder and select New Drawable Resource File and the name of the file can be button_shape perhaps. Also, the root element will be the shape, not the selector. So, after this change I'll click the 'OK' button and as you can see the xml file is created. So, why don't we go ahead and create the shape.

So, the type of shape, I want it to be a rectangle. So, to find the color of the shape and for this I will use the solid tag. Inside the tags, I'll write the color and select the android:color. So, the color of the shape will be white. I also want to create a frame stroke for the button so for this, I'll use the stroke tag. Inside the tags, I'll define the color of the stroke. So, the color of the stroke will be the blue that we defined in the color.xml file. Also, I wanted to find the width of this stroke. So, the width of the stroke will be 2dp. And then why don't we just give it some curves around the corners of the shape.

So for this, I'll use the corners tag and inside the tags I can use android:radius for a property and the value of the radius, I'm going to make it 10dp. Alright, so, that's the shape. Now, let's define this shape to the buttons. I'll open up the activity_game.xml. I'll select these two buttons and change the background property. So here, I will select the button_shape but the background of the buttons does not change because I have to change the background So, I will write @null here. Okay, so as you can see , shapes of the buttons are changed but since the textColor, the buttons is also white, the text of the buttons is not clearly visible. So, why don't we change the textColor of the buttons. And again, I'll choose the color blue as a textColor.

Okay, so far so good. So I need to give some space around these buttons. So, I go back to the Layout margin. Layout margin can be 10 dp. Now, I will change the layout margin top property of the horizontal linear layout. Now, margin top property can be 40dp. Also, I will change the layout height property of the horizontal linear layout to wrap_content. Okay, so, I will change the text of these buttons. First one will be OK. The second one will be NEXT. So, I want to increase the textSize of the buttons. I want to make it 20sp. And now I'm going to change the color of the action bar. So, of course, I need to create a new theme for this. So, I'll open the themes.xml file and I'll copy and paste the codes here once one time. And I have to change the name of this theme as well. So, here I'll write Game Page.

Also, I'll change the color of the primary color and the colorPrimaryVariant. Also liked blue for the action bar. Now I have to choose this theme from the design area so, I'll click here and there you go. You can now see the theme that I just created from here. So, I can now select theme.game page. Okay cool, so now, let's define this theme in the Manifest file. So, I have to open the Manifest file. I'll cut the line of code here and paste it between the tags of the GameActivity and the MainActivity.

Now, in addition the theme of the GameActivity will be the Theme.GamePage. So, that now completes the design of the GameActivity. Right? So, once all that's together, I need to give ids to these components. The id of the score TextView can be textViewScore. id of the life TexVIew can be textViewLife, Id of the time TextView can be textViewTime and the question TextView can be textViewQuestion, id of the answer EditText can be editTextAnswer. Now, the id of the OK button can be buttonOK, id of the next question button can be buttonNext. So, now the components all have id, so, they are ready. Now, we need to write Kotlin Code for the game. So, we've got to think about this for a little bit. For example, are you going to get the questions to come to the user?

How will the time come down from to 60? How will the score increase of the answer user's correct, if it's wrong, you know, these kinds of things, etc. So, we're not going to do that right now. We're going to do that in the next video. So, I want to see you then. Hang in there, see you on the other side.

 

About the Author
Students
86
Courses
23
Learning Paths
1

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.

Covered Topics