Hello everyone, here we are again. So, we're going to continue to develop our math game application. So, in the last video, we created a new project. So, now we're going to develop this application from the beginning. So, I'm going to click on this eye icon select 'Show System UI'  and this will show me how my design is going to look on the real phone. Alright. I've got to delete the text view here. Alright, so let's get started with designing the first page and that means category page. So, I want color matching between the application and the toolbar. So because of this, I will change the toolbar color. I'll change the toolbar color from the theme.xml and I'll open up the theme.html page under the values folder.

Now, these two color codes define the color of these two parts of the phone. Right? I'm not going to use these colors. I will define a new color for all activities. Now, I've prepared the color code before. So, I'm just going to use these codes if you want to, you can search around android.xml color code, select other colors if you want to and use them. So, first I'm going to open the colors.xml file, copy this line and paste it three times. Now, the name of the first color is going to be green. Alright. So, I'll just copy the first color code and paste it here. And the first color is ready. The name is second color is going to be blue and copy the second color code, paste it in here. Alright, so the third color is going to be ice blue and I'll just copy the last color code and paste it in here. Alright, so now the colors that we're going to use are ready. So, I'll come back in here to the themes.xml file and I'll just change these two colors select the green color. Alright, so you see how the toolbar color, the application changes. Well, if I go to the main activity, you can see the difference. Right? So, this part changes. Now after that, I want to add three pictures to the draw both folder. I'll use these pictures as a background image. I prepared some images beforehand. You can use any image that you want but I will share with you the images that I made just so that we can remain connected like that. Right?

So, I'm going to copy these three images and paste them into the drama folder. Now, these three pictures are in the project just like that. I can use them. Now, there will be three activities in this project. So, I will use the three images for each of the activities. I'm going to open up these images for you and you can see that the use will be the background images. Alright, so let's continue with our first page. I want to go to the xml page and delete the constraint layout. I will write linear layout instead of that and I will change the orientation of the linear layout to vertical. I'll go back to the design page. I want to select the first image for the background and then I will add three buttons here. I'll select all three of them. Just by pressing the control key on a keyboard and change the layout with of these buttons to 250dp. The layout height of the buttons can be 75 DP. And I will give some space between these buttons. So, I'll go to the layout margin section and write 20 DP into the layout margin top.

So, now I need to place these buttons in the center so just select linear layout, go to the gravity property and then I'll select center horizontal. And also, I do want to give some more space to that first button. So, I'll select the first button and go to the layout margin. And from here, I can change the layout margin-top from 20 DP to 75 DP. And then after that I'll change the text of these buttons. Alright. So, the first button, I'm going to write addition, second button I'll write subtraction, third button multiplication.

So, I want to increase the text size of the buttons. I want to make it 20 sp. Alright, so once that's done, I'll give some ideas to these buttons. First Button, I'm going to right button add, second Button. Alright, button and for the 3rd Button. Well, how about button multi. Now, when I click on the addition button, the addition game page will open. So, I'll need to create this page first. And for that we just create a new activity, select new activity. Empty activity. Name of the activity can be game activity. And the other part here stay the same. So I'll click on finish and see how android studio creates a game activity. So, I'm going to design this space later. But when I click on addition, the game page should open. So I need to do that. But wait, I gave this game activity name called game, right? But actually you'll need to create three activities for this game, right? One for addition, one for subtraction, one for multiplication.

Now, sure you can name it whatever you want. For instance, game edition, game subtraction, game multiplication. Just so that you can tell each of them apart. Because if the user clicks on the subtraction button, the game subtraction needs to open. Right? The user clicks on multiplication button. The game multiplication needs to open. So, I'll close the game activity. I want to design it later. Right now, I'll go to the main activity.kt file and I'll need to define these buttons on the colon page. So, for the addition button, lateinit var_addition : Button, for this subtraction button, lateinit var_subtraction : Button. And for the multiplication button, lateinnit var_multi : Button. Alright, so then in the on create function, I'm going to write addition = findViewById(R.id.buttonAdd) and subtraction = fineViewById(R.id.buttonSub). multi = findViewById(R.id.buttonMulti).

Alright, so after that's done, I will add a quick listener to these three buttons and addition.setOnClickListener and inside curly braces, create an intent to open another activity val intent = intent. The intent Class will take two parameters. First one is this at main activity. The second one is game activity double colon class.java then start activity intent. Alright. So, now if I click on this button, the second activity will open. Right? So, also I need to define the main activity as the parent activity of the second activity. So, for this I'll open up the manifest file inside the tags of the second activity. I write parent, select the parent activity name and click enter. So, here I select the main activity. Right? Alright, so everything is ready for the first page. Why don't we just run the application and see how well it works. So, it opens.

First page is ready click on the addition button. And sure enough. The second page opens, cool. Alright, so obviously we don't have a second page yet. So, it looks like we actually haven't designed it. Okay, so that's cool. I'll just click on the back icon here and there you go, so that works and I'll click the addition button once again. Second page is open so far so good. So, why don't we take a quick break here if you want to and we'll design this page in the next video. Alright, I'll see you then.