ActionAlert

ActionAlert running on an iPad

ActionAlert running on an iPad

Works With

apple_logo google_android

ActionAlert

Highly customizable cross platform alert, dialog and notification system.


  • Four base Alert types
  • Add buttons for user interaction
  • Include icons, titles and descriptions
  • Customizable look and feel
  • Supports iOS 7

$50

About ActionAlert

ActionAlert is a highly customizable, cross platform alert and notification system for iOS and Android. Present both modal and non-modal alerts, dialog boxes and notifications with a minimal of code to quickly inform the user of the state of a process or alert them of a situation that needs their attention in your mobile app.

ActionAlert makes it easy include images, activity indicators, progress bars, and interactive buttons to a notification, while providing for a maximum of code reuse across platforms. In many cases the same code used to display an ActionAlert on one platform can be used virtually unchanged on another which not only saves time, but improves code maintainability.

Alert and Notification Types

ActionAlert provides for four main alert and notification types which can be expanded on by optionally adding titles, descriptions, icons, buttons (such as OK or Cancel) or any combination of the above. The base types are:

  • Default - A standard alert type that can have an icon, title and/or description. The Default type has a fixed width of 312 pixels and a flexable height based on its content.
  • ActivityAlert - Displays a "spinning gear" ActivityIndicator on iOS or a "spinning circle" ProgressBar on Android along with a title and/or description. The ActivityAlert type has a fixed width of 312 pixels and a flexable height based on its content.
  • ActivityAlertMedium - The same as the ActivityAlert type but only allows for a title and has a fixed width of 123 pixels.
  • ProgressAlert - Like the Default type it can have an icon, title and/or description however it includes a progress bar at the bottom of the notification. Also like the Default type, it has a fixed width of 312 pixels and a flexable height based on its content.

Default Locations and User Draggable

ActionAlert supports three default vertical locations: Top, Middle and Bottom with the alert centered horizontally. Set the default location to Custom and you can place the ActionAlert anywhere on screen via code.

Allow the user to move the alert by setting its dragable property to true and optionally set constraints on its x and y coordinates to limit its movement to a range of positions or lock it into a given location. By default the x coordinate is locked on an iPhone or iPod Touch device.

Events

ActionAlert defines the following events that you can monitor and respond to:

  • Touched
  • Moved
  • Released
  • ButtonTouched
  • ButtonReleased
  • OverlayTouched - For modal alerts, the user has tapped outside of the ActionAlert's bounds

In addition individual ActionAlertButtons attached to an ActionAlert have Touched and Released events that can be responded to directly.

Appearance

ActionAlert was designed to look and function the same across platforms, however you have full control over its look and feel. ActionAlert is fully customizable with user definable appearances for every element of its UI. You can make either Square or Round Rectangle alert boxes with user defined corner radius or optionally square off individual corners.

iOS 7 Ready

ActionAlert supports the iOS 7 look and feel by calling the Flatten method of the ActionAlert. Of course you can always adjust the results of the Flatten command to better fit the look of the alert to your mobile app.

Features

ActionAlert includes a fully documented API with comments for every feature. The ActionAlert's user interface is drawn with vectors and is fully resolution indenpendent.

iOS Examples

Here are a few examples that show creating and displaying ActionAlerts quickly via static methods of the UIActionAlert class. More control is available by creating your own instance of UIActionAlert and setting it's properties directly:

using Appracatappra.ActionComponents.ActionAlert;
…

// Default Alert title and description only
UIActionAlert.ShowAlert ("ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.");
…

// Default Alert with icon, title, description and OK button
UIActionAlert.ShowAlertOK (UIImage.FromFile ("ActionAlert_57.png"), "ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.");
…

// Default Alert with title, description and custom buttons
_alert = UIActionAlert.ShowAlert ("ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.","Cancel,Maybe,OK");

// Respond to any button being tapped
_alert.ButtonReleased += (button) => {
    _alert.Hide();
    UIActionAlert.ShowAlert(UIActionAlertLocation.Top, String.Format ("You tapped the {0} button.", button.title),"");
};
…

// Non-modal Activity Alert (spinning gear) with a title only that can be freely moved around the screen by the user
_alert = UIActionAlert.ShowActivityAlert ("Activity Alert", "", false);
_alert.draggable = true;
…

