Hello, and welcome to the start of our mini-project. By the end of this completed project we'll have a working Tic Tac Toe game. And we'll split this up into three phases. In phase one, we'll get a layout working where we can tap on a slot on our game board and have a display, a cross or a circle. Then in the second phase we'll learn some Kotlin specifically related to the game implementation, which is going to introduce you to compound data structures, like Arrays and how to loop through or iterate through them. And then in the last phase to finish off the game, we'll take what we learned and apply it back to our game and implement the gaming engine logic. So, let's get started. 

Here we go back in Android studio. By the end of this video, we'll try to get our layout to look something like this. As the first step, basically set up with board with some crosses displaying on each of the nine slots. All right, so first let's start a new project and we'll call it Tic Tac Toe Demo. So, I'll go to File, New, New Project, Empty Activity. Next... I'll call it Tic Tac Toe Demo. All of this is good, Finish. Okay, here we go. Let's quickly set up a view binding. So, I'll go to Gradle Scripts and then module and right here I'm going to say buildFeatures, open close curly brace and here viewBinding true. Let's sync this. Great, that's done. I'm going to close out of this and back here in my main activity. Let's set up the binding. 

When I first say private lateinit Var binding: ActivityMainBinding right there you enter and if I expand this you see there we go. ActivityMainBinding, want to minimize this. All right. And now that I have my variable, I'm going to make some space here binding= ActivityMainBinding.inflate and then, layoutInflater And then, right here,  setContentView(binding.root). All right, so we're set with view binding. And next, I'm going to get the three images that we're going to be working with an image of the board, an image of a cross and an image of a circle. And these three images will be attached to the resources of this video. But if you want, you can do a Google search of Tic Tac Toe board, circle, and cross and you should be able to get them yourself as well. But the ones I will be using here will be attached to the resources of this video. 

So, under resources there is drawable, and I'll paste the images here. And here are my three images board, circle, and cross. I can drag these in here but I'll just do command 'C'. And then back here in my drawable folder, command 'V' will ask me to verify. Okay, that's good. drawable, Refactor. Great, I have my three images. Now let's pull up the layout right here. And I will minimize my project view, zoom in a little bit. Okay, I'll get rid of this Hello World. And one thing here is I'll set my emulator and this layout editor view to have the same phone. So, I have pixel 4 API 30. So, here I will actually select pixel 4, right here, so that I get better sync between the two. All right. And you will notice that I got rid of the Blueprint. 

So, I only have the Design tab open. Okay. Now I'll drag an image view into my layout, so right here. And I will select the board. Okay. And I will move this to the top, right here. Okay, let's add some constraints. And I want to pin this to the top depending on the size of your board and where you want it placed. This would be different for you or if you use this, you can pin it to the top and to the side as well. I want to use no margins at all. So, zero on the left, zero on top, and zero on the right. Great. And at this point, if you see here, there is an informational caution right here. Image without contentDescription. Usually, when you work with images, you'd want to add contentDescription to them. This is so you can have a textual description of the widgets such that screen readers and other accessibility tools can adequately describe the user interface. 

This is optional at this time for you but I'll show you how to do it for this and then you can probably do it for the buttons. Now here what I can do is look for contentDescription and you see it pops up but if I hard code a string here, it will give me another cautionary flag over here. So, the proper way to do it, we've done this before is go to Project and then under values, strings, here, Open editor and add in a key of main_board _layout and default value tic_tac_toe_board. Okay. The key is main_board_layout. So, I'm going to go back to activity_main and close this. All right. So, now contentDescription right here, I can look for what I have, you see main_board_layout pops up so I'll select this. Okay? And you see that caution flag is gone. Great. Now let's quickly run this and make sure this looks good while they play. All right. Looks like everything worked. Let's pull up our emulator. There it is. 

Tic Tac toe demo and there's our board. Looking good so far. Now for the individual slots and there are a few ways of doing this. For example, you could drag in and set up buttons here, but I'm going to use the images themselves. So, I'll bring in an imageView and try to position my cross on the top left here to get started. So, I'll drag in an image view right here. Okay. And this one, you see right here, tic_tac_toe_X. All right, now let's resize this to fit the size of the grid. Okay, now I'm going to add constraints and I want to constraint this to the left of this imageView and the top as well. So, it's a certain distance from the left at all times and the top. So, let's try it from here. What happens when I hit this? Check it out. It went all the way to the right, and I can mess around here and try to play with the layout constraints and find the individual things or I can pull up my code and do it significantly easier from here. 

So, right here, imageView. I'm going to call this imageView1, because I believe the main_board is just imageView, so that works. And then right here, this is the constraint that got added: constraintStart_ toEndOf imageView. Okay, so it took this image and it added my cross to the end of this, right? Start of the cross to the end of this, that's why it's all the way to the right. What I'm going to do is change it to start to the start off. So, it will bring it back here to the start of my imageView. Let's try that. And I will code this, so we get a nice idea of how to do this pretty efficiently. We'll get rid of this. All right. I'll start typing in start and you see, Start_ toStartOf shows up. I'm going to select this and then I have all these options. imageView1 is my image; imageView is my board. So, I'll constrain it to that. Parent is the ConstraintLayout. I don't want to do that. I want it to be linked to the board itself. So right here. 

