Hello and welcome back, carrying on from where we left off in the last video with our layout setup now complete. Next step is to start off with an empty board and make a cross or a circle appear when a slot is tapped. And we're going to add some animation and drop in a cross or a circle from above the phone screen, all right? And to recap the image view right here, each of these slots, we have these image views, the image is this part right here, app: srcCompat=@drawable this is referring to the image. So, if I take one of these, and if I change the image right here from X to O, which is a circle, you see the image for that slot changes to a circle.

And if I remove it completely, so I will comment this out, and the way you comment out XML is left angle bracket, exclamation mark, and then two dashes. And then this comments everything out below it, so I'm going to have to close this comment tag. So, to do that at the end of it, I'm going to go and do two dashes and a right-angle bracket. Once I do that, this line is commented out, and you see this slot is empty. So, I'm going to uncomment this. So, back to where we started, what we want is when a user taps on a slot, we want the cross or circle to drop in from the top and settle in this slot. So, if it's tapped here, then we want the image to drop in and settle in this slot and so on.

And we already have an on-click attribute set for all of our image views. So, right here, if you look at them, we had named it drop-in, there is the on-click drop-in, and in my main activity, I have the drop-in method currently does nothing. So, first we'll need to be able to refer to the specific view that we are working with. So, right here, if it was this image that was tapped or this one then this specific view we need to be working with, and luckily for us this is being passed into the method based on the fact that has been tapped, which made the method call. So, right here, this view it's getting passed in as a parameter in this method, so we have access to that. But make note that this view is off type view; this is not an image view. So, if we're going to use it as an image view, which this is, then we're going to need to cast it to an image view.

So, first, we'll refer to this view with a variable. We'll say val, and we'll call it slot image, and we'll set it to view, but remember, we want this to be an image view, so to cast a view as an image view, all we have to do is say, as ImageView. And you see the image view android widget line pops up, so I'm going to hit 'Enter' to import the specific package right here, the widget image view that's now imported. So, now this variable slot image we have here is of type image view, and we can use all of its attributes and methods. So, let's start with starting of the image outside of the screen on top. So, I'll say, 'slotImage,' and if you remember, we can use translation Y for this. Since we're going to put it on top, so we'll say translation Y, and we'll set it to -2000, and we have to put the F in there to indicate floating-point number.

And so now this is going to start way out on top over here, and then we'll need to set the image source of the image. So, let's go here. Let's pick one slot to start with, so we'll pick the top left one, the first image right there. So, over here, we'll pick this one to start with. So, I will simply get rid of this image from here. this line totally, so the image disappears. There you go, and once this is tapped, we wanted to drop in. So, here, we're going to start off the image above the screen. Then we're going to say slotImage. and we want to set the image, so setImageResource, and we select a circle to start, so R.drawable. and there you go, there is the image tic_tac_o_circle. So, now the image resource is set for that image view. 

Now, all we need to do is drop or animate it into place. So, we're going to say, slotImage.animate. And since we set it above by -2000, so we're going to do translationYBy 2000f. So that'll drop it down by 2000 to put it in the slot that it needs to be in, and then we'll add some rotation as well. To add some effects and 1800, and again this will expect a float right there, and we'll do it in half a second. So, set duration 500 milliseconds. All right, let's run it and see if it works. It looks like everything worked, I'll pull up my emulator. 

All right, so I'll tap on the slot, and a circle should drop in, there we go. And since all of the other image views here, they also have an on-click attribute, and it's set to call this drop-in method. If I tap on any one of them, even though it's not set to anything else, they should all work, and a circle should drop in and replace the existing image. So, let's see, there you go, there's a circle. There we go, and we can pretty much do it for the whole screen great. Perfect,

now the next step is we need alternating images, right. Since we'll have two players taking turns, it should be crossed and circled and crossed and circled, alternating images, and not like this where all of them are circles. And there are a couple of ways to do this. You can use Booleans, for example, but we'll do this using an integer. So, in my code right here, I'm going to declare an integer and call it active player. So, I'll just track the active player. So, I'll say var, and the value of this will change, that's why I'm going to say var, and then active player, and I'll set it to zero. And I'll put a comment over here. Let's say zero for a cross and one for circle. That way anyone reading my code will know what's going on with the zeros and ones. 

So, since I've set it to zero, I can check for the value of this variable and decide which image to drop in. So, right here, instead of simply dropping in a circle all the time, we're going to use an if condition over here, and we'll say if within parentheses activePlayer equals zero, then we will drop in a cross. So, I'll change this to X, and then close the curly brace, else I will copy this line command C, command V. Else, I know active player is not zero, then it's the next players turns, so it's going to be a circle. There you go,

and once this happens, we also want to set the active player. For example, if we dropin a cross, then I want to set active player to be equal to one since it's the next players turn, and then once it comes in to the next players turn , and a circle is dropped in, then we want to set active player back to zero, So, after a cross drops, the next player turns active players one. After a circle drops, next player turns to active player zero, and so on and so forth. All right, let's try it out. I'm going to run this. looks like everything worked okay. Let's pull it up, there we go. 

There's a cross, the circle, and let's do this. There's a cross, let's do this one, there's a circle, cross, circle, cross, circle, there you go, perfect. Now one last bit for this video instead of starting with crosses all over the board, let's start with empty slots. So, just like I did for this first slot right here for the other Image views, I'm going to remove the starting image to start. So, back here, for each of the image views, I'm going to remove the starting image.

Let's do the second one. Right here, I'll remove this. There you go, and the second one is gone. So, just like that, I'm going to do it for the rest of them. So, I'd recommend that you pause this video and take care of that yourself. But one thing I will caution you against is make sure that if the image source is the last line of your tag before the closing tag right here, make sure you don't get rid of the closing tag. If you accidentally delete it, then just put a closing tag in there as well. All right, I'm going to go ahead and take care of the rest, I'll see you in a sec. All right, welcome back. I hope you're able to take care of that without any issues. Let's now quickly run our app and do a final test. I'll pull it up. 

There we go, empty board, cross, circle, cross, circle, cross, circle, cross, circle, cross, perfect. Excellent, working perfectly. And that's where we're going to leave it for this video. We've covered a decent amount so far and got our app layouts and some basic functionality working. Next, we're going to dive into the gaming logic, and that will involve covering topics that will help with setting that app. Hope you're excited, and I'll see you in the next video.