// Non-modal medium sized Activity Alert (spinning gear) with a title
_alert = UIActionAlert.ShowActivityAlertMedium ("Waiting...", false);
…

// Non-modal alert with a progress bar (set to 50%), title and description
_alert = UIActionAlert.ShowProgressAlert ("Progress Alert", "Displays an Alert for a process with a known length and gives feedback to the user.", false);
_alert.progressView.Progress = 0.5f;

Android Examples

And here are the same example ActionAlerts created in the OnCreate method of an Android Activity:

using Appracatappra.ActionComponents.ActionAlert;
…

// Default Alert title and description only
UIActionAlert.ShowAlert (this, "ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.");
…

// Default Alert with icon, title, description and OK button
UIActionAlert.ShowAlertOK (this, Resource.Drawable.ActionAlert_57, "ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.");
…

// Default Alert with title, description and custom buttons
_alert = UIActionAlert.ShowAlert (this, "ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.","Cancel,Maybe,OK");

// Respond to any button being tapped
_alert.ButtonReleased += (button) => {
    _alert.Hide();
    UIActionAlert.ShowAlert(this, UIActionAlertLocation.Top, String.Format ("You tapped the {0} button.", button.title),"");
};
…

// Non-modal Activity Alert (spinning circular progress bar) with a title only that can be freely moved around the screen by the user
_alert = UIActionAlert.ShowActivityAlert (this, "Activity Alert", "", false);
_alert.draggable = true;
…

// Non-modal medium sized Activity Alert (spinning circular progress bar) with a title
_alert = UIActionAlert.ShowActivityAlertMedium (this, "Waiting...", false);
…

// Non-modal alert with a progress bar (set to 50%), title and description
_alert = UIActionAlert.ShowProgressAlert (this, "Progress Alert", "Displays an Alert for a process with a known length and gives feedback to the user.", false);
_alert.progressView.Progress = 50;

Note: The addition of the keyword this to the start of every ActionAlert call in the above code is a reference to the current Activity being run and, aside from the difference in referencing an icon on Adroid, is the only change made from the iOS version of the code.

Trial Version

The Trial version of ActionAlert is fully functional but includes a Toast style popup. The fully licensed version removes this popup.

Some screenshots created with PlaceIt.

Drop files to upload

ActionAlert Component

Getting Started with ActionAlerts

To use an ActionAlert in your mobile application include the ActionAlert.iOS or ActionAlert.Android component and reference the following using statement in your C# code:

using Appracatappra.ActionComponents.ActionAlert;

A Special Note About Working with ActionTrays in Android

When using an ActionAlert on the Android OS you must specify the context as the first parameter of the ActionAlert's call. This is usually the Activity that the alert is being displayed in.

Note: You are also responsible for redisplaying an ActionAlert in response to the device being rotated or the Activity being restarted.

Displaying a Simple ActionAlert

ActionAlerts were designed to be displayed with a minimum of code and the quickest and easiest way to create and display one is by calling one of the many preset Static methods of the UIActionAlert class such as:

iOS Example

// Default Alert with icon, title, description and OK button
UIActionAlert.ShowAlertOK (UIImage.FromFile ("ActionAlert_57.png"), "ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.");

Android Example

// Default Alert with icon, title, description and OK button
UIActionAlert.ShowAlertOK (this, Resource.Drawable.ActionAlert_57, "ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.");

For more complete control over the ActionAlert create a new instance by calling one of its constructors and adjust its properties and settings manually via code.

Adding Buttons to an ActionAlert

All of the ActionAlert base types can be made interactive by adding touchable buttons that will be incorporated into the bottom edge of the alert. Several Static methods exist for creating standard buttons such as OK or Cancel:

iOS Example

_alert = UIActionAlert.ShowAlertOKCancel ("ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.");

Android Example

_alert = UIActionAlert.ShowAlertOKCancel (this, "ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.");

Or custom buttons can be created using:

iOS Example

_alert = UIActionAlert.ShowAlert ("ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.","Cancel,Maybe,OK");

Android Example

_alert = UIActionAlert.ShowAlert (this, "ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.","Cancel,Maybe,OK");

Where "Cancel,Maybe,OK" represents a comma separated list of button titles that will be created and added to the alert.

