Show: Object Pascal C++
Display Preferences

Mobile Tutorial: Using Notifications (iOS and Android)

From Appmethod Topics
Jump to: navigation, search

Go Up to Mobile Tutorials: Mobile Application Development (iOS and Android)


This tutorial describes the basic steps to use notifications on your mobile device.

Three Basic Notification or Alert Styles

When users set notifications for apps on their mobile devices, notifications can be delivered from apps in the three basic styles shown here. The banner appears briefly, but the alert requires dismissal by the user.

iOS Badge Number and Android Notification Number

iOS Badge Number
iPad

Android Notification Number
Android

Notification Banner on Mobile Devices

iOS

IOSNotificationBanner.PNG

Android

Android Notification.png


Notification Center on Mobile Devices

The following images show the notification center on an iPad (Notification Center) and Android (notification drawer), where the user can pull down the list of all recent notifications.

iOS

IOSNotificationCenter.PNG

Android

Android Notification Center.png


Access the Notification Service

On the mobile platforms, FireMonkey provides the TNotificationCenter component that allows you to easily access the Notification Service.

To access the notification service, do the following:

  • Create a new mobile application:
  • File > New > Multi-Device Application-Object Pascal
  • File > New > Multi-Device Application-Appmethod C++
  • For Object Pascal applications, add the following 2 units to the uses clause if they are not present:
uses
  FMX.Platform, FMX.Notification;
  • For C++ applications, add the following include operators to the project header file:
#include <FMX.Platform.hpp>
#include <FMX.Notification.hpp>

The FMX.Notification.TNotificationCenter.CreateNotification method allows you to create an instance of the TNotification class object.

Note: In your source code, call the following methods in different OnClick events of TButton components.

Set the Icon Badge Number and Notification Number from Code

TNotification.Number defines the Icon Badge Number (for iOS devices) and the notification number (for Android devices).

To set the iOS icon badge number (for Object Pascal or C++) or the Android notification number (only for Object Pascal apps), you can implement the following methods:

Object Pascal:

procedure TForm1.SetNumber;
var
  MyNotification: TNotification;
begin
  // Create an instance of TNotification
  MyNotification := NotificationCenter1.CreateNotification;
  try
      // --- your code goes here ---
      // Set the icon or notification number
      MyNotification.Number :=18;
      // Set the alert message
      MyNotification.AlertBody := 'Object Pascal for your mobile device is here!';
      // Note: You must send the notification to the notification center for the Icon Badge Number to be displayed.
      NotificationCenter1.PresentNotification(MyNotification);
  finally
    MyNotification.DisposeOf;
  end;
end;


C++:

void __fastcall TForm1::setNumber()
{
        if (NotificationCenter1->Supported()) {
                TNotification *myNotification = NotificationCenter1->CreateNotification();
                __try {
                        myNotification->Number = 18;
                        myNotification->AlertBody = "C++ for your mobile device is here!";
                        NotificationCenter1->PresentNotification(myNotification);
                }
                __finally {
                        myNotification->DisposeOf();
                }
        }

}

After you set the MyNotification.Number field to 18, you can see the following:

  • A badge on the application icon (on the iOS Home screen):
    IOSNotification.PNG

  • A number next to the notification message in the notification center (on Android):
    Android

Schedule Notification

You can also schedule Notification Messages using the ScheduleNotification method that the TNotificationCenter class inherits from TCustomNotificationCenter.

To show a Notification Message, you need to create an instance of the TNotification class, and then define the Name, AlertBody, and FireDate fields:

Object Pascal:

procedure TForm1.ScheduleNotification;
var
  MyNotification: TNotification;
begin
  MyNotification := NotificationCenter1.CreateNotification;
  try
    MyNotification.Name := 'MyNotification';
    MyNotification.AlertBody := 'Object Pascal for your mobile device is here!';
    // Fired in 10 seconds
    MyNotification.FireDate := Now + EncodeTime(0, 0, 10, 0);
    // Send notification to the notification center
    NotificationCenter1.ScheduleNotification(MyNotification);
  finally
    MyNotification.DisposeOf;
  end;
end;

C++:

void __fastcall TForm1::scheduleNotification()
{
        if (NotificationCenter1->Supported()) {
                TNotification *myNotification = NotificationCenter1->CreateNotification();
                __try {
                        myNotification->Name = "MyNotification";
                        myNotification->AlertBody = "C++ for your mobile device is here!";
                        // Fire in 10 seconds
                        myNotification->FireDate = Now() + EncodeTime(0, 0, 10, 0);
                        // Send notification to the notification center
                        NotificationCenter1->ScheduleNotification(myNotification);
                }
                __finally {
                        myNotification->DisposeOf();
                }

        }
}

After you set the Notification Message (AlertBody), you can see it at the top of your device Home Screen. For iOS devices, this message is similar to the following screen:

IOS7NotificationBanner.png

Update or Cancel a Scheduled Notification Message

Each Scheduled Notification Message is identified through the Name property of the TNotification object.