Okay, so now I'm constrained to the start of the board. Next, I want to be constrained on top as well. So, it's a certain distance from the top of my board. And if you look at my board, my board actually extends beyond this grid right here. If your board ends up right here, like at the end of the board, then your numbers will be slightly different. But if you use this image then it'll look like this as well. So, I'll go back here, go to the next line. All right. And then, I'm going to start typing in Top. So, top to the top of, meaning, I'm going to pin the top of my image to the top of the board right here. Okay? So, it goes all the way to the top. But now I have these two constraints, which means I can add margins for both of them. So, let's start with margin on top. All right. Since that's the most visible right now. So, I'll start typing margin and you see marginTop pops up. So marginTop, let's try 100 dp. Okay, it's almost in the right slot. I'll give it some more. 105, nope 108. Much better. 

So, 108 works. And on the left, you see, margin start, I already have 1dp. I'm going to increase this a little bit to move it to the right. Just a little bit. I'll make it two. Okay, much better. And if you were curious how we were going to change this image later on, you see we have the image source right here, the name tic_tac_toe_x and we have the image as X. If I change it to O right here, which is the name of my circle, there you go; circle pops up, okay? Go back to X. Alright, so now my image is constrained on the side and on top, that's a good start. Now I'm going to copy-paste this instead of dragging more ones in here and sizing them this way, I'll simply copy-paste this and adjust the margins and the constraints. But one thing I will say is eventually we would want to click on this, right? We want to tap on it.

So, I'm going to add an onClick attribute for this image right away, so onClick. And once clicked, I want it to call a dropIn function or dropIn method. And I don't have this defined. That's why it's going to be in red. So, let's quickly go ahead and add this in our main activity right here. I'm going to create a new function. So, fun dropIn and I'll be working with a view parameter of type view. There you go. Let's import that. All right. And then I'll open closed curly brace. So, this function is ready to go, which means back here this should no longer be red. Great. So, there's my first slot. So, what I'm going to do is minimize this. All right, so there it is and I'm going to say 'Cmd+C' to copy this slot or this image and then paste it twice below it, okay? 

So, now I have three images; one on top of the other. All right. I'm trying to basically get them to line up next to each other, so let's start with the second one. First of all, I'm going to change this ID to imageView2. And then marginStart. So, on the left I have 2dp. Let's move it to the right. So, I'll make this 132, 132. What happens then? You see it moves to the right, okay? How about 130? Looks slightly better. So, now this second cross is constrained on the left to my board. Now, you can do this to the board or you can constrain it to the first ImageView. I'll leave it constrained to the board for my start to the startOf. And on top 108dp, which is what we had for the first one; still it works. onClick function is still good. And right here, ImageView start to the startOf, which is my board, that's okay. And top all good. Similarly, I'll do it for the third one. This one I'll say imageView3. 

So, since the width is 128 and I move this 130, let's make it 260 and see what happens; 260. There we go. Well, maybe a little bit to the left. I'll leave it as 258. Okay, looking good. All this is alright. And again constrained to the top and to the left of the board. So, now that we have these three, what I'm going to do is minimize these three, okay? And then I will copy these 'Cmd+C and then 'Cmd+V' to paste three more. And let's start with the first one I just pasted. So, this is going to be the image here, the slot. So, I'm going to make this four. And marginStart is fine because it will be to the left of our grid. But the marginTop 108. And you see that the height is 126. So, 108 plus 126, if I wanted to start right at the bottom would be 234. So, let's try 234 to start and see if that works. There you go; perfectly positioned. Maybe one more 235. Okay, that's looking better. So, I'll leave it at 235 and all this is good, constrained to the grid. Next one. 

So, this one is five marginStart is good, marginTop: I'll make it 235. There you go. Falls neatly into place. Similarly, for the last one ImageView6, 235. Okay, now a quick project for you following this process with which we created the first and the second rows, go ahead and fill in the third row of crosses. It should be fairly simple since we just did it for the second. So, go ahead, take a shot and I'll see you in a bit. All right, welcome back. Hope you managed that. Here are the three additional crosses that I've added. So, I copied the previous row, the previous three and I just pasted them. I changed the ID to seven, eight, and nine and I changed marginTop to be 362. All right, so this is what it looks like. So, let's quickly run this and make sure it's looking good. Alright, looks like it succeeded. Let's pull it up. There we go, looking good. Excellent. Now, one more project for you before we end this video. 

So, if I go to my design, you'll see for all of these image views, I have these content description, caution flags. So, this is an optional project similar to how we took care of this for the board ImageView. I'll walk you through doing the first one and fill it in for the other ones if you choose to. If you don't, that's fine as well. So, back here, I'm going to pull up my strings. Right here, I'll open Editor and I will add one. And this will be for my first slot to the top left. So, I'll say top left, Default Value: top_left_slot, okay? And then back here, I can do this from here from my attributes like I did before or I can go to the SplitView, go to my first image right here, my ImageView. And here I'll say content description and you see all these options pop up. So, the bottom you see string top left, which I just added. There you go. Now, if I go back to my DesignView, well, I just added this so I don't know why this is showing up. Let's see maybe it didn't take effect yet. 

Let's go back to our imageView, string/top_left. That should be working. When you click somewhere else. For some reason it didn't update here as yet. Let me look for content description. You see it has top left. So, it's just a matter of refreshing. So, I'm just going to leave it as that. Okay, so using this, there you go. It worked. All right, now it's gone. So, using this method you can add the rest of the content description. For example, this slot would be top_middle, top_right, middle_left, middle_middle, middle_right, and so on. All right, so that does it for this video. We got our general board set up and are able to have crosses or circles, which you saw earlier simply by changing the image source in any of our nine slots. And we'll leave it here for now. And in the next video, we'll start playing with the clicks or the taps and go from there. See you soon.