Android Push Notification Using Firebase Cloud Messaging in Kotlin | GeeksforGeeks

[Music] hey everybody welcome to geeksforgeeks this is abhay and in this video we are going to create a very simple application where we have the functionality of push notification push notification is a special type of notification that pops up it doesn't depends upon what app you are using the notification will pop up and if you click on this you will be redirected to the app so the backend that we are going to use for this app is a firebase and the tool is a firebase cloud messaging system which is a feature provided by firebase itself so let's see what is the end product that we are going to make okay so let me first send the notification from the firebase backend and here if i simply duplicate notification okay don't worry about all of these things i'm just doing this because i have to show you how the push notification will work although i'll be you know explaining everything step by step in the video so let's click on publish button and here is our app now let's wait and see now here you can see we have this push notification we have an image of geeksforgeeks then the text which says gfg which is the heading and then we have this hello from geeksforgeeks and as i press on this we are redirected to this you know page of our application so this is the app we are going to create in this video so let's see how we are going to do it so now let's create a new project create new project and select empty activity hit next and the name of the project and so the name is going to be simply fcm which stand for firebase cloud messaging fcm push notification although you can name it whatever you want and simply press finish so our project is now ready so the first thing that we have to do is we have to connect our app with the firebase so uh simply go to the home page of firebase login with your google account and go to console okay add a project and name of the project is fcm push a push notification name of our project and hit continue again press on the continue button go with all the default settings create project and wait for a second while our project is being ready so it says your new project is ready and press the continue button okay now here we have option for ios android web so we are going to select android and now here it will ask for company name or package name so let's get to the android studio this is going to be our package name copy this and paste it name of your app is simply fcm push notification and i'm going to leave this block empty and click on the register app okay now it says you have to download this google services.json file so download this so it is now downloaded now let's show it in folder so this is our google services.json file so you what you have to do you simply have to copy this and paste this in android studio so let's go to the project and make this in project mode inside your app folder right click and paste this now here we don't want any kind of numbers in the bracket we just want store google make sure you spell it correctly otherwise it won't run so hit okay and this is the google services.json file and let's get back to the android mode okay so here is our app and the next thing is we have to add the dependencies for firebase cloud messaging okay before that uh let's go to the next button here we have to add everything to connect with firebase and after that we will add dependencies for firebase cloud messaging so we have to first of all copy this and paste this inside the dependencies block of top level gradle so go to the project mode inside the gradle script this is the top level gradle and inside the this dependencies block we simply have to paste it and sync now we are done with this and simply close this okay the next thing here java is selected make sure you select kotlin and copy these to apply plugin so copy the first one and go to the app level gradle and here this thing we have to paste outside the dependencies block so simply paste this also the second one copy this and paste this over here and here we have these two implementation and but this is inside the dependencies block so copy this paste the first one and then the last one and press the sync now and after that our app is completely connected with the firebase okay so let's get back to the firebase hit next go to console and this is our console screen okay now what we have to do we have to add firebase cloud messaging dependencies to our android app so like we had did in the previous video of chat application so you what you have to do you simply go to tools and then we have this firebase so click on this and wait for a second so here okay there is some issue in rendering everything what you have to do you have to search for cloud messaging here this one so click on this here we have two options set up firebase cloud messaging and setup firebase cloud messaging using kotlin so you have to select this one add fcm to your app select this and accept the changes so that it add the matching dependencies in our gradle for using firebase cloud messaging so here it says dependency set up correctly so we are now good to go with our app so if you remember we had the main activity we just had one activity and that one activity have the text view which simply says uh welcome to geeks4geek so nothing special so the first thing that we'll do is we'll change the text it says welcome to geeks for geeks this was our text but the size was let's set the text size to be 40 dp and let's give the padding of 20 db from all around and that text color is simply 0 0 6 6 0 0 so this was the color and set the text style to bold so text style was bold so that's it this was our home page or main activity where we have to do nothing okay now uh in order to use firebase cloud messaging we have to do some changes in our manifest file so first of all let's open the manifest file here we have this android manifest.xml okay now here we have to do some changes and what changes first of all go to the you know home go to the page of firebase cloud messaging documentation for android this is the link or you can simply go to the normal documentation of firebase and select inside the cloud messaging select the android okay so this is the documentation for fcm what you have to do first of all it will ask you to add the dependencies that we have already did here you can see these are the dependencies we don't need that here is something new here we have edit your manifest okay so what you have to do first of all simply copy this copy this and paste this inside your manifest we have to do it inside the applications block but outside the activities block so let's make some space over here and paste it now here we have some error because it says it is missing my firebase messaging service so we have to create a class of my firebase messaging services so let's do it so let's go to the package name right click on this go to new and here we have this kotlin file the name of the file is my fire base messaging messaging service okay okay this is not this this is service i just misspelled it so i can simply refractor it rename and this is going to be service okay now if you go to the manifest over here here we don't need this java we move this also so here the error is gone but it still have something here it says we have to add something called instantiable so simply press on this and the error is gone from here okay now we okay let's see what are the else what else changes we have to make inside the manifest and if you go down here here we have to do we have to also copy and paste this as well so simply copy this and go to android studio and before after this the activity where the activity block start you have to paste it over here and simply control dot p here it says some drivers are missing here the drawable that we have here is going to be the logo of the notification so here what we are going to use we are going to use our own image okay so uh i have added i have downloaded some image here you can see i have this image of geeks for geeks so what you have to do you have to simply copy this and paste this inside the android studio so copy this and we have copy over from here and let's go to the project mode inside the resources drawable so inside the driver you have to paste it so click on this and hit ok the name is gfg.png okay this is what we need so ins instead of ic stat ic notification we are going to simply use gfg okay so as you can see the error is gone and also here we have to add the you know the color theme for the notification so i'm just going with purple 700 which is um the default color provided by android studio or you can use any other color that you want so we are done with the manifest now we don't need this so close this okay now let's go to our my firebase cloud my firewall is messaging service everything we have to do it here only this thing will extend from firebase messaging service here you can see we have that okay now here inside this we need three things and what are the three things the first thing is we have to generate the notification okay then what we have to do the notification that we have generated we have to attach it with the custom layout for the net notification so what we have to do attach the notification created with the custom layout and this custom layout will will create just in a moment so this is the second thing and the last thing that we have to do we have to actually show the notification these are the three things that we have to do and we will be good so the first thing that so the next thing that i am going to do is i am going to create the custom layout for notification so go to the project mode inside the resources layout right click on this go to new layout resource file and the name of the layout is simply naughty vacation so here is the layout and instead of this the constraint layout i'll be using relative layout and height with this match parent but height will be simply wrap content okay and the next thing is we need one more relative layout with okay with is going to be match parent and height is also going to be matched parents so instead of wrap content make it match parent okay so this is the relative layout and inside this relative layout we have to create a notification so the first thing that we had is we had the image view which is the logo of our app so we need an image view make it uh maybe 50 dp and height is also going to be 50 dp and then the source of this will be simply drawable gfg okay and let's give it the id id is going to be app logo so this is the image view and that's it and the next thing that we need is we need the text view which is the title of our app so text view make it a wrap content lab content and text will simply say title although this will change according to the notification and let's give it the id hide is going to be simply title okay and this will size let's say the size so text size will be 20 sp 20 sp and this will be always in the right side of to the right of image view which was have the id of app logo and what next thing let's make this bold so text style is bold okay and let's give the left margin left margin is 10 dp and let's give it top margin so margin top is also 10 dp so this is how it is and also let's give the left and top margin to the image as well so margin left is simply 10 dp okay instead of giving margin what if i give it padding of 10 db okay not padding will not work instead give the left margin of 10 dp and top margin of 10 dp as well okay now if i go to the title top margin for this will be 15 dp yeah so this is the title and now we need description also so simply copy this one and paste it over here id is going to be description okay and this one will be in the right side of title also this will be okay this is not to the right of title it will be below title we have layout below title and also it will be to the right side of image view which is app logo okay we don't need bold and also this margin top will not be 15 db get rid of this and the default text will say this is description okay let's make the you know size of the image a bit bigger maybe 70 dp by 70 dp so this is going to be our simple layout for the notification and give padding to 10 dp for our relative layout and that's it we are done with the layout so let's get back to my firebase messaging service although i am not going to run this app right now because there is nothing special to you know test out okay now here we have to generate notification attach notification with custom layout and then finally show the notification okay so the first thing will create a method for generating notification so fun generate notification okay and what it takes it takes two thing we have title and the the description or the message so instead of calling it description why not call it message right that this will make more sense so this is this is a message okay now let's get back to the firebase this uh this class okay it takes two things the first thing is the title which is of type string and then we have message which is of type string as well now the first thing that i'll do is i'll create an intent so when user click on notification user will be redirected to the app so let's create intent and this is equal to intent where we have to jump we have to jump from this to the main activity main activity class also what i will do is i will set a flag which is intent dot add flag and what we have to pass here we have to pass intent dot flag clear top now here we have flag activity clear top now what it does it will clear all the activities in the activity stack and put this activity current activity at the top okay so the next thing that we need is we need a pending activity i'll tell you what this spending activity s4 and this is equal to pending activity dot get activity now what it takes here you can see it takes context request code intent and the flag so uh context is this and request code now let's simply put 0 because i will not be using this anyways and then the intent so we will pass the same intent that we have created above and the flag flag is a pending intent dot we have flag one shot okay now let me explain what this line is okay here we have an error and okay it says it asks for array and got intent okay we don't need this activities we need get activity get okay let's see get activity we need this one and as you can see the error is not here we use pending intent when we have an intent that we have to use in the coming future and this is how we create intent and here we have this pending intent dot flag one shot flag one shot indicates that we just want to use uh this activity this pending intent just once because when user clicks on the activity the the notification just get you know destroyed so it says that we just have to use this pending activity once okay so we are done with the pending activity now here we need two things again we have one thing called channel id and then the next thing was channel name so these are the two things introduced in notification after the update of android oreo we have many major changes after the update of android oreo and these are one of the you know updates what it does it just makes the uh notification more concise and you know clear now let's create the channel id and the channel name okay this is going to be constant throughout the app so i'll crea make this as a constant so we have constant val and the name is channel id so we have channel id and this is equal to let's say notification channel notification channel you can write whatever you want notification channel and then we have a constant val channel a name and this one will be maybe let's set it as whatever our package name is it doesn't really matter here okay so we have channel id and the channel name okay now let's actually create a notification using uh notification builder so where we have a builder and this is of type notification compat dot builder okay and this is equal to notification compat dot bill not this okay why it is yeah here we have this builder and what it takes it takes two thing which is the context and then we have channel id of type string so the context is basically application get application context and the channel id that we have above created which is channel id okay so this is our notification builder and the next thing is we have to set all the icons and all the properties of the notification so we'll set set a small you know icon now what i'm going to set over here is the you know our app logo so our app logo was gfg so r dot drawable dot gfg here you can see this is going to be our icon and the next thing was we have to either set or to cancel true or false set auto cancel and i'll set it to true okay and the next thing is we have to set the vibration and it's up to you if you want to set the vibration you can and if you don't want you simply skip this part but i'll just set the vibration so we have set vibrate okay here it says it asks for long array so let's first create the array of long and then i'll tell you what this indicates so we have long array off and here we have to pass we'll pass one thousand one thousand one thousand one thousand again now here what this one thousand is this one thousand one thousand is the time in millisecond so the we have alternate either this is the time for vibration and the next thing is the you know relaxation time so it vibrates for one second relax for one second it again vibrates for one second and then relax for one second this is what it this you know long error does and it's up to you if you want to set the vibration or not and then we have set only alert once and i'll set to true you don't want to you know make alert every time otherwise you if this will be a you know bit irritating and user might uninstall the app and the next thing is we have to set the content intent here we'll pass in the pending activity that we just have created above okay so we have created our builder now what we have to attach this builder with this you know notification layout so we have builder and builder is equals to builder dot set content and here you can see we have view which is of type remote view so first of all click on this and here we need a remote view so a get remote view will create this method in the moment to get remote view and what it takes it will take input as title and the message which we have just passed above because inside this view we have title and the message now let's create this method first of all then we'll continue in this generate notification method so we have fun and the name of our method was get remote view what it takes it takes title of type string and message of type string as well okay and what it returns it return a remote remote view right so while remote view is equal to remote views and now what it takes it asks for the package name and the layout itself so our package name is this so copy this and then what it takes it takes the layout layout itself which is r dot layout dot we have this notification okay okay it is showing an error so what this error is we have to add this suppress lane so simply press on this and the error is going from here so we have the remote view now let's set the title and the message so we have remote views dot set we have text view yeah okay and what it is kind of uh you know hash map it points the layout with the message itself so here you can see it takes a view id and a map with the text which is the char sequence so the id was r dot id dot title okay yeah our id dot title and the chart sequence what we have to show in this title i'll simply show this title over here so title and similarly we have for the description as well so here are that id dot message sorry not message not description it is message and here i will pass the message also we have an image view so remote view dot we have set image resource now here we need the id of the image so id of the image is app logo so r dot id dot app logo and this will points to our image which is r dot drawable dot gft okay and after that we are done with this we'll simply return this remote view that we just have created so error is gone from here okay now the next part is we have to create the notification manager so well naughty vacation manager and this is equals to get system services and what kind of services we want to get the context dot notification service this is what we need and we have to cast it as notification manager this is how we have to cast this so we have created the notification manager and our next task is we have to check that if the client's android version is greater than or equal to android oreo or not because most of the features for notification is only after the android oreo or the latest version so if we have build dot version dot sdk end is greater than equal to we have built version build dot version codes dot o yeah now if that's the case we will create a notification channel now we have notification channel and this is equal to notification channel and what it takes it takes channel id channel name and the importance of the notification so the channel id is basically the channel id and channel name is channel name that we both have created above over here okay and then the importance so i'll set the importance as hi so notification manager dot importance hi okay so we are done with this now notification manager okay notification manager that we just have created above dot create create notification channel and then i'll pass the notification channel okay so we are done with this now the last part and the last part is simply notification notification manager dot notify here we have the notify what it takes it to ask for the id i'll simply set to 0 and the notification itself which is builder dot build here you can see will have the return type of notification okay so just like this we have created our notification we just have to show it okay now how to show the notification also for that we have an overridden method which is on message received here this one now it has a remote message as an input which is on notification so instead of po let's write it remote remote message okay and get rid of this so here we'll do a null check so if the remote message that we have over here let's get the notification so get notification and if this is not equal to null then we have some notification then what we'll do i'll call this method called generate notification so here we have generate notification what it takes it takes title and the message now how we'll get the title and the message we will get it from the remote message okay so remote message dot notification dot title this is the title and then the message itself so remote message dot notification dot body so okay it is showing error because we have to make this thing null safe okay so error has gone from here and let's make this null safe as well yeah so we are done with this we have generated the notification then we have this custom view which will uh you know the notification that we have generated it will attach it with the custom view of notification.xml and then we will receive the notification now the only thing is we have to send the notification from the firebase you know console so let's get there and see how we do it so over here if you go to down this engage here we have this cloud messaging click on this so it says send your first message click on this now here we have to enter the details of our notification so before we do it let's get back to android studio and first of all run our app in the background okay now uh here we have notification title so title of the notification is gfg is going to be the title of the notification now notification text or the message is hello from hello from geeks for geeks this is going to be our notification text now it asks you for notification image we don't want that also a notification image we also don't want that so hit text now select the target you know app so this is the package name of our app click on this hit next and then we have scheduling you can either send notification now or schedule in the coming future so i'll simply select this now hit next also we don't have to do nothing here next and okay now as i press on the review button and here we have little uh review of our notification now before i press on the publish button let me open up my emulator also one thing to make sure that the device or the emulator that you are using must be have must have android version greater than or equal to android oreo otherwise the custom notification won't work so let's publish the click on this publish button and see what happens so here you can see we have this notification we have the image view the title which is gfg and then the text so this thing is working fine now as i press on this we are redirected to the home page of our app so this is how we you know push notification using firebase cloud messaging system and one thing to make sure that this app have all the permission regarding the notification because some of the latest android um you know phones have restricted the notifications for multiple apps so make sure that this app is not restricted to the notification otherwise the cloud this push notification won't work so this is how we use firebase cloud messaging system to you know send push notification to our clients so yeah that's all about this video and hope to see you in the next video [Music]

Channel: GeeksforGeeks

Views: 99,187

Keywords: GeeksforGeeks, push notification in android, android push notification using firebase, firebase push notification kotlin, firebase sending push notifications, how to send push notification in android, project ideas, firebase cloud messaging android, fcm push notification android example, push notification android studio firebase, kotlin android projects with source code, fcm push notification android kotlin, android projects for beginners, android projects

Id: 2xoJi-ZHmNI

Length: 36min 19sec (2179 seconds)

Published: Mon Aug 30 2021