Android Push Notification Tutorial using FCM HTTP V1

Welcome to another post friends and in this post we are going to learn about Android Push Notifications. We have already learned it in the past but things have changed now, so it was very …

android push notification tutorial

Welcome to another post friends and in this post we are going to learn about Android Push Notifications. We have already learned it in the past but things have changed now, so it was very important that I should post the updated method.

I hope you all are aware about Notification and Push Notification so we are not going into the theoretical things, instead we will create a very simple application to demonstrate how we can implement push notification in our android application using Firebase Cloud Messaging.

If you want to see what we will be building in this post, you can download the APK from the below given link.

Download APK

Now if you want to learn how I built this App then let’s move ahead.

Android Push Notification Tutorial – Video Series

  • I have a complete video series of this Android Push Notification Tutorial, you can check. This series uses Java Programming Language. 

But if you don’t want videos or you want to learn with Kotlin, then let’s move ahead.

The Android Project

As always we need to create an Android Studio Project to create this app.

  • Open Android Studio and create a new project. Select an Empty Activity while creating the project. And also make sure to check the Kotlin Support (Because now onwards I will be using Kotlin for all the coming projects).
  • Once the project is loaded and gradle has done its task (OMG you did it) you need the User Interface.

Designing the Interface

I have not focused much on interface designing but you are free to design whatever you want. But if you are very new into these things, below is my xml code for you that you can directly copy past to design the Main Activity (The only activity we have in this application).

  • Replace the code of your existing activity_main.xml file with the following code.

  • The above code will generate the following interface. (Not so bad haan 😉 )
android push notification tutorial
Android Push Notification Tutorial
  • So we are done with the designing. Now let’s move ahead.

Adding Firebase

For push notification we are going to use Firebase Cloud Messaging. So the first thing that is needed is the Firebase itself. And you know what adding firebase is very easy nowdays.

  • In Android Studio go to Tools -> Firebase (As shown in the image below).
adding firebase
Firebase
  • When you click on the Firebase, it opens an window on the right displaying all the firebase features that you have. This time we care about Cloud Messaging.
adding firebase
Firebase Cloud Messaging
  • Now, you need to follow two step, the first one is connecting the app to Firebase.
Connect to Firebase
Connect to Firebase
  • When you click on Connect to Firebase, it opens a Connection Dialog and here you can see all the firebase project you have. So you can either connect to an existing firebase project from your account or you can create a new project. Here I am going to create a new Firebase Project.
Creating Firebase App
Creating Firebase App
  • It might take a couple of minute to connect to the firebase, so wait and once it is finished we need to perform the second step which is adding the firebase dependencies.
  • To add dependencies you just need to click on the button Add FCM to your app. 
Adding FCM
Adding FCM
  • Now it will show you what are the changes it is going to make (Don’t worry about anything, just accept the changes).
Adding FCM Dependencies
Adding FCM Dependencies
  • Now it will take a few seconds (or minutes) to download the dependencies and sync your project with gradle.

Generating Registration Token (or FCM Token)

Before going ahead I will tell you a little theoretical thing. We basically have two methods to send the notifications.

  1. Send to an individual device or a Group: Every device is identified uniquely with a registration token. We can use this token to send the notification to an individual device. We can also make a group of registration tokens to send notification to multiple devices.
  2. Send to a Topic: You can let your users subscribe to a topic. For example we have a topic X. Now when you send the notification to topic X, all the subscriber of this topic will receive the notification. In this method we do not need to identify the device uniquely so the registration token is not required.

In this post I am covering the first method only and for this we need the Registration Token.

So let’s learn how do we generate a Registration Token for FCM (Firebase Cloud Messaging).

  • Come to MainActivity.kt and write the following code.

  • Now you can run your application to see the generated token.
FCM Token
FCM Token
  • Bingo! you can see we have the token. We will code the Open Dashboard button later (After completing the dashboard). Right now we need to create the notification.

Creating Notification Channel

To display notification we need a notification channel. And remember this notification channel thing is supported only from Android Oreo, so we need to put this condition in our code as well.

  • Again inside MainActivity.kt you need to do the following changes.

  • Our notification channel is now ready. We can use this channel to display notifications. So the next task is to create a class that will display the notifications.

Building Notification

  • We are going to create a function that will display the notification. So whenever a notification is received we will call this function to display the notification in the device. For this I am going to use a Kotlin object.

  • In the above code you can see we have a function taking the details of the notification (title and body). This function will generate and display the notification when we call it.
  • Now we just need to receive the notification and call this method to display it.

Receiving Notification

  • To receive the notification we will create a FirebaseMessagingService. So create a new class named MyFirebaseMessagingService and inherit the class FirebaseMessagingService. Inside this class we can override the function onMessageReceived(). This function will be called whenever we receive a notification.

  • You can see inside the function onMessageReceived() we are fetching the title and the body of the notification and then we are calling the function that we created to display notification.
  • Now we just need to define our FirebaseMessagingService inside AndroidManifest.xml.
  • So go to AndroidManifest.xml and inside the application tag put this FirebaseMessagingService.

  • Now everything is done for our client side (Android App). Now we need a web panel from where we can send the notification.

