Skip to main content

Tutorial Firebase Push Notification With Image on Android

By
Firebase cloud messaging (FCM) is a new version of Google Cloud Messaging (GCM). Using FCM you can send notification messages to your client application in order to drive user engagement.Notification messages can contain an optional data payload, which is delivered when users tap on the notification. Use notification messages when you want Firebase cloud messaging (FCM) to handle displaying a notification on your client app’s behalf. Use data messages when you want to process the messages on your client app.

Create a new Android

1. Create a new Android Project in Android Studio. Give it a name and select the Minimum SDK on which your app will run on. I chose API 16 : Android 4.1 (JELLY_BEAN).
2. When you are prompted to add an activity to your application choose Blank Activity and click on next button.
3. In the next step click on Finish and in few seconds your application should be loaded in Android Studio.
4. Open build.gradle(Module:App) file of your application and add the following dependencies inside dependencies section of build.gradle (Module:App) file.
5. The application requires following permissions to work. Your app might not work unless you add these permissions to your AndroidManifest.xml file. 
apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "in.wolaris.fcm.notificationwithimage"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    packagingOptions {
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/LICENSE-FIREBASE.txt'
        exclude 'META-INF/NOTICE'
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.2.0'
    compile 'com.android.support:design:25.2.0'
    compile 'com.google.firebase:firebase-core:10.2.1'
    compile 'com.google.firebase:firebase-messaging:10.2.1'
    compile 'com.google.android.gms:play-services-auth:10.2.1'
    testCompile 'junit:junit:4.12'
}


Get Firebase Configuration File

Now add apply plugin: ‘com.google.gms.google-services’ at the bottom of your build.gradle (App level) file, just below dependencies section. Also check whether you have added the following dependencies in the dependencies section of build.gradle (App level). Click on sync now or re-build the android application. 
dependencies {
    // Other dependencies
    compile 'com.google.firebase:firebase-core:10.2.1'
    compile 'com.google.firebase:firebase-messaging:10.2.1'
    compile 'com.google.android.gms:play-services-auth:10.2.1'
}
apply plugin: 'com.google.gms.google-services'
In order to use Firebase notification, Declare the following in your application's manifest: 
<application>
    
    <activity>
        
    </activity>
    
    <service
        android:name=".MyFirebaseMessagingService">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT"/>
        </intent-filter>
    </service>
    
    <service
        android:name=".MyFirebaseInstanceIDService">
        <intent-filter>
            <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
        </intent-filter>
    </service>

</application>
Now create new java class and name it as MyFirebaseInstanceIDService.java. It extends FirebaseInstanceIdService class and contains an overridden method onTokenRefresh(). This method is called if InstanceID token is updated. This may occur if the security of the previous token had been compromised.
MyFirebaseInstanceIDService.java 
package com.wolaris.pushnotificationwithimage;

import android.util.Log;

import com.google.firebase.iid.FirebaseInstanceId;
import com.google.firebase.iid.FirebaseInstanceIdService;

/**
 * Created by sepdian on 4/29/2017.
 */

public class MyFirebaseMessagingService extends FirebaseInstanceIdService {

    private static final String TAG = "MyFirebaseIIDService";

    /**
     * Called if InstanceID token is updated. This may occur if the security of
     * the previous token had been compromised. Note that this is called when the InstanceID token
     * is initially generated so this is where you would retrieve the token.
     */
    // [START refresh_token]
    @Override
    public void onTokenRefresh() {
        // Get updated InstanceID token.
        String refreshedToken = FirebaseInstanceId.getInstance().getToken();
        Log.d(TAG, "Refreshed token: " + refreshedToken);

        // If you want to send messages to this application instance or
        // manage this apps subscriptions on the server side, send the
        // Instance ID token to your app server.
        sendRegistrationToServer(refreshedToken);
    }
    // [END refresh_token]

