Android Modal Rich Media

Available from SDK 6.7.13

The Android Modal Rich Media feature allows developers to display HTML content inside a modal popup window within their application. This popup does not block other UI elements and can be easily dismissed using swipe gestures. The modal offers multiple customization options for appearance, behavior, animations, and more, providing a highly flexible user experience.

Key features

• Non-blocking UI: The modal does not block interaction with other UI elements.

• Customizable Swipe Gestures: Configure swipe gestures to dismiss the modal in various directions.

• Flexible Positioning: Choose where the modal appears on the screen (top, center, or bottom).

• Custom Animations: Control how the modal appears and disappears with different animation types.

• Dismissable via Swipe: Users can swipe to dismiss the modal from any direction.

• Adjustable Animation Duration: Fine-tune the speed of modal animations.

• Status Bar Handling: Option to show the modal beneath or above the status bar.

• Adjustable Window Width: Option to set the modal width to full screen or wrap content.

Usage

Enabling Modal Rich Media

To enable the Modal Rich Media feature, you need to configure it in your application's AndroidManifest.xml file by adding the following metadata entry:

<meta-data
    android:name="com.pushwoosh.rich_media_type"
    android:value="Modal" />

Default configuration

The appearance and behavior of the modal can be customized by setting a default configuration through the RichMediaManager. This configuration allows you to specify how the modal behaves, where it appears, how it can be dismissed, and the type of animations used.

Customization options

Modal View Position

You can set the position of the modal on the screen using setViewPosition(). The available values for this parameter are:

• TOP

• CENTER (default)

• BOTTOM

Dismiss Animation Types

Customize how the modal dismisses with setDismissAnimationType(). Available options include:

• FADE_OUT (default)

• SLIDE_UP

• SLIDE_DOWN

• SLIDE_LEFT

• SLIDE_RIGHT

• NONE

Present Animation Types

Define how the modal appears with setPresentAnimationType(). Available options are:

• FADE_IN

• SLIDE_UP

• SLIDE_RIGHT

• DROP_DOWN

• SLIDE_LEFT

• NONE (default)

Swipe Gesture Configuration

The modal can be dismissed with swipe gestures in different directions using setSwipeGesture(). Available swipe gestures include:

• UP

• LEFT

• RIGHT

• DOWN

• NONE (default)

Animation Duration

Control the animation speed by setting the animationDuration() in milliseconds. The duration is specified as an integer value, representing the time in milliseconds.

Modal Window Width

The modal's width can be set using setWindowWidth(), which defines whether the modal will take the full width of the screen or just enough to fit the content. The possible values are:

• FULL_SCREEN (default)

• WRAP_CONTENT

Status Bar Handling

By default, the modal will not cover the status bar. To allow the modal to appear beneath the status bar, set the setStatusBarCovered() property to true.

Example configuration

Here are some examples, demonstrating various animations, including swipe gestures, slide-in appearances, fade-out dismissals, different animation durations, and varying screen widths. Below, you can find the configurations used to achieve these effects.

Swipe gesture example

        RichMediaManager.setDefaultRichMediaConfig(new ModalRichmediaConfig()
                .setStatusBarCovered(false)
                .setSwipeGesture(ModalRichMediaSwipeGesture.RIGHT)
                .setViewPosition(ModalRichMediaViewPosition.CENTER)
                .setDismissAnimationType(ModalRichMediaDismissAnimationType.SLIDE_RIGHT)
                .setPresentAnimationType(ModalRichMediaPresentAnimationType.SLIDE_FROM_LEFT)
                .setAnimationDuration(800)
                .setWindowWidth(ModalRichMediaWindowWidth.WRAP_CONTENT));

Drop-Down Animation Example

        RichMediaManager.setDefaultRichMediaConfig(new ModalRichmediaConfig()
                .setSwipeGesture(ModalRichMediaSwipeGesture.UP)
                .setViewPosition(ModalRichMediaViewPosition.TOP)
                .setDismissAnimationType(ModalRichMediaDismissAnimationType.SLIDE_UP)
                .setPresentAnimationType(ModalRichMediaPresentAnimationType.DROP_DOWN)
                .setAnimationDuration(1000));

Bottom Rich media example

        RichMediaManager.setDefaultRichMediaConfig(new ModalRichmediaConfig()
                .setSwipeGesture(ModalRichMediaSwipeGesture.DOWN)
                .setViewPosition(ModalRichMediaViewPosition.BOTTOM)
                .setDismissAnimationType(ModalRichMediaDismissAnimationType.FADE_OUT)
                .setPresentAnimationType(ModalRichMediaPresentAnimationType.SLIDE_UP)
                .setAnimationDuration(2000));

Conclusion

The Android Modal Rich Media feature provides an easy and flexible way to present HTML content inside your app without obstructing the user experience. With its extensive customization options, including swipe gestures, animations, positioning, and window width, you can create a seamless and engaging interaction for your users.