Responding to User Interaction

ActionAlert defines several events that can be responded to such as Touched, Moved, Released, ButtonTouched, ButtonReleased or OverlayTouched. The following is an example of handling a button being pressed on an ActionAlert:

//Respond to any button being tapped
_alert.ButtonReleased += (button) => {
    _alert.Hide();
    UIActionAlert.ShowAlert(UIActionAlertLocation.Top, String.Format ("You tapped the {0} button.", button.title),"");
};

Using Dragable

ActionView feature built-in drag handling with optional constraints on the X and/or Y axis. In the following example we will make an alert draggable, lock it's Y coordinate in place and allow the X coordinate to be drug within a given range:

// Set alert to be draggable and apply limits to it's movement
_alert.draggable = true;
_alert.xConstraint.constraintType = UIActionViewDragConstraintType.Constrained;
_alert.xConstraint.minimumValue = 140f;
_alert.xConstraint.maximumValue = 920f;
_alert.yConstraint.constraintType = UIActionViewDragConstraintType.Locked;

The drag controls work exactly the same on Android as well.

Adjust an ActionAlert's Appearance

ActionAlerts were designed to be totally customizable. Here is an example of adjusting an alerts color and squaring off one of its corners:

iOS Example

// Create an alert and customize it's appearance
_alert = UIActionAlert.ShowAlert (UIImage.FromFile ("ActionAlert_57.png"), "ActionAlert is Customizable", "You can 'square off' one or more of the corners and ajust all of the colors and styles by using properties of the alert.", "No,Yes");
_alert.appearance.background = UIColor.Orange;
_alert.buttonAppearance.background = UIColor.Orange;
_alert.buttonAppearanceHighlighted.titleColor = UIColor.Orange;
_alert.appearance.roundBottomLeftCorner = false;

// Respond to any button being tapped
_alert.ButtonReleased += (button) => {
    _alert.Hide();
};

Android Example

// Create an alert and customize it's appearance
_alert = UIActionAlert.ShowAlert (this, Resource.Drawable.ActionAlert_57, "ActionAlert is Customizable", "You can 'square off' one or more of the corners and ajust all of the colors and styles by using properties of the alert.", "No,Yes");
_alert.appearance.background = Color.Orange;
_alert.buttonAppearance.background = Color.Orange;
_alert.buttonAppearanceHighlighted.titleColor = Color.Orange;
_alert.appearance.roundBottomLeftCorner = false;

// Respond to any button being tapped
_alert.ButtonReleased += (button) => {
    _alert.Hide();
};

In addition ActionAlerts support iOS 7's design language and styling by calling the Flatten method:

iOS Example

// iOS 7 Style
_alert = UIActionAlert.ShowAlert ("ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.", "Cancel,Maybe,OK");
_alert.Flatten ();

Android Example

// iOS 7 Style
_alert = UIActionAlert.ShowAlert (this, "ActionAlert", "A cross platform Alert, Dialog and Notification system for iOS and Android.", "Cancel,Maybe,OK");
_alert.Flatten ();

NOTE: Flatten was added to the Adroid version to assist in cross platform developement.

Examples

For full examples of using ActionAlerts in your mobile application please see the ActionAlertTest.iOS or ActionAlertTest.Android example apps included with this component.

See the API documentation for ActionAlert for a complete list of features and their usage.

Trial Version

The Trial version of ActionAlert is fully functional but includes a Toast style popup. The fully licensed version removes this popup.

Other Resources

Drop files to upload

ActionAlert for iOS

You can find the full API documentation for ActionAlert iOS here:

http://appracatappra.com/api/ios/

 

ActionTableAlert for Android

You can find the full API documentation for ActionAlert Android here:

http://appracatappra.com/api/android/

Drop files to upload

At Appracatappra we take quality very seriously and always strive to provide the easiest to use and most trouble free Xamarin Studio Components available.

If you are experiencing an issue with one of our components or have a question about it's usage please either visit our support forum or fill out the request form below:

Your Name (required)

Your Email (required)

Subject

Component:

Device:

iPhone/iPod TouchiPadAndroid PhoneAndroid Tablet

OS Version:

Type:

Question/Issue

Verification:

captcha

Please enter the text above:

Drop files to upload