All right, welcome back. Now that we've mastered working with layouts, we'll move to doing some advanced work with images. And this will allow us to build a reasonably complicated game called Tic Tac Toe in a couple of videos. For now though, we're going to learn about fading animations. So, here's a task for you. First, create a new project like this and you can call it anything you want. Set up view binding for the main activity and bring in a couple of images. So, in your project folder under drawable, bring in a couple of images. 

The ones we're going to use are images of Bart Simpson and Homer Simpson. And the reason for that is the completed app will look something like this. Here we go. You have an image of Bart Simpson, and when you tap on the screen, it slowly fades and changes to an image of Homer Simpson. If I tap again, goes back to Bart Simpson and so on. Okay, so I got these two images of Bart and Homer from Wikipedia, so if you pull up a browser window and go to Wikipedia, here you go. And if you look for Bart Simpson, there you go. Here is an image that you can grab a Bart. Similarly, you can do the same for Homer. Once you have them move them to your drawable folder. All right. 

But be careful with the naming of the images, make sure that they are lowercase for Bart and Homer because if you have them as uppercase or capitalized, then it won't work and you'll have to redo the process. All right, good luck with that one and I'll see you in a bit. All right, welcome back. Hope you managed that. Here are my two images: one of Bart Simpson and one of homer Simpson and my view binding is set up for my activity main and we're ready to go. So, first I will go back to my activity main, the visual layout editor, and click on 'Project' to maximize space. Let's bring in an ImageView. So, right here I will drag this in and I'll select bart_simpson to start. Okay? And let's see. 

Drag the edges like that and I'll go to Scale Type. Under Common Attributes, choose fitStart. Maybe let's extend it to the whole screen, so I'll bring this to the top. Maybe leave a little room on top. Okay, that looks good. Now that we have that, let's set the constraints. I'll choose zero for the left and zero for the right. And on top 105. That looks okay; maybe maybe 100. Okay, that looks good. And the bottom 115, that looks fine. All right. So, the image will be a little towards the top. That's a good starting point. So, the first part is how do we get the animation to start once we tap on the screen or the image on the screen?

Well, there's an attribute for that. If you look at your attributes and scroll down to all attributes all the way down to O right here, you see there is an onClick attribute, meaning we can treat an image much like a button and run a method once the image is clicked. So, I'll select this and we'll call our method fade. Obviously, it's not defined yet so it's going to be in red but once we define it, it'll work. So, let's run the app in the background and make sure all the setup is good so far. I'll select to run app, and in the meantime, we'll look at how we can fade Bart out. So, the method we chose is fade. So, in my main activity, actually I'll get rid of these two images from here that are open, all right. 

So, in my main activity, I'll create a method. So, fun fade will take in a view of type view. There we go ahead. I'll hit 'Enter'. It'll make the appropriate import for us and then open and close curly brace. So, the method is ready to go. All right, there we go. There's Bart. Everything seems to be working correctly. Now let's look at how we can fade Bart out once we tap on the screen. Back to our method. First we need to reference the view in a variable, so I'll say val and I'll call it bartView, or actually bartImage seems more appropriate. So, val bartImage and I'll set this to binding. and you see I have ImageView. So, if I look at my layout, you see this ImageView that has Bart in it has the idea of ImageView. And I can change this... I'll actually change this to bartView because eventually we're going to have a homerView as well. So, I'll put split over here and I can quickly do it from here, I'll say bartView, okay? 

And once I do that, I can go back to my code. And instead of ImageView, since I don't have it anymore, I can say bartView, okay. So, first what we'll do is do a simple fade out of the image in the ImageView and you do that like this. We'll grab our image variable that we have, so bartImage and then dot. The method to use is called animate. So, you see if I start typing in animate, animate pops up right there and then I'll put a dot. And as you can see, there are a lot of options for animating that pop up over here. The one we're going to use is alpha, which is this one right here, which you remember, sets the opacity so we can make things disappear and reappear. 

So, I'm going to select alpha, and I'm going to change the alpha to zero so the image disappears. And you see that I have this little red underline here because the value this alpha method expects as an argument is a float and this is an integer. To convert this integer of zero to a float, I just have to put the letter F next to it, so 0f. And that does the conversion for us. All right. So, alpha of zero which will fade it out completely and make it disappear, and we want to do it over a certain period of time. So, I'll change another method here, so I'll put dot, and then the method we're looking for is setDuration, all right? So, that basically sets the time that whatever you're trying to do will take. So, if I type in S, you see setDuration pops up, and this is going to take in milliseconds. So, if you wanted this to happen over two seconds, then you will say 2,000 milliseconds, all right, which is equal to two seconds. 

All right, so now that we've done that, let's see how it looks. I'm going to apply changes and restart activity. Okay, it looks like we're going to need a reinstall and restart. I should have chosen the other option. It's fine. I'll click on it. Okay, it succeeded. Let's pull up our emulator. Here we go. Here is the example app. I'll tap on the image and there you go. Slowly fades out. Perfect. And you can experiment here with the alpha value and duration to come up with different combinations as you like, but we'll jump right to the next task which is animating from Bart to Homer. So, there are multiple ways to do this, but the method I'm going to use is bring in a second ImageView of Homer. 

So, here I'll bring in a second ImageView. And you can try doing it from the layout, but since we know now reasonably well how to work with the code part of our layout, all I'll do is simply copy this ImageView of Bart, 'Cmd+C' and then paste it down below, 'Cmd+V' and use this for Homer. So, we'll have all the same constraints and everything but have an image of Homer instead. And the ID I'll select is homerView. And then I'll scroll to the bottom and you see over here drawable/bart_simpson, I'll change this to homer_simpson since I have a Homer Simpson image. There you go. And you see Homer pops up on top of Bart. That's exactly what we're looking for. But when the app starts, we don't want Homer to show up like this, we want Homer to be invisible. We only want him to appear once we tap on the screen. So, to do that, we'll set Homer's initial alpha to zero. 

So, from here I'll just enter in an alpha line. So, there you go. alpha and I'll set it to zero to start, and you see Homer disappears. And the idea is in our code programmatically, we'll bring Homer in. So, let's go back to our method. Right here, let's grab Homer's ImageView in a variable. So, I'll say val homerImage and we'll set it to binding.homerView. You see it pops up since we gave the ID of that ImageView to homerView. So, similar to what we've done here, what we're going to do is say homerImage.animate and we'll set the alpha and we'll set it to one , right? One and then I have to put an F. So, basically it will go from zero, which is the starting setup right here, zero and it will switch to one, and we'll do it in the same amount of time. 

So, setDuration two seconds. So, as Bart is fading out, homer will fade in. So, let's run it. Make sure it works. Okay, it looks like we have to reinstall and restart the app again, okay? It's installing now. All right, looks like it worked. Let's pull up the emulator. There's Bart. If I tap on Bart, and here we go. Bart transforms to Homer. Now we have an issue here which we faced in the weather changer app which we built in the prior section and that is if I tap on this image again, it doesn't switch back to Bart, it stays at Homer. And in the prior section, we solve this using tags and an if else block to check for what tag the image had. 

That's what we had done before and that brings me to the challenge for this video for you. Try to solve this scenario using the method that we had used in that weather changer app, using tags in combination with an if else block in the method or any other method that you want to use. But for our solution that I'm going to show you in the next video, we'll use another method. So, you can get familiar with that as well, and that's by using a boolean flag. All right. And I'll leave it at that challenge for you as the end of this video. I'll see you in the next one.