Positioning a Toast notification on the top half of the screen

Android Toasts are great for providing simple feedback to the user, without blocking his interaction with the current view/window. In Titanium you can use Ti.UI.Notification to create a Toast:

Ti.UI.createNotification({
    message: "Please Stand By",
    duration: Ti.UI.NOTIFICATION_DURATION_LONG
}).show();

Positioning the notification

The Android API guides explain how to use setGravity(gravity, xOffset, yOffset) with setMargin(horizontalMargin, verticalMargin) to position the toast.

The xOffset and yOffset can also be found in the Titanium Documentation, just like horizontalMargin and verticalMargin

The margins can be used to set a minimum margin between the toast and its container. The offsets position the toast relative to the gravity, which takes a combination of Gravity constants used in Android to roughly position elements.

But of course.. this property isn’t available in Titanium :(

Finding gravity

Don’t be sad! For some dark reason Titanium does expose this property and the source code even includes a note saying it was left off from the documentation:

// Left gravity off from the docco - not sure what your general opinion is about specifying the gravity
// So for now this is a hidden property
if (proxy.hasProperty("gravity")) {
  gravity = TiConvert.toInt(proxy.getProperty("gravity"));
}

Position on top half of the screen

So, now we know that we can use the property, what value to give it? Well, the Android documentation leaves no details undocumented fortunately and the integer value I needed for TOP can easily be found. The default is BOTTOM | CENTER, so I only have to set TOP, but you could also use TOP | LEFT if you want:

Ti.UI.createNotification({
    message: "Please Stand By",
    duration: Ti.UI.NOTIFICATION_DURATION_LONG,
    gravity: 48 // Gravity.TOP
}).show();

JIRA

I’ve created a JIRA ticket asking to document the property and also expose the Gravity constants. Please watch it with me if you would like to get (easy) access to this feature.

App imagineer: Imagining, Engineering & Speaking about Native mobile Apps with Appcelerator Titanium & Alloy • Meetup organizer • Certified Expert • Titan


Comments

  • Muhammad Ahmed Fahad

    Hi Fokke,

    How can I hide a notification (cancel it), and prevent a queue-up of multiple notifications. The notification.hide() which internally calls toast.cancel() doesn’t seem to work at all.

    I have something like this at the moment:

    if(this.singleton_android_toast_notification){
    this.singleton_android_toast_notification.hide();
    }

    this.singleton_android_toast_notification = Ti.UI.createNotification({
    message: text,
    duration: Ti.UI.NOTIFICATION_DURATION_LONG,
    gravity: 17 // Gravity.CENTER
    });

    this.singleton_android_toast_notification.show();

  • Fokke Zandbergen Post author

    @Muhammed if cancel() doesn’t work, please open JIRA (jira.appcelerator.org) ticket with reproducing test case.

    You code never nulls out this.singleton_android_toast_notification so it will call hide() every time. You probably would want to null it after you call hide().