Layouts and Animation
In this course, you'll start experimenting with XML code and diving deeper into layouts, namely linear and constraint layouts. We'll also look at animations and build a few fun features with them. Then, we'll take a deeper dive into the Kotlin programming language and constraint layouts, before building a fully functioning Tic-Tac-Toe game.
On top of that, we'll then build a second app which can play YouTube videos within it, and you'll learn how to work with APIs and API keys.
This course is intended for beginners to Android app development or anyone who wants to master coding in Kotlin.
Since this is a beginner-level course, there are no requirements, but any previous experience with coding would be beneficial.
Hello and welcome back. In this video we'll take a look at using what we've learned about arrays our list so far, and simulating, attract game state in our Tic Tac Toe app. But before we do that, I wanted to show you one other way of iterating through a collection, like a list using a method. And that's the for each method, let's quickly take a look at this. Back to my playground over here. I'll use our names list from up here and iterate through each of the elements. So, what I'll do is use the name. of my list which is names. and I'll say forEach, and then open and close curly braces for our code block. Whoops, something else popped up in there. Let's see, let's try that again and here we go, here's our code block.
Now, I can iterate through all of these items and execute some code over here. Now, you may be wondering wait a second, where is the variable name with which we can refer to each of the elements as we iterate through the list? Well, forEach gives you the special keyboard and it's called it which you can use, so literally it's it, okay? And I'll use it the same way I use a variable name. So, if I wanted to print out each element, I'll simply say print line it. If I did this and if I run the code there you go. Same result, I get the names of all the elements in my array. All right, close that here. So, that completes our fairly in depth look at lists and iteration through lists at this time.
Now, we have enough knowledge to implement the gameState in our app. So, let's jump right back in and set that up. Back here now if you remember from a couple of videos ago we will tag each of the slots over here where we can enter a circle or cross with a number, and it will go from zero through 8. So, zero for this slot 1, 2, 3, 4, 5, 6, 7, 8. Let's do that real quick. So, I'll go to my first image view right here. I'm going to tag this. So, tag and zero for the first one, tag 1 for the second one. So, I'll pause this video temporarily fill it in for the rest of them. So, I would recommend you do the same. All right, welcome back. So, I just completed it with my last slot here with the tag of eight. So, now I have tags for all of my slots. So, let's go ahead and make sure that this works. The idea is anytime I tap on a slot, I want to log and make sure that I'm getting the right tag number. So, I have my slotImage over here view as ImageView. What I'll do is I'll grab the slot number. To do that I'll use a variable.
So, val I'll call it tappedSlot equals I have my slotImage here, which I'm using as an ImageView. So, I'll say slotImage. remember that I can access the tag simply by referencing the tag attribute right there. And I'll also convert it toString because I want to display it so I can say.toString, all right. That way I convert the attribute toString so I can log it. So, let's go ahead and log this. I'm going to say, log.i the tag I'm going to use is tappedSlot, and then tappedSlot right there. Since I already converted it toString, I don't have to do that again.
So, let's run it and make sure it works. I'm going to run app. Something has popped up over here, I'm going to close this. There is my app, I'll pull up the logs as well. There's my log cat. All right, we're all ready to go. I'm going to move this to the left so we can see the log over here. So, let's tap on the first slot, there you go, tapped slot slot 0, which is good. So, let's tap on this and this should say eight. There you go, tapped slot eight should be 4, 5, 6, 7, 1, 2, 3. Perfect, so that's working. I going to minimize my logs for now. All right, now that's set up, let's set up our gameState array. And this is going to be a list of nine slots which we had briefly covered before, and that will line up nicely with our indices or the tags.
So, index of zero right here 0, 1, 2, 3, you'll see it as we set this up. So, let's bring in our gameState, I'll track it over here, val gameState, and this is going to be array list of and we're going to start off with two to track the empty slots. So, 2, 2, 2, nine twos basically 2, 2, 2, 2, 2, 2. So, you see once any of these slots are tapped, we're going to change them based on whether it's a zero or a one. So, the index, this first index if you remember is 0, 1, 2, all the way up to eight. And these line up very nicely with the tag numbers of zero through eight, okay. Now, let's see the function in the app right here, here is my drop in which kicks off once I tap on a slot. So, what I want to do is reference the gameState array right here and change one of these once that slot is tapped.
So, right here, I'll say gameState, which is my array name this one, if a zero or cross is the one that taps the slot, I want that slot to be replaced from a two to a zero. Similarly, if a circle which we're designating as one taps on a slot, then we want that slot to be replaced with a one. So, how do I reference this where you see tappedSlot has the index number, right? Because we're converting the tag to string, it will have zero all the way through eight, but a string version of that.
So, first we have to convert this tappedSlot to an Int so we can use it in our array. So, I'll say .toInt and convert it to an integer. Now I can say, gameState tappedSlot, and that will reference that slot that's been tapped. So, let's take an example. So, let's say this slot right here was tapped. This would be slot number of seven. See 0, 1, 2, 3, 4, 5, 6, 7, if this was tapped, my tag for this is seven and I'm converting that tag toInt. So, when I say gameState tapappedSlot, that means gameState, my array number seven, which is right here, right? 0, 1, 2, 3, 4, 5, 6, 7, so this seven and I want to replace it with a zero or a one depending on whether the circle or cross tapped on this. So, how do we know whether to put a zero or a one? Well, if you look at our code, we have set up active player with either a zero or a one, right?
So, when activePlayer is a zero which is across, so if a cross taps it, we know activePlayer is zero, we can simply set this to zero, right? If it's a circle then we know it's one, then we can simply set it to one, and this value of zero or one is being tracked by activePlayer. So, we'll simply say, activePlayer, there you go. And then we'll end up with an array of zeros and ones. So, let's check this out and log the positions as each slot is tapped so we can see the gameState array is changing as each slot is being tapped. So, right here, instead of logging tappedSlot, I'm going to say gameState and let's view the gameState array.
So, gameState, but this is an array so we have to convert it to string in order to display it, there you go. So, let's see if this works. I'm going to apply changes and run. It looks like I have to restart the app. So, let's do that. And I'll pull up my logs as well. Okay, it looks like it worked. I'll pull up my emulator, we're all set to go and we're starting off with empty slots, which means our gameState array looks exactly like this, all tools right here. Now, let's tap on the first slot right here. There you go and see what happened, this slot now has a cross and you see what happened to the gameState array. Cross means a zero and the first log has changed to a zero. You see our gameState array in the logs.
First slot has changed to a zero, and next to go the activePlayer will be a circle. So, if I tap on this one, then I'm expecting this last slot in my gameState array to change to a one designating the circle, so let's do that. Tap here, check it out, last one has changed to a one. Now, what if I tap on this one, 0, 1, 2, 3, 4. So, that's the fourth index or the fifth slot, and next to go is a cross. So, if I do that, then I'm expecting 0, 1, 2, 3, 4. This one to change to a zero as well. So, let's do that. There you go, it's changed to a zero. If I keep doing that, you see all of them are getting filled in. Perfect, now you see our entire gameState array has changed to zeros and ones based on what is in each slot, excellent. So, now we can track the gameState accurately at any given point.
Now, if you see here, I have three crosses in a row, which means the game should have been over, right? Because someone has won, the crosses have won. And if you see in the gameState array, this is index 0, 1, 2 so two, then three and four. So, 4 and 5 and 6, so 2, 4, and 6, right? So, if you look over here, 0, 1, 2, there's a 0, 3, 4, there's a 0, 5, and 6 there's a zero. So, you see how these three indices all have zeros in them and that is how we're going to handle the next step in the app which is tracking winning positions, we'll set up an array of winning positions. All possible combos like this one where 2, 4, and 6 are the same integer. Basically, we're going to check if all those positions have the same digits in them, either zeros or once. And the concept of these winning positions. So, these arrays within an array may sound a bit complex, but we'll explore it in depth in the next video as we build it up. Hope you're excited, I'll see you there.
Mashrur is a full-time programming instructor specializing in programming fundamentals, web application development, machine learning and cyber security. He has been a technology professional for over a decade and has degrees in Computer Science and Economics. His niche is building comprehensive career focused technology courses for students entering new, complex, and challenging fields in today's technology space.