How to implement Picture-In-Picture in your Android Apps | David Cruz Anaya | Skillshare

How to implement Picture-In-Picture in your Android Apps

David Cruz Anaya, Android Developer & Tech Lead

How to implement Picture-In-Picture in your Android Apps

David Cruz Anaya, Android Developer & Tech Lead

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (60m)
    • 1. Introduction

    • 2. Starting project walk-through

    • 3. PIP implementation with ExoPlayer

    • 4. Handling PIP mode changes

    • 5. Create and use PIP delegate

    • 6. Create icons and handle events

    • 7. Outro

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course you will learn how to implement and use Picture In Picture feature in to your Android apps.

also how to use BroadcastReceiver (register and unregister), Intent and PendingIntent.

After this course you will be able to implement Picture-In-Picture confident in your projects, also you will be able to use BroadcastReceivers with PendingIntents and Intents.

Remember PIP only works from SDK 26 (Android Oreo) and above.

Meet Your Teacher

Teacher Profile Image

David Cruz Anaya

Android Developer & Tech Lead


Hello, I'm David Cruz. 

Welcome to my profile, let me introduce myself. I am a 37 years old mobile developer, passionate about new technologies, learning and teaching. 
I am currently an Android Tech Lead and also content creator for a small academy named LastReact.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Welcome to this course on Picture in Picture for Android and how to implement these amazing feature in your Android applications. In this course, you will learn how to implement picture in picture, we will call it PIP for short. Also, you will create and use broadcast receivers, intense and pending intents. You will listen to events from the PIP window and sending to the app such events as play and pause. I will assume you have some knowledge in the following topics. I will have to have some knowledge with like data and Model-View-ViewModel. Also some knowledge in XO Player and some knowledge in Katlyn. For the class project. In the class project, I will include this class. Today. I will include in this class the very same code I use for my course. However, I do expect you to use only, only for learning purposes. Please experiment anymore. Icons and a 100 events. Be aware. Pip, It works with different media resources like audios and videos. Feel free to expand and of course, have fun. Do you need more help? I'm always trying my best to give you the best quality content. Also, I'm learning every day to create these videos. If for any case, this video, our nuclear for you, or if something is really big, explain it, please let me know and I will help you as fast as I can. Also, I will create the video. I will recreate the video or I will record it if it's needed. I'm your instructor. My name is David cuz I'm a tech lead and mentor. If you need more information about me. This is my website is www dot Debbie dot UK. And now let's go and have fun with picture in picture. 2. Starting project walk-through: Hi, in this first video, we will see what we will find in your project once we open with Android Studio, okay? And we can start to get familiar with it and, and so on. So we can start here, the plate activity and Player fragment. The player activity. As you can see, there is very simple, very simple implementation of the new binding. Nothing else. Here on the player feminists where everything is happened. We have also implementation. We inflate the fragment player here. And we have a very simple implementation of XO Player where we actually, we display this video. This video is a demo video. You can actually find out an internet that is so many videos, MP4 you can use. Please feel free to experiment on yourself, but just use this one for this demo. We can see here or we actually override few methods from the lifecycle. These these initializations unreleased player, are practically the recommended from the documentation in exoplanet itself. Basically say, depends on which Android version or use in, sorry, underbrush and SDK are you using if is no horrible, as you can see here, or is below of Nougat, it should be initialized in different places. For example, if you know, motto should be initialized and start and if it's not onResume, also, if the plate is no, we're gonna start the onResume, et cetera. Exactly happen. The same for release player, player. We will remove if it's below now gut from bows. And if it's no good, you know, know what ababaa we will release it on stop on the street view as recommended in the documentation, we set a binding tool and then this one is just remove the flags, the toolbar. And the toolbar, et cetera, is this code is replicated already, but I didn't, I did in the experiment and they didn't see it. You know, it is no part of this course. So just a little bit hard as it is because it is a fit for the purpose we want to hear this is the method in order to provoke, you know, no God, actually, as we'll see here, is n and 3n. Yes, the machine code, I think that code is 24. I think it was 24 nodes, et cetera. So here we see the very simple initialization of the player. Just recreate a builder. We passed activity as a, as a context, and so on and so forth. Yeah. Let me just quick run. Emits a second. Yeah, we'll build this one again. We'll first clean the project because I don't know why I pressed the common, the common key, and this doesn't happen. So we'll clean up and rebuild a project. Let's see if listen to fix the issue. If it's not, we'll restart all the Android studio. So yeah, we can continue on. We just said the player, you know, from the plate itself for the player view, which is to play a beer from there. From there, fragment player. And then we just create a new media item which is put the idea itself. So the video URL itself inside. So we can create one or we can create a list of media items. You know, it doesn't matter which you use one for this demo. And I would say that media item here, we can actually put 70 items and they will accept, you know, at least for this purpose, we're just going to use one. So Player, Hero play when ready. You know, this one is, you know, it will be true. Not just for a start in other people and is ready to start. You know, this is the current window player position. We can actually change this one, but we don't need it actually. Just for this demo, we'll go to the picture to picture that the player is just to have some kind of multimedia to do this one. And they're in release exactly the same, you know, with the plate is not known. Because we actually consider no here. If the player is not null, then we just set in other player when ready all these kinda things. And then will it release it? And everything is as it is, everything is done there. So yeah, this is the player itself on the fragment. Because you just have a constraint layout. And disconcert layout is much parents match parent. And then inside we just use constraints here. And then we set parent everything, you know, top-bottom start and everything to parent. And exactly, exactly if we go to the layout, exactly the same happened in layout. You have a constraint layout and it's much paran, we said everything, you know, all, you know, we use constraint for width and hate. And then from the bottom and start top, exactly the same as before. We set it up here just to see something, you know, to do something in the middle, we have used the fragment, fragment player. And in this fragment itself, we can see we actually include Player fragment. So we actually inflate the fragments tray, etcetera. We have here. We have here. A warning will see what is this one later, it looks like there is something else framing container view. So I will see, you know, I would say listen later but at the moment is one is worse. Well, so we'll leave it as it is. And here another file we would like to show you guys is this one is hospital support. So as I mentioned before in the previous videos, picture picture in picture should be there should be only when it should be. No, sorry. Is should be is it it's only available for SDK 28, which is 26, sorry, my apologize. 26, which is a rare and also we flag this one here, sorry, or super, or it's above. And also we check if we have the picture in picture, picture in picture already implemented, you know, ready to support, to be supported. Cool. So that is practically everything. We have. Other things like, for example, this icon that pose and play we're gonna use later. But at the moment, this is practically all the code. And now you will see how we want to ask how to implement it inside. And in the next video is going to be everything, you know, start to develop or picture to picture in this simple application. Ok guys, so let's go to the next video. 3. PIP implementation with ExoPlayer: Now we know what we're going to find in a project, the basic code we have already implemented. And now it's time to see how to implement the basics of a picture in picture, okay, so the first thing we need to do to support between picture in our application is the following one. We can go here to the our AndroidManifest. And in all activity, this activity is the one I'm going to use for picture to Big Picture in Picture, sorry. So if you have many activities and you just need to set up this on the activities where you actually want to support the picture, picture in picture. In this case, we only have one, so it's going to be R1, the player activity. And here we can actually put and draw it and then support Picture in Picture and my template here. After this, we see a warning. Okay, this one is exactly same as we saw before. Okay, here's a Supports picture in picture is only for the API 24 above. And to use picture in picture, you need to, you need to 26, sorry. As we saw, you need or a wearable Anyway. Let's go. We can put here Android. And we need to handle few changes on, on, on our own. So we need to do that. We need to do conflict changes. And here on the conflict changes, there is a few things. Things we need to support conflict changes we need to handle on our own. So here, basically, sorry. So here basically what we can do is we can actually pass their screen size and then also the smallest screen size. And then also screen, sorry, screen layout and orientation. So this is everything we need to a 100 neuron and we can continue seen how to implement it. First of all, after support picture in picture, we need to go to our activity. And here we need to, sorry. And here we need to set, sorry, it's not, it's owns on user here, on set on user live hint, you know, we need to start or start the picture in picture mode. But all, everything regarding the player is on the fragment. Unfortunately, it will go to the fragment. It will go to the farmland here and we put on use of live open use her left hand. There is a live hints or there is not. This. There is no method to to overwrite. So what we need to do is pass from one activity to the fragment. How we can do that? To do that basically, what we can know each other's creator, we can, we can create a four and these are the four would put fragment, fragment would put in. And then we can get the list of fragment already on or a manager support their Framer. And we get from that. Okay? So this one, what he's gonna do is you're gonna check which is the latest fragment inside of the fragment manager. And then check if for all demo, we need to check if fragment. Is Player fragment. Okay, so if it's player fragment, then in this fragment human and find specifically this method. This method already is not unimplemented, but we can do is just press OK. We press enter and we create member function in the prayer fragment because Enter and David off here is. So now we have use a little leaf hint inside of a fragment. Alright, so actually willing to confront family, we can put here return because we need to find another, we don't need to find another player fragment anyway. So here, now we have this, so now we have this one here. And what we can, so what we can do now is basically 1 second, please. Let me check because half hero old old code itself. Yep. So now what we can do is create a method, one private method just to check. We can actually, sorry, it's going to be private. It's gonna be fun. And we're going to call this on is flow. You're splitting activity and and plus PIP port. Okay? Why we need to do this one? Basically, you know what we want to win. If we're probably abortion much bigger, probably we will have more than one activity. And with this one, what I tried to show you guys is we want to use, we want to handle we want to handle support for this specific project if it's deployed activity we actually this fragment is inside of the blade activity. If it's not, it will be false. So for this specific scenario, sorry, we're gonna put equal and then we want to return here, we're going to return a boolean actually. Okay? Fine. We don't need to, because it's going to be obvious once you write a code. So we can put here required required activity dot and then is required activity is sorry. Flyer active year activity. Yeah. And and require require activity. Dot has pips apart. So now with this specific function, we will see if our activities, player activity and also has bits apart goal. Here in this one. Now we can, if is playing an activity is relatively hospital support. And if it's done, if that's the case, then we put require, require activity, and here undergrad activity. Then we put enter, pick actually mode. Okay, here on pivot victory mode, we need to pass their parameters in a picture, picture in picture, picture in picture parameters. Then to do the no, to create this picture in picture parameters, we can actually do the same, but here on top, sorry, let's make it down here on top we can put out target API, because actually what we want to do is check if the code is Android O, at least. Ok. So we can put here private, fun and update, update, Pip params. So we have here up the big params and we want to create picture, sorry, big chor. Churn in picture params. And we'll create a builder. This builder IPAT, set actions here on these actions we want. In future videos, we're gonna create a list of icons with their functions, their events, et cetera. And we want to pass it here at the moment, we don't have any Lee, So we're going to pass it an empty list. Okay? Just to be totally empty. And here we're going to put built, Alright, so now this date P params between Picture brands, we can put it here and there we go. We have our left it. Okay, so now we'll go to the top. So now if we go to the top itself, we can set we can set fill things in O2 for their play. So for the plate itself, first thing we can do is just go up to the ViewModel itself. Ok, so here on the, on the BIM model we have this UI and the view model. We can put, we can create a data class which is called in on is, sorry, on this pledging changing. Okay? And we're going to pass here is playing because it's playing. Alright, so this is playing is going to be a Boolean. I wanna explain to you guys is plaguing chin. Yeah. Okay. That's plaguing. Sorry. You're going to be a Boolean and this one is going to return a UI modal. Sorry, is Bol, I need to put coupon. Yes. And this one is you a model, etcetera? And here, and here what we're gonna do is fun. When I create an a player events. He pledged events. And this one's going to be the bloodiest events from the, from the exit layer. We put here this one and player, player Dot event listener. They're gonna open this nothing. There's nothing there, but we can override one. And the one we want to override it exactly the same as this name. This O1 is on YZ plane changes, okay? So this one on the screen changes. But we can do is we are going to pass the model. And we're gonna pass the value here inside. And this one. It's going to be the UI modal is playing and inside we're gonna pass is playing. So now with this one, but we're going to do is we want to set this as the event, the event handler for the player. And then when the plane is changed, then we're going to send whatever is the value here to the, to the view. And yeah, and we're going to do everything that whatever we need to do. Let's move back. Let's move back to the fragment, okay? And one of the things we need to do first before everything is the following one. So we're gonna create a variable which is going to be, we're going to be constant, okay, scurvy and multiple. And here this variable is going to be explaining, ok, this is playing, is going to, we're going to get only, it's going to be the value only, and it's going to be from the player. Okay? From the player is playing. Okay? This is what we want to do, is if it's before, whatever the reason, you know, play is no looks at it and we want to pause here false. Okay. So just to, you know, just is not going to be anymore, you know, an optional is gonna be whatever happened if his true, true, if it's false, all buddy indicates you would need to know then is going to return false here. So let's get this one. And we need to include this one. I forgot to add IDs here. Okay. And is playing because if he's not playing there, if it's not being in the period, there is no point to enter a new picture in picture mode because it is going to only open, it's gonna only open a window. There is nothing that's going to happen. It's going to be that stopped source, just annoying. So yeah, we can put this on there. Good. So now we can actually open on or will create, view create. Okay? And here on the bill create we can actually start to, yeah, we need to create. We need to do is you need to either be model seltzer. Sorry, I did I didn't create the BIM model seems horrible. Private Model, View, View Model. Okay, it's going to be pleasure V-model, player BU model. Okay. And then by BW. Okay. Yes. Sorry. Yeah. Remote dels. Sorry. This one. Yeah. And we included this just in case you didn't see this one before. This one is this. This main thread method, as you can see here, is included in this library. In this library instrumentality, OK, you can use, there is also activity TEDx, but because we don't want to use it there, you know, I just, I include this one, but just to know you to know that you can actually find excitation for the activity in activity TTX. Okay, so now we have the V-model. Let's initialize. So this listened or remodel. So we can put this wonder model and then observe. And if here on the lifecycle it's going to be Bu, lifecycle owner. And here on this one is going to be observer, sober and heal this observer. We are going to create a new method. Okay, this medium efficiently update UI. This one a little bit of the life cycle. And we know have this method needed. So let's create the function itself. Sorry, let's create a function and create the function. And this is going to be inside on the exam. And here we can create a when and when. We say, okay, when you I model. When you are in model, actually we can put the remaining branches and known nothing. This one is known as going to be no less put else. And then dels is going to be unit. Okay. We know it's not gonna send it something else, but yeah, this one is cool. So now, now we are going to listen to all or events from the view model itself. And what we need to do is the following one. So here on this one is going at say, if is pleasure, remodel and a half-step support. In this scenario, then we will not require activity. Greater activity are inside of the activity. We wanna set picture in picture, picture, in picture, and, uh, but I'm just going to be exactly the same. Bananas, absolute date, paper NumStat. Ok. This one, nothing else. Cool. So just wanted to highlight a few things. One of the things is on, on user live live hint, you need to, you need to initialize the unit to open with the enter picture in picture mode and the player. You need to set picture in picture mode. Okay? So picture in picture params and all these things. So this is politically that open. So I think everybody thinks should work as expected and not actually. One thing more, I need to implement. Sorry, I wasn't very close to forget about that. So yeah, one of the things we need to, one of the things we need to add here is yet the player, sorry, yeah, my apologize. Yeah, sorry. I mean, they're released in initializer player here when we actually initialize the player, okay, we need to. And so yet is player dot add listeners. So are here on adolescent outcomes. We can actually pass in. We can actually pass that. And yet the model, sorry, V-model dot play events. Okay, so now we're going to, now this one, what's going to happen is we're going to add the list that we're going to listen the listeners on the BIM model when the player change is going to return this player. So this is clear changes to the bill. And here on the view, sorry, this on top. Yep, and here, when the player change is gonna send here, and that's practically o. Okay, it's now, let's try it. Let's try running the application. We're gonna, so this one here, we can see the player. And the players should start anytime. Okay, so there we go. So let's see if it's works. The picture in picture mode. Yet the Rio, we have this picture in picture mode here. That's the only thing is I think we actually see. Yeah, that's perfect. Okay, so now it's empty. There is no icons, but yet we have these floating window here. So that is everything for this video. Okay. I know this video is a little bit long. I wasn't expected, you know, do it that long, but I think is, you know, if we actually see everything together, then everything is going to be more clear for you guys. Ok, so in the next video we will see how we are going to start to include the icons and how to, how to give them event listeners, et cetera. Ok, so I see you guys in the next video. 4. Handling PIP mode changes: Hi, in this video we will start to add the method, the method on picture in picture mode change to handle when actually entry on Picture in Picture. And where is he dismissed the state. So to do that, the first thing we're gonna do is go to the bottom, whereas all the overrides methods. And here we're going to start to add ONE picture, picture in picture mode change. And here on picture in picture. This one, this boolean will become true or false depends on entry in picture, in picture or not. Here we're going to create that nice stain. Yep. And basically we're going to and if we enter a picture in picture here in future videos, we're going to do here into that. We're going to add actions, the actions for the cyber. Okay? So we're gonna create, later in the next video, we're gonna create a delegate where we focus. Sorry, I didn't savor. Sorry. So yeah, in the next video we will create a delegate where we actually, we will handle all the events from the, from the icons you wanna include in old picture, in picture mode, that window, okay? And here in wanna create an else. And it's going to be exactly the same thing, but they're, then we're going to remove. Okay. So this is, we're gonna leave this on this one as it is. So we know in a future video, we'll do this one. And now here what we're gonna do is just get the player view and we want to hide all the controls. If we are in the picture, in picture, or we're going to display it again if we are, if we come out at the gym, picture back to their player. So here we're going to say is in picture, in picture mode. Okay? So exactly the same thing. So it just, we will put here to the opposite. So we enter a picture in picture, we will hide. And if we are not in Picture, in Picture, and it's gonna display it again. So that's, I think another thing is this, this method is useful anymore. So we just remove it and remove the method from the assumed because we don't want or need it anymore. Ok, so now all this one is correct. Let us actually try it. And we will see what's going on. Okay? So now we have the video, sorry. So we have the video here. And then yet, so we see the controls. The controls are there. So display as we go to the picture in picture but grounded and now the controls are not there anymore. Yep. So we'd like to picture in picture is there again? Back to the yep. Perfect. Cool. Okay, so in the next video we're going to start to include the, the receiver, the receiver. And we're going to start to add the actions and icons. See you in the next video. 5. Create and use PIP delegate: In this video, we're going to create a picture in picture actions delegate and use it on or payer fragment. So for do that, at the moment, we don't create a new package because this is one is not going to be part of Maine. There's one, it can be used anywhere. So let's actually create here new package. This package is going to, I'm going to call it people. You can call it as you like. And here on people, we're going to create a new package and these packets, Yeah. So they can create both together, but yeah, sorry. Delegates. So we're gonna call it delegates. So here on delegates, we're gonna create a new file, a new, a new class in this class is going to call Picture in Picture actions delegate. So now we have our picture in picture actions delegate. To do this one, you know, we need to include the player actions. Here on this, on this project, we want to only include play and pause. You can feel free to add any action you like. But we're gonna include only pre and post. So let's start. So let's create an enum which is going to be our parser elbow. Barcelona, fossilized. Yep. Parcel lines. And this and this partial eyes option tip. Here we're gonna create a new class. And in this enum class is gonna call, sorry, it's gonna call player actions. And actions is one. It's going to be a parcel eyes, upper point allies. I think it's something that's Salaam per se la, yet personal. Alright, sorry. Yeah, Passover. And we're gonna put here play. Cool. So yeah, we have now or NO with two actions, play impulse. And now it's time. And now it's time to create or receive receiver, Okay, the big picture and picture action receiver is going to be a broadcaster cyber also. So broadcast, sorry. Class B is Picture in Picture actions, Action axions, saver, which is going to be extended from broadcast range cyber. And here on this broadcast receiver, the first thing we will want to create two constants. And these two constants is going to be, you're going to want to call this one, for example, control. Controls action. And let's call controls action. And I want to call it extra, extra control actions. And we're gonna connect here your next, oh, sorry. Extra control action. So we know after we have this, yeah, we need to sorry guys. We need to include the member this visionary or cyber. Okay. So yeah. It's not implemented yet. Let's call it this one to do. Implement on similar up Congress saber and receive, okay? And this one, alright, so the reason I remove the previous one and this one is because if we are going to test and it, it hits, you know, that to do that, to do it was a function and it will crust application and we don't want that. We just wanted to do. Let us know we are actually need to, we need to come back here and implemented ourselves. Okay, so now we have the broadcast receiver. And here on this, let's put it down. And here on down we're gonna create an IntentFilter intent filter. So in intent filters is going to be an intent, intent, sorry, IntentFilter. And this intent filter, we need to add an action. It's Apply. So in here we're going to add an action, and this action GNP controls action. So now we have this one, this mode and this control action here. Okay? So now we need to create two methods, one to four retreats for register or address cyber and another to clear or cyber. Okay, so let's create first an instance of a picture in picture action receiver. And then it's going to be Picture in Picture Action receiver. So this is our instance and then we wanna get function. This function is going to call it is their server. And here down we can create another one, which is called Fun clear receiver. Ok. So one is going to be resistant 10V to remove it. And here on the registered we need a context. This delegate actually it doesn't include the context. So when do we actually create an instance of the All delegation of our delegate, we need to include a context. So we're gonna put the private context, context. Cool. So now here we can actually contexts dot register, receiver, and here ON sister cyber, we need to pass the picture in picture is really cyber. And, and here we need to include the IntentFilter. So here we can create the actual receiver IntentFilter. So again, this one is practically everything we need to do for a resistor or receiver. To create that method, we need to create Now, the one for clear, there are cyber, so it's going to be context dot, unregistered or cyber. And here we need to pass exactly the same picture in picture action or cyber. That is not this all. Okay. One of the things is I think this one can cosa crass. Yeah. Okay. Yep. Just in case just in case contexts become normal or something. Okay. We don't want to or application grass. Let's let us lets include this one. Let's include this one in or in a try-catch event. Yep. Let's pass a legal exemption. And here we can actually pass the log, sorry, log in. And we pass, we can pass it here, the error and the stag. Let's create objects and let's create a tack, prevalent concern. And your tie. We are going to just add the name of our class. Okay, cool. We have now or the district cyber him. Okay. So this one, actually, we need to include an LLC. We have a warming here. What's going on? Because they say, you know, this one. Okay, just limited. Louise had the acid is so it's gonna tsunami more clear for us in this one. This is the inter filter. So we need now to include all delegate. So to include or delegate, we can go to the top on here. For example, when create a private bond between Picture and delegate by lazy. And here on the Lazy, an update action delegate. And we want to require, require activity to this is going to be the activity is going to be your context. And now we can, now we have declared. We can come in down here on picture and picture. And what we can do is just registered or cyber. And here down we can clear our cyber. So now when we enter in picture, in picture is gonna resistor or receiver and when we clear or not clear or cyber, so that is, this one is perfect. The only thing is missing in this video to finish, it is simple. First of all, lists. Let first of all, let's clear. Yeah. First of all, let's clear that on the format, that's clear that import and using import unless format all Yep, and list. Let's see how it works. That put here two breakpoints and we can actually run it in debug mode. And we are going to see how that is invoke. Ok, we have an error here. Personalize. Alright. Okay. Under sobered, personalized. Okay. I know what is Asian. Okay. I know what is the issue? The issue is the following one. Okay. If we go here, we don't have it will have no include these. Yep. I think that's so yeah, I think that that is also ok, guys. If, for example, you know, that person that partially doesn't work, just include just include the Scotland fertilize and should be everything's who could work there. Okay. So we see how many things? Yeah. Yeah. Cooler. Less less renowned debug mode because I want to see, you know, we actually invoke that and it doesn't crash, everything's going fine. Ok, so now we are in debug mode. Its initial run, yep. Okay, so Henry, yeah, exactly. So now we enter in the word motor register alter cyber. And then when we go out from our debug mode, then yep, exactly. We clear or cyber, that's is exactly what we are looking for. Ok guys. So we're gonna call it for this video. And in the next video we're going to start to include all the icons and make it work, you know, to control also all player from there. Okay guys, I see you in the next video. 6. Create icons and handle events: Okay, now it's time to create awesome icons for over a picture in picture window and a handle some events for the player itself. Okay? So to do that, first of all, what we need to do is create the icons. In order to do that, we hear a way recreate that before the companion. Object. To create this tag, we actually hear down, we can't extrapolate a function to create all these icons. To do that, we will just, first of all, as we know, we need to create a target API here on top to get behind repeated build dot version codes, dot o, which is Oreo. Yep. And we need to include this one. Yet. We didn't include the Bill, bought the bill, sorry. And then we'll print function, create peep action. Ok. So now we create the PIP action. And here where we create beep action. First of all, we need to include the context. We need to pass the context. And also we are going to bus if actually the player is playing, is playing. So, and this one is going to be a Boolean. It's gonna be 12 falls. There's going to be a Boolean, and this one will return a list of remote action. Cool. So now we have this one, the lists or remote action. And now let's create first and you know, appending intent for rate constant. Create spinning intent. Pending. Intent is gonna be appending intent. Sorry. Apology for that. It's not happening. Is not happening. Intent is the position in a row for the picture and picture. And after that, it's going to be our player action. This one, yes, it will return up bending intent, sorry. So now this one will be the new intent and we put equal with open curly brackets. And this one will return two things. One is going to be the request code and the second it will be a timekeeper. So now we have the precursor on tight. Let me make this only to be bigger because we don't need this flood routed. Yep. Now, when we have this inside of the creative pending intent limiters amend this straight pending intent. We can create now our intent. This is the intent. And this Internet will be an instance of intent. Where we, inside of this, we're going to put the name. We need to find the actions which is going to be peep, delegate dot actions, not sorry. Beep is delegate, speak receiver, actions. Receiver, sorry. And then we're going to put the control action. We want to apply. We want to play some things. We're going to set the package from the context. We're gonna get the package. And then we're going to put extra here. And these extras, we're gonna create a bundle off. Bundle off. And in the bundle off we're gonna wanna create Pip, receiver dot. Extra controls and difference going to be two type. Yep. Alright, so now, so now after this, what we will need to do is just create a pending intent. Now we have the indium and we're going to return the pending intent. So pending intent. So the pending intent dot get broadcast. And here on this get broadcast, we need to pass four parameters is called context requests, request code, intent, and flag. So we're going to pass the context. We actually send it. We actually include here when we actually get the function, create a function context and then the self, the second one, it was there in the request code. So yeah, we passed the request code and then we'll pass the intent. And the fourth should be the pending intent. Pending intent. And then we're going to pass the flower, which is in this case it will be flagged. Update current. Okay, so now we have or pending intent created. Cool. So right now after this, but we need to do is create remote, remote action as, as here. First of all, this one, this one will return a list of. And here we're going to ascend this list now is empty, but we're going to create or icons and we want to send it here. Okay? So first of all, as we only going to have one, but we want to switch play on post depends if it's playing or is suppose we're going to put here body able play and bows action. Okay, so now what we're gonna do is get the is playing. If it's playing, then we're going to, we're going to have one remote action. And in this remote action, we're going to pass the icon and we're gonna create this icon from resource to resource is going to be willing to pass the context. And now here's where we are. Dot drivable, DOD IC. Pause, pause. Okay, 1 second. Let's include the less include. Sorry, let's include the are the resources and narrowed. Yes, it's going to be fine. It's gonna be pulse. Why? Because if his play him, we want to see the pose because we know the next section when we click is both and it's going to be in the opposite way. If is both, the book can click the playboy, the play icon to make it play ball again. So now we have this one and now we need to include named Allen, the description. So we can create a free resources get string from here from context or dot string. Note. Let's pay POS text. And now we can pass the description for accessibility. Let us create these two things, these two strings we're going to pause. And description allows boot on. Now we have the description that and now we are going to create a pending intent. And this one create a pending intent. The deposition for this is going to be is going to be one. And the second is going to be, this one is going to be false. Okay? So as we know here, when we create there create a pending intent. We need to pass one position, which is this one's going to be the position, and then this one is going to be the action we're going to handle. Good. So too do when he's pose, we need to do exactly the same and it is not playing. Then we buy secularism except this, this one is going to be play. This one is going to be play. And this one also is going to be play. And this action is going to be playing. Let's add some strings play. And the description is going to be playing Bolton, sorry, playbook. Okay. So now we have all over. Now we create these toggle for both icon itself, passing the list. You can actually create here all the icons you want. Okay? I just, I just where we have this, we have the play imposed for this example. But you can actually put forward and you can put that number two and number three, etcetera, how this one is going to be the position and on their own. Okay? So we have only this shoe because they list off under. The next step is going to be, the next step is going to be actually make some changes here down, okay, this intent filter, this one, it should be, it should be include here, done. Okay, so now it didn't find it because we need to get the IntentFilter like this. So now we have the IntentFilter, thus the school there. And we need to make some changes here because we want to handle the events. We want to now implement the odor, the odor cyber. When we actually click on the, when we actually click on posts on play, we're going to receive an intent. And this is the intent we're going to handle if his pose or if it's only for display. Here. First of all, from the life, that life data, we're gonna create a private variable. Buddy able and appropriate ball, sorry, which is a constant. We're gonna, we're gonna put pith action. Okay? This one is going to be our mood and mood turbo. Sorry, downer, live that down. And here, this one is the blade acts were going to play your actions. And then it's going to be like that. So I think I put it wrong yes, because it's moved tabled life that OK. And now to remember to do, to change it from outside. So we're going to have a body here, which is this one is public. This one's going to be private. And we're gonna call this one pipe action. And this is going to be equal to, sorry, this was going to be action, and this one is going to be live data and survey, sampling it action, player action. And this one is going to be hip fracture. So when we do it in this way is because we don't want to, we want to, we don't want to change the, the picture in picture action from outside from this class. So we can create its own, which is metabolite can be changed and we are going to handle it. We're going to only listen the events from outside from this one. So in this case we will not be able to change it from outside from the class, okay? All right, so this 1, first of all, we want to take this actually P0 and P1. It's not so clear, so let's change it now. Call it context. So now as this one is going to be and this one is going to be intend. This intent is optional. So let's parse the value. And here on the volume would put extra, gets parsable extra. And we're going to actually pass this one inside the possible extra. Perfect. So now when we have it, so when we have the intent, we're going to pass the Percival and we're going to, and this one will be triggered and they want to list the event on this variable. Okay? So, yep, another thing we need to do is we actually need to handle it from outside the cell. We need to listen to the event that they went from here, from the receiver outside to get, be able to get this variable. To do that. Basically, what do we need to do is hear down when we actually after, after registered receiver, we need to return peep actions recital. So sorry. And this one, and this one will return. The action or cyber perfect pair. Think is everything is, everything is done here on this side. Let's, let's go to the fragment, into the fragment here, but before we actually pass it an empty list, that's why we don't have any icon. So now but we need to do here is the following one. It may seem. Yep. So we can actually go beep, beep, action, delegate, dot, create actions. And here we require the require activity. And this after the activity we need to pass, then is playing. Now. We pass, hit all the icons. And now at the bus all the icons. We need to listen to the events. To listen to the events. We're gonna go here, this one now it returns action raw cyber. So let's go. Let's create a variable, cyber saber. And now from here, from this receiver, we can put receiver dot peep action dot ops, observer. We are going to pass the life. The skull is the life owner, live view lifecycle owner. And this one is going to be, we're going to get the heat, the action, get action. So sorry, action. We pass the when. And here we're going to send, you know, when the action is pose, then we're gonna pose and if it actually display, we want to play the play. So young when, when the action we have this swarming and when the action put the remaining branches, have play impose. Let's put the else just for good practice, especially unit as it's, nothing's going to happen. It should never play imposed, but at least you are actually handled it and it's gonna go here, stray away. Okay? So now if it's play, we're going to get play, player dot, play, play, play. And if is post, we're going to say player dot thoughts. Okay? Let's see, we have this an error here. Yes, sorry. This one, this player is optional. Okay? So now everything, it should be clear. We include the actions, which is all the icons. From the icons itself. You know, the it will create a pending intent which is going to include an intent. Yep. We pass the list here of icons. And actually, yep, and we create these multiple live data, which is going to be and the Pip, Pip action to listen to the changes from the, from the private variable. And when this one change when we receive an intent, it's going to be handled at to the fragment and into the fragment. Yep. We observe the changes and defensive players going to be playing this pole is going to be posed cooler. Okay, so let's try your code. So now we pose, we play so or mobile emulator unless see if everything is correct. And now, let's go. Cool. So now we have this wonder. You have the base. Okay, so, yeah, squawks access, access vector. We can play, pause. Play. Pause. Looks perfect. Cool. Yep, envelope. And it's still pose perfect. So this is everything for this course. I hope everything you learned here is useful for you. And please, if you have any doubt, everything wasn't not beer for you or anything, I can help else on this one, please let me know. Libya comment our bad to you as soon as possible. And if it's not, please leave it the feedback. Thank you so much and see you in the next course. 7. Outro: And this is everything for this course. If you follow my steps at the end of this course, you will have something like I have when you open data application. The picture to picture. You should have a simple video. And when the video is playing, you anew press the background Morton. You should go to them, to the picture in picture. And you open, you have these Putin, which is opposed to click decompose. And you can continue playing anytime when you come back. And for example, you pause the video and you bought a new click again to the backroom Wooten, you should not go to the picture and picture. I hope discourse is useful for you. And of course, if you have any doubt, please let me know. I will be more than happy to help you. I see you in the next class. Bye.