 So fragment is a, I guess you can think of it like a web page. A web page is like the activity and a fragment is like a widget on a web page, right? So a widget in that firm cannot exist without a web page. So if you shut down the web page, all the widgets, all the views, everything goes with it, right? So the fragment is exactly the same as that. So it cannot run itself on the device. It needs to be attached to an activity, okay? So because of that, you can load multiple fragments at the same time on the same screen. And this is usually useful for larger screen sizes where you can include multiple fragments on the same screen if you rotate your device horizontally so you have a wider screen, you have more real estate, you can include more activities there. So the fragment depends on activity. Even though if you look at this diagram here, if fragment has its own life cycle, has its own sets of functions or we call these callback functions, right? As you can see here, you can call back and use it. So the cycle looks very similar to the activity and it is contained within the activity. So again, activity shuts down, the whole thing gets just down. So every fragment that you create has these states in there. These are the states in the left column here. The states just means what state they are in at a certain time in that cycle, okay? The middle ones here are the functions that get executed in this order when activity runs. Okay, so when you, I mean when a fragment runs, so when you activate a fragment, it attaches to the activity, which is not shown here. It's outside of this one here. So on the left column, and it's kind of hard to see all of them, but I put all the functions in blue are the one that are the core methods used in the cycle and it runs in this order. So as soon as you activate a fragment, it runs this function attaches to whatever activity it is attached to, right? Attaches to that. And then it's going to create that fragment. So we are now create here, create the fragment. Once you create the fragment, it is going to create the view. This view here refers to the XML file. So if fragment also has a layout that goes along with a Java file, right? Just like the activity. So it creates the layout, it renders that, it changes the XML to an actual object in Java. And then after that, once it's done, it calls another function called view created. So this is like while creating, it creates that view and then it's done, it loads this function and then it moves on to the next one, okay? This is called the next is on view state restored. This function here, it used to retrieve the data down here at the bottom, okay? There's a function call on save instance state. So if you save data down here before you close or you destroy the fragment, you can retrieve those data back when the view of the fragment has been created. So you can retrieve the data back, right? So that you don't lose data. And this is kind of important, especially when you rotate your device, sometimes some of those data get lost. So it gets lost and you'll see that your data is always set to zero or to wherever it was before. And if that's the case, then when you rotate or like that you always call this function, save those data to a variable in the global space somewhere in the bundle. So that when you recreate that fragment, you can retrieve it back again, okay? So that is only for that. Of course, this data can also be retrieved from the creative view as well, okay? But usually you could do here. After that, the view has been created, everything is gonna be stored and then it's gonna start the view. Once you start and then now it goes to resume and pause. So this is the cycle you see all the time on your device just like the other activity as life cycle, right? If you do something on your screen, you tab, you interact with that screen, it resumes and then goes to pause state. The pause state just stops there is waiting for activity to occur. And if you go back or you shut down the app or runs out of battery, whatever it is, then it goes to the stop here. And then this is where you have a chance to save your data. If you don't save, it's gone forever for good, right? And then it destroys the view and then destroys the entire fragment, okay? So this cycle is really important to understand now because it's quite different from the activity. So you'll see that in a minute as we do some examples. All right, so let's go into the code and see how this is done. So we're gonna do something kind of similar to the one in the book, okay? If you haven't looked at it yet, then tonight's session will cover mostly of that. The book does, I think it's pretty nice job covering fragments, but there are some pieces in there that may be unclear to you because some of those deal with not just the framework itself, but it has to do with Java, how Java works. So I'm gonna cover that a little bit so you understand why it's doing the way it does. So let's create a new project here and it's going to just the empty project. We'll call this one here, my fragment. I'll use one of one. We can go back a little bit further back to like Lollipop, yeah. Yeah, let's look at 19 KitKat like you want in the book. And because we're going back, we're gonna go back and choose the legacy here just to make sure everything is still compatible. Okay, so here's our main activity as usual. All right, so let's look at the layout. I'm not gonna concern too much about the other stuff. The layout is, and the code here are the most important now. Okay, so this is a typical layout. I'm gonna change this to the linear layout which is easier to manage. You see that it's also used throughout the book too. Just make things easier. Okay, so I'm gonna go and just delete this view here. We don't need this view. And we'll change the orientation to vertical. Make sure that seems vertical. Otherwise, your views might look a little bit weird. All right, so now let's add a fragment in here. So you add a fragment just like you add an activity. Go to file new or right click on the photo there and just go new. Oops, I lost it. So again, just anywhere here, new fragment. And you always do with the empty one, okay? Until you know more about fragments because the other ones are really, it's gonna be difficult to understand. So don't go here, just with the blank one until you get it first, then you go and explore the other ones. So this one here, it's just a blank fragment and we'll call this just the detail fragment. And I'll keep the name as is. All right, so you see it has a class, detail fragment class just like the activity. But this one here, it extends the fragment class, super class, okay? Whereas the activity extends the app-contact activity. So they're different. So, but if you look at this, a lot of these code are built into it, loads automatically for you. We'll clean up just a little bit. It also adds a fragment detail XML file. This is the layout. As you can see, has its own layout looks very similar to the activity layout as well. We're gonna modify this in a minute. So let's clean up the detail fragment first. There's a lot of stuff in here that is that you don't really need. Okay, so I'm gonna just turn off all these comments here, okay? These comments are really useful when you finalize your code, your project. You want to do it this way. This is called a Java doc and it's really useful. We want these states I'll show you why it's so important. So these variables here, you can delete all of these here. We don't need these. Actually, all these function here too, all of these here, all the way down to the uncreate. So all those are just like a boilerplate templates you can use. So in the uncreate, you may not even need this as well, but I'll just, you know, remove this. You can see the similarities between the two. Okay, so you have two functions, the uncreate and uncreate view, right? Compare this to the other one. How do I do this? With vertically, okay. So if you look at this two here, this is the detail, this is the may activity here, okay? So both of these functions or the classes, they have their own uncreate function. Looks very similar, but the recommend has a uncreate view, right? Over here, you don't have it. You don't see it, but really the view has been created through this function here, set content view. This one here creates the view for you, okay? Here it creates it in here. As you can see, if we turn the inflates the view here, this part looks very similar to this one here, RLayout activity main, RLayout fragment detail, okay? So it passes to, what it does is when you run this fragment called detail fragment, it's going to go to the process, show you the steps, create it, and then I'm going to create the view. This view here is going to look at the layout, which is called the fragment detail over here. So whatever you set in here will be parsed in render and change or convert it to an object in Java file. And then it needs to place this fragment. Where is it gonna go? It's gonna go into the container here. Okay, let me, as you can see, this container is really where it contains this fragment here, okay? So right now we haven't placed the container yet, but we're gonna place this container, this fragment inside, let's say the main activity. If I put a fragment here, it's gonna inject this layout into that container location. It's just another view, like a list view or a text view, same idea. So it's a placeholder somewhere to contain this, okay? And the false here just attached to root mean, do you wanna do it now or you do it later, okay? So usually you set it to false. So they nailed the layout, you want to use for the fragment container. Again, this is all set up, this is like that. So usually this function you can all altogether omit because it'll run in the background automatically, but we'll leave it here for now. Okay, so that's the class for the fragment. Now let's go to the layout and the fragment detail layout. This is the result. This is the evening of it, think of it just like another view, what do you wanna show here, okay? So just like a regular view, I'm gonna go and change this to the list layout as well. I mean to the linear layout, if it responds to my mouse, convert to the linear layout, okay? It has two text view here, which is fine. And so let's look on the code view, okay? It's the code view here. It looks just like your regular text view, of course. And let me do that. And so it has one data here, which is okay. We'll just leave one for now, okay? So we see what that looks like. And then let's go to the main activity here. Okay, so we're going to display that information here. And I'm gonna go and add, you will see that it's no, as far as I know, there is no button here you can click for the fragment. You just have to do in the code, okay? So if you can find it, let me know, as far as I know, it doesn't have it for whatever reason. So you have to go to your code and do that inside here programmatically. So it's a linear here. I wanna close this like that. Okay, so inside here, we're going to create a refragment. You know what, just to make sure it works, it's, I wanna separate between that in a regular fragment. So I'm gonna add a, maybe like a button here, okay? Had a button here. Oops, button here, make it bigger. And that's at the top. Okay, that's fine. And then I'm gonna go and create this fragment right below it. Okay, so we'll see that it's working. I'm gonna go back to the code. Where is our button? And then right below the button, I'm gonna add the fragment. So you put here the fragment tag, leave it in lower case, okay? And if you hit enter, it asks you to set the width and the height. This are required, you must include these. So the width, I would just say match the parent. The height, I wanna say just wrap the content, okay? If you put match parent, it's gonna overlap the button. Then you can close that fragment here. It also, usually you also should have an ID. So put here type ID and then just hit enter and pair a few times. And put here, I don't know, rag or fragment at detail, I guess, something like that. And one more thing, you need to associate this fragment with a class, right? Which is our detailed fragment class here. So you go here, you type a name, again, hit enter. And then you just hit enter to accept this fragment. Just make sure it's pointing to the correct one, right? And it's good also to use the entire fully qualified packages to that detail. Okay, so now this fragment here is just a placeholder, okay? A placeholder where we render content here, just like this, it's like a placeholder for content and things like that. So if you just run the way it is, it just, it should just work, right? Without doing anything additional work, as far as I know. We can give it a spin. Let's see, let's go in, run px4, okay, that's fine. Let's see what happens. Hopefully no errors, all right? So here you see, I'm gonna just zoom these in, you can see the top when we cure it here. So here is the button and there is just the fragment, right down here, okay? So it's just like another view. It is a view, think about it, right? So the fragment can be added multiple times just like the button. I can go here and then copy that, add another one here if I want to or anywhere else. But I have to get unique names that could put like fragment two here or a one or two, right? So if I open it again and run my code, I should now see two fragments, as you can see, right? But each of those is independent, right? Even though they share the same class called detail fragment, each of these is a independent copy or object of that particular class, right? Just like it's buttons out. Each of these is the independent object. That means that if you have data that you can pass this fragment here, you can display different data by using the same fragment to show a data here, okay? But I'm going to delete this for now so we're done for confusing. All right, so as you can see, it works just like regular views. But what happens when the scene is that when this fragment runs, Android knows that the name of this fragment is coming from this class. Otherwise, the main activity has no knowledge of that. It has no idea. It just knows that it has the main activity. It has these two views, okay? This one here is managed entirely by this detail fragment class over here. So it loads this fragment, this file. It creates it and creates the view. It looks for that view. Where is it at? Oh, is this the name of that view? And then it generally set in object format. Inject that into the container. Container is, this is the container, okay? Inside this activity main here. So that's pretty much how fragment works. Very simple like that. I'm just placing some, you know, in my detail here, I've just placed some, you know, constant data strings here. There's just some static content. But of course, usually you create classes and other objects and data to fill this text view. So the text here over here works almost exactly exactly the same way as your regular activity, okay? How do you populate this text view here? Well, these data, as you can see, is managed by this class. So this text view, if I note the ID will go here and give it an ID as well. So we can say TXT title for now, something like that, right? I don't, and this is the title of the text. Let's say that I want to, you know, update this text view. We know that you've done the main activity, right? And here, how do you do it? You remember, if you want to update the button, right? You would do just like that button. And then button here equals the button and then find view by r.id.button here. So now I referenced the button and now I can access the button and add event to it, whatever I need to do, right? The same thing, similar in the fragment. The only thing is that the fragment doesn't have this approach to the activity. So how do you know what to link to this view here? And you do that inside another place. Again, back to this lifecycle again, the on start function. So you have to override this function to use to access the views. This function on start, I would say is kind of similar to the same level as the on create over here, where I can access these view objects. Over here, you cannot do that inside here or here, right? It won't work, right? Because they don't exist here. You want to access the view inside here, like this text view, you must go into the on start and then in here, as you can see, I can't just do this either. So view equals view and then this, right? Or find, as you can see, for type find is no function to say find or something. Here we can just say find view by ID because it does not have a view, right? It needs to go to a container, to this container, which is the actual activity to find a view from here, because you just can't do it. So to do that, you will have to get the view. So instead of say view equals this, I'm going to say view, you want to get the view, okay? This one here will give you access to the view for the XML template. So now, instead of going directly to find something, I will go to the view.find view by ID, you see here. Okay, so now I'm going to go r.id. And then there is a BXT title. And this will only access the view for this fragment here. It does not have access to view for other activities, just only for this one here, which is good, right? And then I need to set this to the view of the text view and the rest of it will just kind of like before. So once you get that and the code is the same as before, I can do a text view that set text to say hello world with something, okay? You can change the text here from the default, okay? So if I go back and run my app again, so you can see I changed it to say hello world. Now let's do something that will be more interesting. So let's create a class to store source work information. So I'm gonna go back here to the class space here, right-click and create a new class. This is just playing regular standard Java class. So this workout is going to have an array right in here. And right below here, we're gonna create a constructor first. So if you do the public workout and we need this string of the name, the next one is the description. And here we're going to create those two fields. So here we'll put private string name and then private string description. Okay, so, and then right down here, we're gonna generate those set us and get her for those two fields, right? Right-click and then generate the getter and set her and they just they'll pay and those are set for us. We'll use those later. Now, then the constructor, we just set it. This, that description is description and then it's that name. Okay, so this is all set. This is just for, you know, store data. So now we can do a few things. Okay, the book does it. It has an intermediate activity file. So this is the main activity and it goes from the main activity to another detail activity. And then from that detail activity, it loads the detail fragment. Okay, so we can do that. So you can still also understand the flow of information. So instead of displaying everything here on the main page, let's display into another page called a detail activity. I'm gonna go and create another activity. This will be just another blank activity, empty activity. And we'll call this one here, work out activity and click finish. Okay, so instead of displaying that information to our main page, like over here, okay? We're going to display this in the other page. Other page, okay? So that means in the activity workout, we'll add it in here. And again, just quickly changes to a linear layout. Okay, we're gonna go to the code view and paste it right in here. I just moved that here. So we'll show the, on the work out activity page rather than the main page. The main page, we'll just have the button. There's this button here. And this button is going to load that second activity. Remember in the main activity, I would point to that button, right? So once we do that, we can go ahead and add that on click event listener. And then view and click listener, hit enter. And then we're gonna set the intent to the work activity. So here would be, I'm just gonna start activity, start activity. Inside here, I'm just gonna go and pass in the new intent. I'll just do it in one take. This is the current view. Destination is the workout activity.class. So hold on the end and import the intent. Something's wrong here. Oh yeah, this doesn't work here. I'm a separate class, right? So I can't just do this. I have to go through the main activity that this. All right, so now we load the workout activity over here. As soon as we load this activity, even though I don't put any code here, it will load the detail fragment. Why? Because we added the fragment here to the workout activity XML file. Okay, so just to make sure it's still worked just before, we can go ahead and run this again. It should not show up on the main page now. Just the button, if I click on it, it should show the detail page. And here is the fragment. Okay, it's still showing my fragment because I did not change the title here. I tell it should it be changed. And do you remember what it changed this, right? It changes inside the manifest file. Otherwise it's gonna be the default name all over your app. You can change there or you can change it in the code. So your manifest file, you can see over here, it adds that new activity workout. And all you have to do is add the label and say, you know, workout activity or something. Okay, so the label has now been changed to title of this, the manifest file. All right, so now the next thing is how do we display this content to the fragment? Because this work activity here, all it does is really just a placeholder, right? It just loads the view here to its own template. The actual implementation of this stuff, all this data is inside the fragment itself. So if I want to load all this work, I can't do it here. I can't do it here because it's not ready yet. You do it after the start function runs. So again, usually writing here. Here, I manually added the title here, right? I wanna get this data from this object, workouts at that ID. So for example, if I wanna run the first one, I will go here and say, workout is a class dot works out here. You can do directly like this, right? And then get the name. Yeah, I'm calling the object directly. I did not call the function. I could have. So now when I run this, I'm gonna see the title of the first activity instead of the hello world, okay? So it's kind of really small, but there is the title here. But then we want to automate this, right? You want to say, whenever I do something, I click on something, I wanna show that. But the logic here again, isn't here. So the only difference is this ID here. I'm gonna load one, I'm gonna load two, three, four, whatever it is, we'll get the name. So what does this come from? Okay, so it comes from the activity that this fragment is attached to. That means their work activity right here, I can have access to that fragment that I'm using. So to get to that fragment, you would have to create an object of that type, okay? So you would do like, it's called detail fragment. That is that class that we hear the name of the fragment. I'll just call it fragment equals. And then you do this by going through the get support fragment manager, very similar to how we did last time going through the menu, okay? So I'm gonna get, I need to convert it to the detail fragment. To get there, I'm gonna call the function call get support. Here's the get support fragment manager. This is the one responsible for, as used for activity to communicate with each fragment. I'm using one here. If I have three fragments in the same workout activity, I will call the on type and use the same function here to get there. Right? So here I'm gonna go in the next line just to have more space. Dot and you say find if fragment by ID. So kind of similar to find the R layout by ID with something like, and then what ID am I looking for? Well, I'm looking for the ID of R dot ID dot fragment detail right here. Okay? This fragment is inside the work activity page. The work activity here refer to this fragment, it's ID, okay? So that's what it's coming from. So I'm pointing to that fragment. So now I have access to that fragment. This fragment here points to this fragment. This fragment points to the actual underlying classical detail fragment over here. Okay? So now I can pass data over from here to the detail fragment class. So I wanna pass this ID over. As you do that here by going to the fragment dot something. So how do you get that ID? Okay? So now what happens here is you actually create an instance object of this class. And what you can do is now this class over here, you can create a variable in the global space here. I will call it private and work ID. So over here, I want to set. So you can see I can access the setter now. If I wanna get it, I can also get it back, right? So I wanna set the ID to, in this case, let's say I wanna call the third one. So I manage the ID from here now instead of directly inside the fragment here because I just recorded a data view here. Whatever this is set, I'm gonna use it in here and the zero position. This would be the work ID. This one is responsible for rendering the content, whatever is fed into this fragment. So the work activity is responsible for sending just the ID to display the content. And how does it know this one word? Because again, this object is really an instance of this class. That's why I'm able to do this object. The same as if I have an object of the work, work has access to all these functions, same idea. If I run it now, again, it should work just like before. I said we should show the third one. So you see that I can control here from the work activity here. Let me put it in this order, it looks to be weird. The work activity, the fragment will be here. Okay. So here, I can create another one if I want to. So let's say, and they make the work activity over here, I'm gonna add another one. So I'll show you what it means by two instance here. So the first one you call activity here, I put here underscore activity two. I mean fragment detail two. They use the same fragment. Then back in the work activity, I can create two instances. Happy that. Put it here. I'll call this diffract two. And then use the same layout, but then the fragment two is gonna load the first one. Okay. So I'm reusing the same fragment again in the same template. So you see that now it should work. I should have two separate titles inside that activity. And the reason you don't see it is because I probably forgot to set the height of that fragment. So let's go back to the work activity here. Oh, no, no, sorry. I did not change the, yeah, yeah. Sorry, this should be the other one. The second one, underscore two. If I don't, I'm just overwriting the other one. Oh boy. There you go. Okay, so I should not load that one. I was thinking that I forgot to set the height, but it was set correctly. So, okay, it's still not working. Yeah, it's supposed to show two of them. For some reason, this is not doing that. The width, the height, the width, the height. Maybe the layout. Oh, I did not set the vertical position. Yeah, I forgot to set the orientation to vertical. Yeah, that happens. I think that's the reason why. That's right, yeah. There you go. Yeah, that's the vertical position. So you can see that I'm reusing the same fragment toys in the same view, same activity, because each of these is independent of each other. As long as you have a unique name. So think of these just like a button, a text view, right? Same thing. Except it's like a custom view you use in the activity. So that is basically the idea of fragments. That's pretty much it. I can move this anywhere else I want. I can move it to the main activity too if I want to. I can do that anywhere I want. Okay, so the idea of a fragment is reusable.