1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Layouts and Animation for Android Apps

Animation Project Solution

Start course
Overview
Difficulty
Intermediate
Duration
4h 7m
Description

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.

Intended Audience

This course is intended for beginners to Android app development or anyone who wants to master coding in Kotlin.

Prerequisites

Since this is a beginner-level course, there are no requirements, but any previous experience with coding would be beneficial.

Transcript

Hello and welcome back. Hope you managed to get the app to work and switch back and forth between Homer and Bart using tags. Now, let's look at an alternate solution using a Boolean flag. So, a Boolean can either have the value of true or false. And you can use a Boolean variable and set its value to either of those values, and then test it using an if and else condition later on and take some action based on that or whatever else. So, let's check it out in our Kotlin playground before we apply it to our app. Here we go. We're in our Kotlin playground. First, I'm going to set up a Boolean variable, and I'll call it var over here because I expect the value of this variable to change. 

Otherwise, I would have used val which we've been using before. So, var, and we'll call it bartIshowing = true to start because when the app loads, we're initially going to show Bart over here. All right, we'll set it to true. And then based on the value of this variable, we'll take action. So, we'll use that if bartIsShowing = true, and we'll see another way of writing this very soon, then we'll take some action. So, a block within curly braces else, which means bartIsShowing = false, then we'll take some other action, all right? So, in this code, we'll simply do a print line and we'll say change bart to homer and else we'll do another print line and say change homer back to bart. All right, but notice what will happen after the first run. 

This will work the first time, right? bartIsShowing = true, it will enter this if else block, it'll see bartIsShowing = true, and it'll say change bart to homer. But what happens after that in the app itself? At that point, Bart is no longer showing, right? It's going to show Homer on the screen once we make this change. So, what we need to do is we need to set the bartIsShowing flag to false because at that point, Homer will be showing on the screen. And then, when the button is tapped again, it'll skip this because the flag will be false at that point, it'll come to this else clause, it'll change Homer back to Bart. And at this point, Bart will be showing. So, we'll need to set the bartIsShowing flag to true again,

since Bart will be displayed on the screen. So, based on this, if we run it right now, since bartIsShowing = true, if I run it, you see it'll tell me that change bart to homer. Great. So, when we made the change and Homer is showing on the screen, which means the flag is false, if I run it again, it'll say change homer back to bart, all right? And that's how Boolean operators work. So, let's apply this logic back in our app. Back here, we'll start by adding a Boolean variable and we're going to do this outside of our method up here. So, we'll say variable, and we'll call it bartIsShowing and we'll set it to true to start. And why are we doing this here outside of our fade method? That's because we can keep track of this flag as long as the app is open. 

The app itself, not just when the method runs. If we had added this flag within the method, then when the method would have completed executing, we would have lost this flag and wouldn't know whether it's true or false. So, we wouldn't know what is being displayed on the screen at that point. So, in order to track that, we need this variable outside of this method and just set it from within the method. And this topic of accessibility of variables in different parts of your code is called variable scope. And we're going to explore that in more detail later on. But for now, just know how to keep the variable outside the method so we can use it to track the state of the app, all right? 

So, in our method now, after we got the two ImageViews, we'll check if Bart is showing. And I forgot to show you the shortcut over here. So, this check if (bartIsShowing == true), you can simply do this without having the equality operator and true. Simply doing this if bartIsShowing it checks for if this is true, all right? And if true, it'll enter this code block otherwise it'll enter that. If I run this, now I'll set this to true and run this, check it out, change bart to homer, so this works. All right? So, this is the code that we're going to be using in the app. I'll say if within parentheses bartIsShowing which stands for if Bart is showing as true, then enter a code block else open close curly brace again, enter another code block. So, if Bart is showing, then we'll fade out Bart and fade in Homer which is exactly what we're doing here. So, I'll take this piece of code from here, 'Cmd+X' and paste it in here. 

And remember, we also have to set the flag to false because now Homer will be showing. So, we'll say bartIsShowing = false. And then in the else clause, we'll paste that code again. But we're going to fade out Homer since Homer will be showing at this point and we'll fade in Bart. But at this point, Bart will be showing on the screen, so we'll say bartIsShowing = true. All right, so let's give this a shot. I'll apply changes and restart activity. Okay, it looks like everything worked. Let's pull up the emulator. There you go. Bart is on the screen. I'll tap the screen, there's Homer, I'll tap it again and there's Bart. Looking good and working exactly as we expect. Excellent. I hope you enjoyed building that. Now, in the next video, we'll take this a step further and learn to do all sorts of other animations. I hope you're excited. I'll see you there.

 

About the Author

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.

Covered Topics