Week 12 - Notification & Work Manager

okay um in this sections we are going to see how to create us scheduled notifications which is we can define at what time and what date the notification will appear okay so um we we are doing this in the to do applications we adding this speaker as you can see here we click on the date that you can choose the date and also the the time picker we can pick the time and when the to do offered you or comes up um you will see the notification about your due to okay so stay tuned on the next hours to study about the notifications and the work meaning i just gotta say this it is no secret i'm feeling so great i'm riding that star that took me straight to the highest place on top of the world all right welcome to week 12 advanced native mobile programming and this sections discuss mostly about the notification and work manager okay so um as usual i will explain a bit a concept before we continue on the the projects here so um i know that i've already explained about notification previously in week 7 but this time we will combine the notification with the work manager to create something called like scheduled notifications a notification that trigger on specific date and time and this notification should appear even the app is no longer active okay and of course i will show you how to work with book managers and we're doing that on the actual projects yeah and then and as you know it that in the letters android for example for especially for oreo above you will require to create notification channel okay so the notification channel is mandatory okay so before we um talk about work managers and how can it give a benefit for us to create a schedule notifications you should know that actually notification styles comes up in different styles yeah so the notification comes up in different styles so the basic style is something like this like this here the black one is kitkat i guess i'm sorry no good oreo yeah okay this the black one is oreo um this one is no good and this one is marshmallow i guess okay so um this is a basic one and this is a the big text style of your notification as you can see you see the large area of the notifications cover up with attacks this one is a big picture style which is um same as a big text style but this one the last area replaced with a giant image here last picture and this one is notifications with inbox styles which is you can see several message of your inbox and then the next one is messaging styles shows you um messaging uh notifications that use messages messages from one person with another person just like you see in regular messenger applications and the last one is the media okay this media styles your shoe um different shortcut that you can react about that notification so for example if you see this notification about someone posting something you can give a like you can make it fair for its uh ad as a friend and so on so you can to directly do the action directly from the notifications all right so uh what is the difference between boost and schedule notifications okay so uh the definition of push notification is a message that pop up on user device and usually triggered by application publisher okay in certain conditions so for example i would like to give a promo to my user my application user so i will define a boost message notification so i can broadcast my message to all my users of my application so they can receive that notification this is called boost notifications okay and what is a scheduled notifications okay schedule notification is the pop-up message that have been planned before on the background process so it will deliver at a particular time okay so for example um for instance yeah you set an alarm that needs you to wake up at 7 00 a.m at the next morning so so the notification probably shows up to you at a before that time and try to wake you up yeah just simple like alarm things in your phones do the same thing also okay next um yeah uh you already know how to create notification a quick seven so i will focus more on the work manager okay so what is bookmanager it's an api that makes easy to schedule some tasks that are expected to run even the app axis or the device result okay so even the ef is not axis yeah i guess and device restart so means that um the work manager minutes a process that can be run in the background even your application is no longer active and it will executed the process uh at a time okay so to enable work manager you have to add following dependency yeah you see the implementations android x work runtime with 2.5.0 version here right next um to work with the work manager api you need first you need to create a worker class so the worker class is basically an extension from the worker yeah worker class here so it requires you to pass the contacts and the parameter here and there is only one function that you need to implement which is the do work this one is a method that runs unsynchronously on the background thread provided by a work manager so this one will run unsynchronously and then inside this function you you put the process you put the tasks that must be done okay on the background okay you put the task that must be done on the background for example uploading image downloading updates okay checking for an update yeah so for us and so on and so on okay so it it do something that runs on the background so the result would be success could be failure and retry if if failure shows that uh shows on this process the worker class may retry based on constraint and policy policy that you put in the worker request okay so let's talk about worker requests so the worker the work request is an object that contains all of the informations needed by work manager to schedule and run your works means that you put different constraints you put different configurations of the worker things so the work request with will contain that information and send it to the work manager there are two derived implementation of this class yeah we are not directly use this class but we usually use the extension of this class and there are two distinctive implementations of this class which is which is uh really useful the first one is the one-time work request and the second one is a periodic work request one-time work request is used to create a job that runs only once yeah periodic work requests as as shown as on as its names it will run a task it will execute the task periodically within the time period okay it is the interval of time period so for example you will you can create something that runs every hour maybe to check for the latest message maybe to check for the latest update and so on okay so um this is the codes how to create a one-time book request and basically it's very easy you just need to builder and my work here is the worker class that you profiled earlier so that one okay and you can set an additional config variations a lot of configuration you may set on the work request and just call build okay so this one is an example of periodic work requests in the periodic work request you have to define the interval time so for example um the the worker here the save image to file worker viewer will be repeat every one hours yeah every hours one hour so so every hours it will execute this task save image to file right so that's one uh very easy and the work request also can have configuration such as the work constraint here this constraint to ensure that work is divert until optimal conditions are met yeah this one this one is not me but yeah the constraints which is checking for several conditions if not if the condition is not met the works is pending okay if the word is different so there's a four conditions that you can set up such as network type which is you you can detect whether the applications the smartphone have access to the internet okay battery not low okay so the works bill executed will be executed if the battery is not low the request charging is the opposite of patreon low the device is idle and of course the storage is not low okay this is the first constraint and then you can define the constraint with the constraint builder something like this so in this example we define a constraints that check for a network type and method means that is the smartphone connected to the internet and is the smartphone requires charging okay if put a written through means that the works is valid and it can be executed okay so this is the work request one-time work request builder you you define the worker here and you set the constraint based on these conditions which is the my work here will be run if uh the smartphone connected to the wi-fi and it requires charging yeah it's a low low battery mode okay so that's how to work with constraint and next um how to create a delayed work um previously as you can see in the in the previous example something like this for example the one-time request here it will launch of run immediately okay there is no delay at all if you want to add a delay or something that prevent it to run immediately you can define a set initial delay configurations and you can use different time units yeah in either minutes seconds hours and milliseconds and so on so for example here is this is a one-time work request and it delayed 10 minutes so this request will be triggered 10 minutes after it's deployed okay sometimes you need to send an additional parameter of data to the works in order to do something yeah so you your work may require input data in order to do its work yeah for example that works that requires you to upload an image which is require the uri or url of the image to be uploaded as input so in order to do that inside the worker class you can retrieve the data using the input data here so you get grab the input data dot get strings and this one is called key the key value pair so um you access by key yeah and then the result will be uh put inside this image you the input and we do something with it and inside the work request you define the pair of key and value yeah to be sent and read by the worker class so inside this work request you define the keys image uri the value is sap blah blah blah it's separate by a two keyword here two keyword and it will read inside the classworker by uh using getstring or get integer and so on same like you read the intent pass in 10 yeah tata intent okay and after one after um after you create the work requests and the next thing you need to do is to launch or queue your works yeah so once you define the work and work requests the last steps to is enqueue your work the simplest way to end your work is to call the work manager and queue method and then you pass the work request you want to run so the code seems uh very easy to see here it looks like this so you define work requests and then into in the next line is you call book manager get instance and enqueue my work that's it yeah so when it is executed it will um scheduled on the background process and it will trigger your tasks at that time yeah at that time all right how to cancel the work yeah if you no longer need to uh you do the works you you can cancel it by uh cancel it by accessing or accessing the id of the worker or canceled by the unique work i name yeah unique work name and cancel the works all works by tech yeah this is very useful if you have more than one worker and then you can define the same tech yeah define same tag on all this worker and then you want to stop it all so you can cancel it by text all right and actually there's a lot of things you need to know about the word manager but i encourage you to do the self study about book worker retry and back of policy means that something failed what what policy you should do uh about it yeah you can rewrite or just ignore it how the observer works and how to change the works and and so on okay okay that's the concept yeah that's the concept of broadband internal notifications let's try the exercise okay i need you to open reopen the to do project uh which is we was created on week eight okay so we go back with the do not verifications so what we're going to do is creating the notification helper okay it's a helper class that provide modular and practical object to create notifications okay so let's do that open your project and okay let me close the emulator first okay you can right click on the util new kotlin class file choose class and then you can type the class name of notification notification helper right so this is an empty classes and because we are going to use pending intent you require to use the context here as the constructor so you define a context here okay so first you need to create two things the channel id and notification id in order to work with the notification so we can define it right for fall channel id it's basically um random or unique yeah unique string that you can define on your own to do channel id and the next one is the notification id okay once again this one is an integer it could be it could have a random integer number okay next um we are going to download first the two file from the uls okay the doodoo chart and the checklist png okay so i'll already put it on the uls so if you see here we got to do chart and the checklist you can copy it and paste it inside the drawable okay just refactor okay do this do it once again and next time and next one you choose the normal versions okay refactor so you have to image the checklist png it looks like this and the two two charts is jpeg itself looks like this so we are going to use this image to choose to search the user through the notifications okay because we are going to implement the big picture styles notifications okay the next one we create the notifications channel so the notification channel is important if you work with an uh emulator or a smartphone uh oreo above yeah audio api or above okay create notification channel okay something like this um for user that use previous under versions yeah like kitkat and old android versions no need to use to create notification channel but this one we have to check it with the build i think you need to import it versions dot castiga integer here bigger than build dot first and quotes dot oreo yeah so we check first if the user smartphone is oreo or above so you need to create a notification channel okay um so we create new one fall channel notification channel okay we define the first is channel id this one is title you can write any title on any name so i think i've used the same thing like channel id and notification manager combat sorry sorry not not the third combat okay notification manager for uh dot importance so the third parameters is the priority of the notification so you can set it top priority or just use the default okay and next you can define additional configurations like descriptions like this yeah to do channel descriptions okay so you can use something like this or you can follow along with uh you can do the same thing like on the slide so instead of um calling the channel description here you can use apply okay let me show you so you got just called apply so whatever you write inside this apply you can access the attributes of the notification channels directly without write the channel again so in this case if you want to access the descriptions like in in previous example you just need to call the description here this description is belong with a channel object here so we can equal set equals here ctrl v yeah that's it okay for channel notification channel apply and then reset descriptions next we create the notifications manager okay contacts that get system surface contacts dot notification service so we uh require uh we request the service of the smartphone here especially the triggered notifications so the notification manager have this create notification channel and we put the channel so basically we use notification manager to create notification channel based on these configurations okay so that's it for create notification channel next we create the notification function fund create notification right so in order to make the notifications modular so it can be used in different occasions i will provide a parameter string title and of course the content or the message strings okay okay next we call the create notification channel first next one uh we going to create an intent yeah means that if the user thoughts or click the notification it will trigger the intent object that we define here so we create the intent by using the full intent equals okay intent okay um context the main activity class dot java so means that this intent will open the main activity if you launch it okay and we want to deploy a flag yeah dot apply once again i do the same thing like previously so i i can set something uh define a configurations for this intent by just calling the the attributes like flex here okay so intent dot flag activated new tasks or intent dot flag activity clear pass okay so what is dislike for use for okay to flag activate the new tasks if said this activity will become the start of a new task on this history stack so the main activity will shows as the start at the very beginning of the backstack yeah so it will be defined as the primary the root yeah the root activity on the peg slag flag activity clear task this tag this flag will cause any existing stacks that will be associated with activity to be cleared before the activity is started just for example if you already have a backstack fill it with multiple instance of main activity it will be destroyed all and it and this flag will create a new main activity yeah so it will destroy the remainder main activity the other main activity and and make sure that there is only main activity in the backstack so this is very important okay next um we are not launched to intent immediately we are going to use a pending intent pending intent okay how to create painting intent is very simple get activity activity here and you define the context and the request code is zero and the intent is the object of the indent and the flag is zero so we put this intent in here the request code zero and flex zero so what is spending in them pending intent is a token or an object that you give to another applications yeah as such as notification manager other manager and so on that allows those application to your to use your permissions to execute a predefined piece of code means that um even the application is no longer active we can launch the intent so this and this intent will handle by other applications by operating systems and it will launch whatever you define in here so it will call the main activity okay right so next after you create a pending intent we are going to create the notifications we building the notifications so because i'm going to create a big picture style notifications so first we need icon we need a bitmap icon okay we call bitmap factory dot decode resource context dot resource comma ardor drawable dot so we going to access the okay we need to import first to do char okay so this one is the big image of to twitter the jpeg yeah so we load it inside the full icon next we create the op notification object by using the builder notification combat dot builder to contacts and of course the channel id okay so it use a method chaining so we can set another configurations so at first we set the small icon and you can directly access the small icon by using the r label and we set the luts icon also and this time you need to access the object of bitmap factory and next we set the content title okay the title of notifications which is we can grab from here okay next we set the con 10 text once again you can grab it from this message here okay next yeah this style set style okay in this style we are going to use the big picture style notification compat dot pick picture style of course you can experiment with another style like media messaging messaging style inbox style or just a basic style but this time we just worked with the big picture styles and inside it you can define the big picture bitmap file which is you can access it from from icon and pick a large icon just set it as new because i'm not going to choose a large icon at this time so i just use this to show giant image under notifications okay next set content intent means that if user click the notifications it will trigger the pending intent the pending intent will trigger this main activity to comes up to created on screens next set priority you can define it as uh priority default and finally build it yeah so we built the the whatever you see the configuration here as the object of notifications okay so the notifications notification manager combat dot from contacts dot notify okay so we put the notification id command notification so this is uh the functions to trigger notifications okay so this is whatever we need to create notifications let's try it in the create youtube the to create to do which is located at the create tutor fragment here so okay on the button creates okay my creator to fragment still not use data binding we are going to fix that later but let's try the notification first so after those things we can call the notification helper okay uh feed i'm sorry should be uh you can access the view the context via view here or it yeah whatever you want you can access vfu or it just access it from it it it dot con text okay and call the function of create notifications this one okay it requires two things the title and the message so to do created or just say yeah the two to create it and next the message will be a new doodoo has been created stay focused right so that's um uh that's how we define uh notifications and let's try it yeah okay let's try to run this let me play run the emulator first and play okay i'm going to pause and i will show you after several seconds later so let's try it we click this create new to do we enter something here and also something in here and create to do okay the notification shows up as you can see here it used not the checklist icons but it's not colored yeah it's uh it's shows as a shadow here i guess or as a silhouette and when you drag it down you see this is the notifications with the icons shows in here and you drag it more you can see the big picture styles as you can see here right if you uh click on it so let's let's close this app okay close this app and you drag it you click on the notifications tap on the notification it will launch the pending intent and it will launch the main activity okay so it works fine yeah so let's combine it with the work managers okay on the previous example um you see that the notifications is immediately appear on the week seven we can create a delay with using the our excel focal routines but this time i'm going to set a delay notification using the work manager api okay so in order to make it works you have to implement the work manager api by opening up the build grader module in the dependency one here you type the implementation android x dot work work runtime i mean ktx 2.5.0 don't forget the signal wait uh several seconds to activate the work manager okay next um we are going to create worker class yeah and set it as tutu worker so back to the i think this one is in utility class okay right click on the utility class new kotlin class file and give name as to the worker class yeah something like this okay we extend this studio worker with the worker from the work manager so just type work yeah worker here and wait okay okay let's so don't do that so uh first create this constructor first the fall context con text second one should be params of worker parameter okay i think there's something wrong with this okay okay worker okay let me check it first okay guys i make a mistake on the implementation it should be work yeah not work okay work yeah signal first okay so we can extend it to worker at this time you can see this android xbox is shows here when you click on it you can see the import box fine okay so it requires the contacts here and also it also requires the params fall terms worker parameters okay let's import it first the worker parameter here and pass it as the seconds constructor so it shows you it shows that it requires two things the context and the worker parameters okay uh let's implement on one and only one function here the two two works which is unsynchronous functions you can delete the rest okay next what should we put inside the two two works here as as you know that we are going to use this worker to trigger notifications so we um we do the same thing like this just let me copy it from the creator to fragment ctrl v it here and the contact should be the contacts from this one and the create notifications it uh it requires you to put the title and the message for the title and the message you can grab it using the input data okay i will explain that later but let's first access the input data get string and the key here you can provide it with title string here okay you have to convert it to string and do the same thing for the message input data dot cat string message dot to string so what you do here is you access the title key and you access the message key to retrieve value and use that as the parameter of great notifications finally you can return the result as success okay always success so even the even the notifications failed is always success okay next we create the real work request at specifically we create a delayed work request okay so let's reopen the the create to do fragments yeah because we already have the worker now let's let's uh use this worker in the creator to fragment yeah in here so let's um comment this notification helper and um create the the work request my work request and then we use one time work request builder and the type here you use the work your worker yeah use the worker the to do worker and you set the initial delay let's say 30 seconds yeah 30 seconds time unit dot seconds okay and then uh okay we set input data why because uh in the worker in the 2d worker here it accessed input data so we have to provide it from here so you just type book data off and you write a key and value pairs so key always string yeah so title and the value could be anything okay due to created and message to okay let's just copy it from here all right so it just shows you something like this let me delete the notification here right so this is the input data work data off a pair of key and value the title and the message so this input data will read by two to worker in here will retrieve by its key okay next just build it next um cue it using the work manager all right work manager dot okay i think you need to import it first yeah dot cat instance require contacts dot enqueue the my work request okay let me check it first um i guess i'm i'm not used to to create it here i think i will use the title here okay so just copy it paste it here and the notes copy it and paste it in here i guess okay so it shows you um a same uh it's your issues notifications about the particular tutu okay so let's do that let's try it let's play it and let's take a look how it looks like okay okay let's try to create a new youtube so you can write whatever you like um study study hard to get better mark yeah for example um let's create the to do here so you create click to create video the the to-do has been created and it set up the work request and it delayed 30 seconds so just wait a 30 seconds for the notifications appears okay because we set the initial delay here so even even the application is no longer axis no longer active i mean this notification should work fine because it's already registered on the background see this notification icon shows up even there is no applica no active application here so when you drag down you can see this is the title of the notifications which is the study the study titles and this one is the notes when you click on it it shows you back to the main activity okay right back to the main activity of the study okay so we can take out right okay so it works fine now let's continue on on the next sections okay in this section you already know how to create notifications and then use work manager to schedule your notifications that trigger on on the delayed seconds here so with that in with that knowledge we can create a scheduled notifications means that we want to trigger the notifications to alarm the users of the do do yeah due to that should be done in the particular date and time so in that case um we are going to implement the picture but here's the problem here group manager cannot handle specific work request date and time means that you cannot set a date and time that the work requests must be executed you cannot do that but you can only count delays in time yeah so you cannot set a specific date time but you can set a delays in time for example 1 minutes 30 seconds one hour one day and so on with um the alternative solutions for this problem is to use another api called alarm manager but it's beyond our topics today so um the proper solution here is we are still using the work manager but um the solution we we will try is first we convert the schedule date time into the unix timestamp unix timestamp is uh how many seconds um from the 2070 the epoch time until today here that's called unix timestamp and then we find the differences in seconds between the schedule timestamp and the current time so we get the differences in seconds and then after that we set the delay of the notification based on the differences yeah that's the solutions okay so based on the solutions let's um setting up our picker we're going to pick the date we pick the time and then we find the differences in seconds between two dates and reset delay based on that value okay so let's do that at first we have to prepare data binding as you know um i will create still not using the type ending okay let's do that first um oh yeah before we prepare the binding i think you need to add the new factor assets the calendar and what is called at the time okay let's open up your projects right click on the drawable new factor asset and look for the calendar right okay next finish do it again new factor assets let's find the time access time okay next and finish all right so we have two icon here that will be used in the text input layout okay so i will show you after this okay so next uh if you want to work with the data bending you have to wrap your layout with the layout wrapper so open the create fragment sorry attitude the the fragment create to do yeah i think i need to close others yeah okay and open your quotes inside it we will wrap everything with the layout okay don't forget to put the layout in the bottom and we cut paste the xml namespace to the layout okay that will do that will work for uh our layout and for our led for data binding and next what you need to do is to rebuild the project remember every time you make a change in the layout for binding process you have to rebuild okay just wait for several seconds okay then next um we add several variables the two two and the radio listener okay so in that case we create data here and variable variables so the variable names should be to do okay let's wait several seconds right uh to do and it take from calm model to do okay i guess and the other one is the listener the radio listener i think i will copy and paste from the edit to do is you still remember that we already create the radio listener for that one ctrl c because it's used the same variable yeah the radio listener here and we already have the interface for that next um create data blending on raw correspondent view and that means that we we have to bind everything here that includes the enter title here the txt title android text add equals because we're going to create two-way data binding opening and closing and to do dot title okay copy paste it and click the enter notes here this one should be notes for the radio button here i think you need to copy and paste from the edit due to okay so find find the radio button you just need to copy this tag on click into the high priority here okay check on click so you need to delete the the old check through here so android check cut to two priority true false let me minimize it okay so um in the attitude in in previous weeks um we set a check property based on the priority is the priority three which it's it will be checked as true and when we click the retro button we update the priority of tutu so based on that information we can copy ctrl c and paste it for the second radio pattern you just need to change these two and two and do it again for the final lowest priority radio button so it should be one and one okay don't forget to rebuild the project yeah rebuild the project okay so um the next one we need to do is uh create a binding for the button create so we still use the access by view access by view for listener for this great to do and we're going to change that with the binding listener so go to the in interfaces dot kt you already have it and we add binding the interface for binding interface button add to do click list thunder right okay and then we define function on button at to do yeah and we use only one view okay all right yeah this is the listener next after you create one you create a variable in the fragment create tutu and it should be in the top this one all right let's create new one variable farrier variable and should be a listener it taken from calm the view and button address okay and then we set data binding for the button so click the button create here click it and in the on click listener on click listener okay so we call the listener listener and we because we don't use any parameter custom parameter we just called the on button at two that's it yeah so this is we define the binding for the listener yeah standing for the button create to do okay all right because we define two variables here the radio listener and the listener we need to instantiate it first don't forget that installing it and and we have to comment the original button at this number but before we do that let's rebuild the project okay okay and we already done this and next we and we want to implement the button add to click listener on the create to fragment so inside the create due to fragment here uh you need to implement two things first is the yes of course it's the button at the top right second is the radio radio click listener all right so we implement all those members these two things just press ok you can see the on button at youtube and right you click and what you need next thing to do is just comment everything's in the original add button or button create so let's do that going to comment everything's okay wait uh it should be from this from this to the very end of the button create okay so we comment this out okay next we have the button and to do we have the radio click next we create the uh data binding variable private lit init for data binding it's uh from uh fragment create to do binding okay fragmentation i hope still you still remember what is this yeah it's taken from the name of layout the auto generate classes from uh kotlin and the oncreate view we are going to command these returns and we create the another version of uh inflator form from the binding so we call the data binding equals theta binding util dot inflate we use the inflator from the parameter comma we still use the same layout dot create fragment create create to do and container and false okay should be looks like this okay i'm going to delete this one i'm going to delete this one and written returned the data binding to return the data binding as a view object you have to access the root property of the data painting okay okay that's it for the on create view next um we instantiate the several variables that we already defined in the layout yeah there are three variables here so um on the view on view created first we access the data binding uh to do i think yeah to do so we because this one is create means that um we can we can create an empty duty object yeah remember this one is not added just create a fragment means that there is no uh data yet okay so we can create an empty to do here we can define several default value for this object the priority set it as three and is done is zero right next set up the variable radio and listener okay data binding radio listener equals this data binding listener which is button here equals this okay yeah and then we put codes for the button yeah this one i think you can just cut cut paste or copy paste from the original uh button create let's expand it so i think going to or copy the whole things ctrl c and then paste it inside the button attribute ctrl v so let's take a look one by one so um at first we no need to waiter wait a minute um can we do it okay okay okay yeah at first we don't need to use this radio find view id delete it and second you access you created to do default to do it also not unnecessary you can delete it and the next one uh we add a few model add to do list off due to so what is list of due to here it's an uh to-do object and we already have it yeah we already have it and we can access it through the data binding here how to do that it's very simple just call data binding dot to do that's it okay you have to put the double exclamation mark because um this to do could be empty or could be null okay so make sure that it's not now data binding to do a double exclamation mark view metal at to do it's used to insert the new to do into the database okay to the table so we set the tools okay so chance it has fee that context to create it yeah and next um the same program the same codes that you saw you see earlier we have macbook my work requests and then 30 seconds delay and blah blah blah and so on and so on and the notification should be fee dot pop backspace okay so it's basically just same as a previews button but more simple than previous yeah because we remove everything from find view pi id and we just access the to do okay because we already set the two-way data painting and and we can directly use that to store or save it into our database okay uh now the radio click listener yeah so you have already have implemented so what you need to do is just copy paste from the attitude to fragment yeah so if you see this in the attitude fragment you also have android you click just copy the program here and paste it here yeah that's it right so this one radio click is used to um to set back the priority back to the object to do okay so therefore the two do always have the lattice priority value and it will make easier if it will be easier if we uh use the on it we use in the on button to do to save the tutu object right okay let's run the project um let's see is it books or not let's open the emulator and hit the play button okay okay let's see it uh click create a new juju okay let's type something here test oops one two three set its menu property create to do okay and yeah it works fine without fun view by id without accessing directly to the layout and let's wait for several seconds to see if the notation notification also works fine here let's wait a few seconds guys because we set it as 30 seconds yep it works fine yeah the notifications so means that our binding works fine and it can use be used to replace our previous methods okay okay next one is migrations okay so you now you already set up the data painting for the create fragment and now we can work on the migrations means that we are going to add a new field to due dates into the tutu table so now my 2d object can contain can have a specific uh due to date yeah so we can set the to do and we can set specific date and time and we are going to add it into the table into the database okay and the dual date field here will have a new field which is the date and time of the tutu but unfortunately the sqlite doesn't support a data type of date and time so um you can store the time as strings or you can also store the time as integer but i'm i think i will going to save the date and time using integer yeah not in string but using instructor y because um i'm not planning to ins uh store the english format of date and time but i think i will store the unix timestamp format here means that i'm storing the seconds of unix timestamps in the init in the type of integers and why is that because well it make easier to ask to order all the to do based on the time and priority because we set it as integer it's easier to order that data okay let's open the model first should be in here okay so we add one field add column info name to do date far to do date is integer right so that's it yeah it's integer and next um after you've done that you have to increase the database versions so open the database it's now is currently inspiration three we set it as four okay and then the migrations policy you need to also to create a policy that upgrading from version 3 to present four just copy one of the migrations and change it from 3 to 4 from 3 to 4 and in that in that particular upgrade from 3 to 4 we add a new column or field which is called uh to do date right to due date it's integer and default is zero and not now okay like uh previous okay next um after you've done that don't forget to register these migrations into the build database here here and also in the doodle database in the build database in in here yeah don't forget you have to place it in both places just out enter import yes okay let's run the project make sure that the migration looks fine without error so let's run the project again okay unfortunately we have built field here as you can see here because um the error shows here no value passed for parameter due to date yeah it shows in the frogmen kt 42 and yes of course as as you can see here it lack of last parameter of the due due date yeah we just set it as integer zero yeah okay let's play it again this time okay if you can still see the previous data and your locket is fine i mean your applications is not a class it means that the migration works perfectly now every two to here already have additional field additional column which is due to date and if the default is a zero editor okay let's move on to the picker okay so the next sections we add the two to two bigger the date weaker and time bigger okay so let's open the layout again to fragment create to do again and go to the design okay so in here after the radio priority we add two text input layout okay text input layout drag and drop here okay [Music] okay uh okay so we attach it to the left top and okay it's very difficult to attach this view here and set it as 32 32 i guess oh no no no no not 32 24 24 24 and 60 all right so we have this and don't forget to change the style into the outline box yeah outline box and find a hint so hint here should be uh pick a date pick a date okay pick a date hit animation on hint enable true and expand it click the add to edit text inside it delete a hint and you have to set id for it so this this id should be the txt date the xd date and it should be enabled through enable true and the focusable false focus sable set it as false you have to type it manually all right so why we set it as that property because um i don't want user to tap manually the date here i i want users to use only use the picker and pick the date with that pickers and means that it should be on read only yeah it will be read only so to to get that effects you have you can use the enable true and focus apple as false okay let's drag and drop another text input under the pick date i don't know okay why my why it's not rendered quickly so just um set it set the constraint left right so this time um this edit text is used for the time picker so the both one is the date bigger the below one is used for the time figure once again change the style to outline box okay and find the hint so change the hint to pick a time pick a time right okay pick a time and then hit animation until enable true okay right expand the text input layout click the edit text under it delete the hint and give an id txt time okay and same thing here enable set as true focusable set as false enter right okay oh yeah i almost forgot we are going to at the end i can remember that in previously we we was at we had at the icons for the calendar and the time so to choose the icons you need to click this input layout you have the input layout here and find the icon yeah just type icon and set the n i control able here and choose the current calendar here just okay and the icon mode should be custom right okay yeah like that it's your small icon here it does nothing just uh aesthetic functionality just for aesthetic things we do the same thing for this one through able we put we choose alarm okay yeah i think that's it next um make sure the this create you do is um constrain a below the bigger time okay let's do that concentrate it pick a time set 16. right okay next um yeah because as you can see here we have a lot of widget we have a lot of object view here and maybe maybe some of the widget here is off screens here it's hidden outside of the smartphone screens and we have to implement the scroll view implement the scroll view to make to give ability uh for the screens for the ui to be able to be scrolled up and down okay so we can simply add the scroll view just drag and drop in the frame layout into the frame layout and you have to delete this linear layout all right and move the whole ghostly layout into the scroll view move the whole constraint layout into the scroll view okay um this is scroll view is there okay scroll through and okay i think i think that's it yeah that's it means that every child every ui you see under the scroll view is scrollable by user right let's put the interface for these two list edit text here because we're going to apply on click interface in in each of these edit text so open the interface and first let's add interface for uh date click listener fun on date click view right so we do the same thing for interface time click list turner fan on time click v view yeah just like that so we have to through interface and this interface is used to trigger the picker yeah the corresponding picker which is the date record and the time figure so after that back to your fragment create to do on the code we add two new variable variable of listener date which is com uh the view date click listener we do the same thing for uh listener time com view and this one is time click listener all right okay and click on the pick update the edit text here of this they did we set the listener binding in here android on click add list oh yeah yeah i'm sorry sorry i almost forgot before we do that remember you have to rebuild okay rebuild the project okay done rebuilding now go back to this takes the date we apply android on click add the listener date okay on okay okay why is not the deck detected yes let's take a look listener date okay let's clean the project okay and after you clean the project you can rebuild the project again all right let's check get again in here yeah now is accessible by your layout copy and paste it in the time and this time you can you can change this to time on should be on time click all right so we have on date click on we have on time click ok rebuild again remember if you cannot access it yeah you may clean the project first and do the rebuild project hope that will fix your problems yeah okay next we implement the interface in the create to do fragment go to the top we add we add comma here and we type the uh date click listener comma time click listener yeah click listener and time click listener and don't forget to implement all members we have to okay yeah this one did click and on time click and we also defined variable year 0 for month 0 for day 0 for hour 0 for minute also 0. so we have this because we want to calculate the timestamp the timestamp difference of the of the two dates so we d we create a variable of particular time and date and on the field created we add uh the listener we def we instantiate the listener data binding dot um date sorry listener date if you create a variable in the create you do and you separate the variable with underscore like this in the creator to fragment it's you can access the variable and remove the underscores and replace the the date with uppercase here the next letter without working okay so you cannot access it like this yeah it doesn't recognize so you can access is like this okay databinding dot listener time listener time this right okay and because uh the the boot put listener will trigger picker yeah remember i'm going to write a quotes that trigger picker here get bigger and time bigger and it requires the interface that get handled by the class yeah so we have to add another interface for this class okay comma yeah our class now consists of a lot of interface here so the first is state picker interface on dataset listener and the next one should be time picker dialog on time set listener okay alt enter implement all member just okay so we have four um four functions for implementation of functions boot function here is used to trigger the dialog the bigger dialog booth function here is used to capture the value the date selected and the time selected by users okay let's work on the under that click here to trigger the dialogue so on the tip click here first we have to access the current date okay get instance we access the current date um and then we define the year equals c dot get calendar dot year and for the month c dot get calendar for month for day c dot get calendar of the day of months okay why we need to access three variable here from the calendar we because we want to create that a picker here right so to create a date picker you just call the date picker dialog and then it requires several things first it requires the context object which is you can grab from activity comma uh the listener which is implemented on that set listener as you can see here this class already have that listener so we just call use this and the next one is the year month and day right and don't forget to call the shoe does you okay and you can you can see that this activity is actually highlighted as error you can alt enter on it and wrap it with the left call okay this led call means that first the android will check if the activate is not now then it do whatever you write inside the left bracket here okay okay that's it for the undead click and next for the on time click right here on that on time click we do the same things just copy it from the buff but this time we only need set we need to access the hover of the current date time so remember this one is used to access the current time and we get the year one day of the current time and we do the same thing we do the same thing and we access the hover calendar dot hour hour of data hour of day for minute c dot get calendar of minute right so we create the time picker dialog time picker dialog it's use the activity it also requires this hour and minute and the last parameter is used to format the date into is 24 wait wait wait till format i think you need to import yeah all right let me check first okay date format here okay let me check first okay make sure that you in in the import you use the where is it the date format um yeah you you have this import okay android.txt.format.dat format okay make sure that you have this import uh if you if so you can access the is 24 hour format yeah because we use 24-hour format and we should put the activity and we call the show okay all right um i think that's it for the the on click on timeclick let's delete this to do let's test it yeah let's test the speaker it that's tests the speaker so run the project again okay let's have a look so as you can see here the add button is hidden off the screens yeah because uh i have small screen emulator here but because we already implemented a uh scroll view scores and down to reviews the scripture too so let's click the pick update and you can see it's the date picker dialog here and when you click the pick time also shows the big time dialog okay now the picker works fine and you cannot manually edit this text yeah because focusable set it false so it's only triggered or bigger so next one is we are working for to uh we are working for the this ok button here when when the when we choose a date we click ok we call the listener on data set and on time set and we do something with it yeah okay so um next one we're going to handle the pickle results in the on data set first you need to change the parameter name here to be more meaningful this will be months this should be day yeah instead of pay 1 pay 2 and pay 3 all right so um all right so let's start with the calendar dot cat instance all right calendar called cat instance and dot let yeah dot let let me check if the calendar is not now and then if we change the calendar set it as a new value with this retrieve from this information so set it as year month and day right year monday so we define a new calendar and we reset the year month and day of the calendar with whatever you pick from the date picker so after that you update you update the edit text that you see here update this edit text hit you see here to to reflect the new value that you pick earlier so we can access that by using the data binding root dot txt date okay set text okay right so first i'm going to uh i'm going to display as the dd and mm and yyyy format okay i'm going to display in that format right so um the easiest way to do that is just use the day plus minus plus month plus year yeah i guess okay yeah but it's not net is that not simple as that because um uh strangely the the month and the day always begin with um sorry the money i guess the month always begin with a zero so the if the month is zero means it's january one means february 2 is march and so on so be careful with that formations so we need to add one i guess to the month okay so plus one here to two months and for the day it's always begin with one two and so on so um if you want to display something like this okay with the with the leading zero in the front of it you can use what what is called the path start okay so uh because the amount and the day returns single integer and doesn't have leading zero in it we can use the path start of the is the best start in the function of the string so we convert it to two string here and we can call pet start uh length two because uh this is consists of two digits yeah link is digit means right and the leading character the leading character is zero if you it can be used to any condition and circumstances if you change it to five it will shows you something like this two one two three four five yeah something like that okay next um for the month we do the same thing we add one by one because it starts from uh zero we use the best start two and the pad chart is zero and here you you i think you don't need to do anything for it already already find and next after user pick the date user you have to store it in here yeah in this variable so to access it you can use this dot here right equals here here you add this here because you you have to access the variable of the class instead accessing this parameter the same thing this dot month equals month this dot d equals d all right so we have these three variables here next um the on time set here is on time set we do the same things for the data binding routes dot txt time dot set text i want to display it uh with this format it's i or whatever it's called the minutes yeah mma i think it shows hour and minutes so in order to do that it's same thing here it's always start with integer so we have to add the pad start to hour of day and minute here so we call the hour of day to stream that start to zero separate with column plus minute minute dot tostring dot pet start two zero okay and store the informations to our variables this dot minutes minute okay i think i need to edit this here right yeah that's it okay so on date set on timeset we'll store the information or whatever you pick on the picker and store it inside these variables and display to the edit text next we going to calculate the delay so we already know that we already have the date and time and what you need what we need to do is convert it to the timestamp and then we can find the differences between the current date and the specific date time that we pick so we can calculate that that and we can have the seconds yeah the timestamp in unix time we get the seconds delay between those dates so um go back to your on button add to do and here all right so once again we access the calendar dot get instance to get two day calendar and we modify the calendar with our year month and day and hour and minute okay we modify this c c um calendar with year monday hour minute that we already picked it in here we had to pick in here and then to and we also defined the two day the uh the calendar bloodcat instance okay to find the differences between 2d and c selected the current yeah the 2d and the selected date the simple way to do that is by call the [Music] function of time in milliseconds time in milliseconds so to see the time in millisecond will written the number of milliseconds happened from the 1970 until due date and we have to divide by by 1000 long to convert this to into the seconds so we close this and we minus it with two day uh milliseconds so today dot time in milliseconds divided by 1000 l all right uh keep in mind that um i'm not checking if the selected date is before i mean it's already passed from two day date yeah maybe you can select uh two weeks ago one day ago yesterday i'm not um i'm not check on that yeah you have to do that manually what i mean is that i assuming that a user always speak a future date yeah instead of yesterday right so we now have the differences in seconds between two dates and with that informations we can we can set delay on our notification but before we do that we have to update the to to date here so data binding dot to do dot uh to do date equals uh the div yeah it's obviously not diff but this one the 10 milliseconds all right okay block it all because the true to date is integer you have to convert it to integer all right you have to add exclamation mark to prevent error on this one to due date time in millisecond defined by 1000 l and convert it to integer and that's it you just store the unix timestamp of the selected calendar and finally this div information is used in here set initial delay okay just replace the 30 here with the div time unit seconds okay let's try that yeah let's try that um play it okay let's create a new tutu with um with the information of daytime to do with the date and time i mean so let's um shopping the title go to market and purchase monthly monthly needs okay i think medium property priority and let's pick a date which is on current dates sunday may 9th all right just press ok yeah as you can see here it shows 9 of me all right and pick a time here let's say as you can see here currently we have we know at 10 16 so just 10 and move it little bit left to i think to 18 yeah 18 10 18 okay just press ok press create to do all right to do created let's um remove the app and if the time reads 10 18 it will trigger the notifications because we set up the delay from the the two dates and it returns the seconds and we use that seconds information to set up the delay of our work request okay so let's wait uh several seconds to see if our notification will really appear on 10 18 because we dividend 10 18. okay yeah 10 18 okay you see this small notification icon let's drag it down so shopping go to the market and purchase only needs yeah it happens on 10 18 just like we said in previous uh to do yeah in previously so you can click it to open the main activity and it's bring back us to here to the our to-do list okay all right um yeah all right uh i think that's all for today i think i know this is a long long lecture i hope you don't mind about that and and you know how to use the notifications you know how to styling the notifications you already know how to use work managers and uh you will you use this work manager to to create something to create a task that can run in the background okay so you combine both you can create a notification that's appear on specific schedule okay if you have any questions about today's topics yeah this section topics you can find me at android stuff basically or drop me a chat on the hangout thank you for watching and see you again next time i'm feeling brand new

Channel: Andre Noto

Views: 1,630

Keywords: android development, kotlin, notification, work manager

Id: WbH5uqLU_Ks

Length: 102min 48sec (6168 seconds)

Published: Sun May 09 2021