The Push Notification Sender

We have done with the client side which is our Android Application. Our android app will receive and display the notification. But the point is the app can only receive the notification when we sends it. So the next requirement is of a Panel from where we can send the notification. For this I will create a web panel, where we can input the device token, the title and the body of the notification and then we can press a button to send the notification.

To build this thing, I am going to use NodeJS and I will deploy the app in firebase using firebase functions.

To go ahead you need NodeJS and I am assuming that you already have it. (To confirm the node installation in command prompt you can run the command npm –version).

Installing Firebase CLI

As I told you we are going to use Firebase Functions, and to use it we need Firebase CLI. You can get Firebase CLI very easily if you have NodeJS installed. Just open the command prompt and run the below command.

After installing Firebase CLI you also need to login with your google account. And to login you need to run the command firebase login (as shown in the image below).

firebase login
Firebase Login

Creating a NodeJS Project

  • For this web project simply create a directory (folder). I created a directory named SimplifiedCodingNotificationSender  and then in command prompt we need to go inside the created directory. (As you can see in the screenshot).
NodeJS Project
NodeJS Project
  • Now we need to run the command firebase init functions. Then follow the steps as shown in the below image (till it says do you want to install npm dependencies).
Initializing Firebase Functions
Initializing Firebase Functions
  • Now open your project in any Editor (I am using Visual Studio Code).
Firebase Functions Project
Firebase Functions Project
  • Remember we will be working inside the functions directory.

Adding Service Account Private Key

  • Before doing anything we need a Service Account file that contains the private key used to authenticate firebase features. And we need to put it inside the functions folder.
  • So open firebase console and go to your project settings and then service account. Here you can generate a new private key.
Firebase Service Accounts
Firebase Service Accounts
  • When you generate a private key you will get a json file containing your private key.
Service Account JSON
Service Account JSON
  • We need to put this file inside the functions directory of our NodeJS project. As you can see the name of the file is very big and complicated so I will change the name to service-account.json.
  • Once you put this file inside your functions folder your project will look like this.
service-account.json
service-account.json

Adding Required Dependencies

  • We will be using express for building the API to send notification. So first come inside package.json file and inside dependencies block add everything that is shown in the below code. Or you can simply copy paste the whole thing to your package.json file. 

  • After adding the dependencies you need to run the command npm install (Make sure you are inside the functions directory when you are running npm install)

Building REST API

  • First come inside index.js and write the following code.

  • In the above code make sure you change the url value (https://fcm.googleapis.com/v1/projects/<your-project-id>/messages:send) and put your own project id.
  • After this come to firebase.json and write the following inside.

  • Here we are simply defining that call the function api of index.js when the url /api/send is called.

Deploying Firebase Functions

Our API is ready and now we can deploy it to Firebase. And deploying is very easy you just need to run the command firebase deploy. But we cannot deploy firebase functions without firebase hosting. 

  • So first initialize firebase hosting in your project as well.
  • To initialize firebase hosting run the command firebase init hosting.  (See the image for reference).
Firebase Hosting
Firebase Hosting
  • After initializing hosting make sure your firebase.json is same as it was. If it is changed then you again need to change it as below.

  • Now run the command firebase deploy.
Deploying Firebase Functions
Deploying Firebase Functions
  • As you can see our API is deployed successfully. Now if you want you can test it on postman by putting /api/send at the end of the hosting URL.
  • In my case the URL is: https://simplifiedcodingnotifica-cdd38.firebaseapp.com/api/send
Send Notification API
Send Notification API
  • The API is working fine, now we just need an interface to call the API.  We will create the interface in Firebase Hosting.

Building Notification Sender

  • In your project come inside index.html (Inside the public folder) and write the following code inside.

  • Its just a normal HTML without CSS. You can apply some CSS in it if you think it is looking ugly 😉 .
  • But make sure you change the URL to your own URL in the action attribute of form. 

Now again run the command firebase deploy to deploy the thing we created. 

You can check my panel here. (I have applied some CSS as well).

Coding the Open Dashboard Button of the Android Application

One thing we missed to code in our android app that is the Open Dashboard Button.

android push notification tutorial
Android Push Notification Tutorial

Now we have the URL of the dashboard so we can code it. So go back to Android Studio and modify MainActivity.kt as below. We will also code the Copy Token button.

  • Everything is done now and we can test our application.

Testing Android Push Notification

  • You can see here that it is working absolutely fine.

Android Push Notification Tutorial Source Code Download

  • If you are having any trouble following the post then you can get my source code from the GitHub. The links are given below.

Source Code for this Post


git hub repository
Get Source Code

git hub repository
Get Source Code

Source Code for YouTube Course


git hub repository
Get Source Code

git hub repository
Get Source Code

git hub repository
Get Source Code

So thats all for this Android Push Notification Tutorial friends. I hope you find this post helpful. If you are facing any problems just comment it here and I will try to help you. And please support me by sharing this post with your friends. Thank You 🙂

 

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

5 1 vote
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x