    /**
     * Persist token to third-party servers.
     *
     * Modify this method to associate the user's FCM InstanceID token with any server-side account
     * maintained by your application.
     *
     * @param token The new token.
     */
    private void sendRegistrationToServer(String token) {
        // TODO: Implement this method to send token to your app server.
    } 
}
Now create another java class and name it as MyFirebaseMessagingService.java. It extends FirebaseMessagingService. It contains an overridden method onMessageReceived(RemoteMessage remoteMessage). If you want foregrounded (still running) apps to receive notification messages or data messages, you’ll need to write code to handle the onMessageReceived callback. The method onMessageReceived(…) will not get called if the app is in background or killed state, when the message is sent through Firebase Console. But when the message is sent via API (perform a POST to the following URL:https://fcm.googleapis.com/fcm/send ), the method onMessageReceived(…) will get invoked.
MyFirebaseMessagingService.java 
package com.wolaris.pushnotificationwithimage;

import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.media.RingtoneManager;
import android.net.Uri;
import android.support.v7.app.NotificationCompat;
import android.util.Log;

import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;

import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

/**
 * Created by sepdian on 4/29/2017.
 */

public class MyFirebaseInstanceIDService extends FirebaseMessagingService {

    private static final String TAG = "FirebaseMessageService";
    Bitmap bitmap;

    /**
     * Called when message is received.
     *
     * @param remoteMessage Object representing the message received from Firebase Cloud Messaging.
     */
    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        // There are two types of messages data messages and notification messages. Data messages are handled
        // here in onMessageReceived whether the app is in the foreground or background. Data messages are the type
        // traditionally used with GCM. Notification messages are only received here in onMessageReceived when the app
        // is in the foreground. When the app is in the background an automatically generated notification is displayed.
        // When the user taps on the notification they are returned to the app. Messages containing both notification
        // and data payloads are treated as notification messages. The Firebase console always sends notification
        // messages. For more see: https://firebase.google.com/docs/cloud-messaging/concept-options
        //
        Log.d(TAG, "From: " + remoteMessage.getFrom());

        // Check if message contains a data payload.
        if (remoteMessage.getData().size() > 0) {
            Log.d(TAG, "Message data payload: " + remoteMessage.getData());
        }

        // Check if message contains a notification payload.
        if (remoteMessage.getNotification() != null) {
            Log.d(TAG, "Message Notification Body: " + remoteMessage.getNotification().getBody());
        }

        //The message which i send will have keys named [message, image, AnotherActivity] and corresponding values.
        //You can change as per the requirement.

        //message will contain the Push Message
        String message = remoteMessage.getData().get("message");
        //imageUri will contain URL of the image to be displayed with Notification
        String imageUri = remoteMessage.getData().get("image");
        //If the key AnotherActivity has  value as True then when the user taps on notification, in the app AnotherActivity will be opened.
        //If the key AnotherActivity has  value as False then when the user taps on notification, in the app MainActivity will be opened.
        String TrueOrFlase = remoteMessage.getData().get("AnotherActivity");

        //To get a Bitmap image from the URL received
        bitmap = getBitmapfromUrl(imageUri);

        sendNotification(message, bitmap, TrueOrFlase);

    }


    /**
     * Create and show a simple notification containing the received FCM message.
     */

    private void sendNotification(String messageBody, Bitmap image, String TrueOrFalse) {
        Intent intent = new Intent(this, MainActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
        intent.putExtra("AnotherActivity", TrueOrFalse);
        PendingIntent pendingIntent = PendingIntent.getActivity(this, 0 /* Request code */, intent,
                PendingIntent.FLAG_ONE_SHOT);

        Uri defaultSoundUri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
        NotificationCompat.Builder notificationBuilder = (NotificationCompat.Builder) new NotificationCompat.Builder(this)
                .setLargeIcon(image)/*Notification icon image*/
                .setSmallIcon(R.drawable.ic_toys_black_24dp)
                .setContentTitle(messageBody)
                .setStyle(new NotificationCompat.BigPictureStyle()
                        .bigPicture(image))/*Notification with Image*/
                .setAutoCancel(true)
                .setSound(defaultSoundUri)
                .setContentIntent(pendingIntent);

        NotificationManager notificationManager =
                (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

        notificationManager.notify(0 /* ID of notification */, notificationBuilder.build());
    }

    /*
    *To get a Bitmap image from the URL received
    * */
    public Bitmap getBitmapfromUrl(String imageUrl) {
        try {
            URL url = new URL(imageUrl);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            Bitmap bitmap = BitmapFactory.decodeStream(input);
            return bitmap;

        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return null;

        }
    }
}
Create a new XML layout resource file and name it as activity_another.xml. It includes an Imageview and a Textview in it. The activity_another.xml file of our application has the following code in it. 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".AnotherActivity">
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/firebase_icon" />
 
    <TextView
        android:id="@+id/informationTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:text="@string/another_activity" />
 
</LinearLayout>
The acivity_main.xml includes an ImageView and TextView. The acivity_main.xml has the following code in it. 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/firebase_icon" />
 
    <TextView
        android:id="@+id/informationTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:text="@string/main_activity" />
 
</LinearLayout>
Create a new java class in your package and name it as AnotherActivity.java. This is a simple Activity class which gets opened when the user taps on a notification message which includes a key named as “AnotherActivity”. 
package com.wolaris.pushnotificationwithimage;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;

/**
 * Created by sepdian on 4/29/2017.
 */

public class AnotherActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_another);
    }



    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}
Open MainActivity.java and add the following code in it. It has a method named subscribeToPushService(). This method is invoked every time the user opens your app. This is where the user subscribes to notifications. MainActivity is the default activity which gets opened when the user taps on the received notification. But once the MainActivity is loaded we check for a key named “AnotherActivity” in the intent data that is passed to it. If the value of the key equals “True” then we are redirecting the application to AnotherActivity.java.
Labels:

Popular posts from this blog

Learn to Make Ground Overlay Google Maps on Android

By Anonymous
A land overlay is an image that is a permanent map. Unlike markers , ground cover on the ground to accommodate the screen oriented, turn, tilt, or zoom the map to change the orientation of the image. Terrestrial overlays are useful when you want to define an image in a region on the map. If you want to add rich images that cover a large part of the map, you should consider covering tiles. Create a new android maps project 1. Start Android Studio. 2. Create a new project as follows:  If you see the Welcome to Android Studio dialog, choose Start a new Android Studio project, available under 'Quick Start' on the right of the dialog.  If you see the Welcome to Android Studio dialog, choose Start a new Android Studio project, available under 'Quick Start' on the right of the dialog. Otherwise, click File in the Android Studio menu bar, then New, New Project. 3. Enter your app name, company domain, and project location, as prompted. Then click Next. ...
Read more

Learn to Use Google Maps With Multiple Markers on Android

By Anonymous
This tutorial the use of aggregate tags when data requires a large number of data points on the map. The Tag Collection tool helps you manage multiple tags at different magnification levels. To be precise, the "signs" are actually 'objects' at this stage and only become "signs" when they are taken. But for clarity, this document will be called "signs" around. Google Maps Android Marker Clustering Utility By clustering your markers, you can put a large number of markers on a map without making the map hard to read. To use the marker clustering utility, you will need to add markers as ClusterItem objects to the ClusterManager . The ClusterManager passes the markers to the Algorithm, which transforms them into a set of clusters. The ClusterRenderer takes care of the rendering, by adding and removing clusters and individual markers. The ClusterRenderer and Algorithm are pluggable and can be customized. Create a new android maps pr...
Read more