Note: For the iOS platform, CancelNotification and ScheduleNotification can cancel or update only those notifications that have not been presented yet. If a notification has already appeared in the Device Notification List, you can neither update nor cancel the notification on iOS.

To update a scheduled notification, simply call the ScheduleNotification method again with an instance of TNotificationCenter that has the same name (Name property).

To cancel a scheduled notification, you can simply call the CancelNotification method with the identifier you used:

Object Pascal:

procedure TForm1.CancelNotification;

begin
   NotificationCenter1.CancelNotification('MyNotification');
end;

C++:

  void __fastcall TForm1::cancelNotification()
{
   NotificationCenter1->CancelNotification("MyNotification");
}

Present the Notification Message Immediately

You can also show the notification message immediately through the PresentNotification function.

To show a notification message, you need to create an instance of the TNotification class, and then define the Name and AlertBody fields.

Object Pascal:

procedure TForm1.PresentNotification;
var
  MyNotification: TNotification;
begin
  MyNotification := NotificationCenter1.CreateNotification;
  try
    MyNotification.Name := 'MyNotification';
    MyNotification.AlertBody := 'Object Pascal for your mobile device is here!';
    // Set Icon Badge Number (for iOS) or message number (for Android) as well
    MyNotification.Number := 18;
    MyNotification.EnableSound := False;
    // Send message to the notification center
    NotificationCenter1.PresentNotification(MyNotification);
  finally
    MyNotification.DisposeOf;
  end;
end;

C++:

void __fastcall TForm1::presentNotification()
{
  if (NotificationCenter1->Supported()) {
           TNotification *myNotification = NotificationCenter1->CreateNotification();
           __try { 
                   myNotification->Name = "MyNotification";
                   myNotification->AlertBody = "C++ for your mobile device is here!";
                   // Set Icon Badge Number (for iOS) or message number (for Android) as well
                   myNotification->Number = 18;
                   myNotification->EnableSound = False;
                   // Send notification to the notification center
                   NotificationCenter1->PresentNotification(myNotification);
          }
          __finally {  
                   myNotification->DisposeOf();
          }
 }
 
}

Notification Banner or Notification Alert

By default, your application shows the notification banner:

  • Notification Banner on iPad
    IOSNotificationBanner.PNG
  • Notification Banner on Android devices
    Android
  • Notification Alert (only for iOS devices)
    IOSNotificationAlert.PNG

To use a notification alert instead of a notification banner (only for iOS devices), the end user needs to change the Alert style to Alerts through the configuration page of Notification Center, available in the device Settings:

IOSNotificationCenterOption.PNG

Add Action to the Notification Alert (iOS Only)

You can also customize an alert by adding an Action button that opens the application.

To customize an Alert Action, you need to set the AlertAction field to the Action button name, and then set the HasAction field to True, as follows.

Object Pascal:

procedure TForm1.ActionNotification;
var
  MyNotification: TNotification;
begin
   MyNotification := NotificationCenter1.CreateNotification;
  try
    MyNotification.Name := 'MyNotification';
    MyNotification.AlertBody := 'Object Pascal for iOS is here! ';
    MyNotification.Number := 2;
    MyNotification.AlertAction := 'Launch';
    MyNotification.HasAction := True;
    MyNotification.FireDate := Now + EncodeTime(0, 0, 20, 0);
    NotificationCenter1.ScheduleNotification(MyNotification);
  finally
    MyNotification.DisposeOf;
  end;
end;

C++:

void __fastcall TForm1::actionNotification()
{
   if (NotificationCenter1->Supported()) {
           TNotification *myNotification = NotificationCenter1->CreateNotification();
           __try {
                   myNotification->Name = "MyNotification";
                   myNotification->AlertBody = "C++ for iOS is here!";
                   myNotification->Number = 2;
                   myNotification->AlertAction = "Launch";
                   myNotification->HasAction = True;
                   myNotification->FireDate = Now() + EncodeTime(0,0,20,0);
                   NotificationCenter1->ScheduleNotification(myNotification);
           }
           __finally {
                   myNotification->DisposeOf();
           }
   }
 }
Note: Only iOS devices support the notification alert feature.

The notification alert opens at the time that was specified through the FireDate field.

IOSNotificationAlert.PNG

Add Action to Notifications

The TNotificationCenter class provides the onReceiveLocalNotification event handler that allows you to write a response when the user clicks the notification message in the notification center. To write the response, double-click the TNotificationCenter component on the Form Designer, and then implement the OnReceiveLocalNotification event handler.

The following code snippet implements a response to show a message box that says "The <Notification name>" notification clicked."

Object Pascal:

 procedure TForm1.NotificationCenter1ReceiveLocalNotification(Sender: TObject;
  ANotification: TNotification);
   begin
     ShowMessage('The ' + ANotification.Name + ' notification clicked.' );
   end;

C++:

void __fastcall TForm1::NotificationCenter1ReceiveLocalNotification(TObject *Sender, TNotification *ANotification)
{
	   ShowMessage("The " + ANotification->Name + " notification clicked.");
}



MyNotification iOS.png

See Also

Personal tools
In other languages