# Android modal rich media

<Aside type="note" title="Important">
Available from SDK 6.7.13
</Aside>

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:

```xml
<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 also find the configurations used to achieve these effects.

### Swipe gesture example

<video src="/android-push-notifications-android-modal-rich-media-1.webm" title="Android modal with swipe right gesture to dismiss" autoplay loop muted playsinline />

```
        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

<video src="/android-push-notifications-android-modal-rich-media-2.webm" title="Android modal appearing with drop-down animation and swipe up to dismiss" autoplay loop muted playsinline />

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

```

### Bottom Rich media example

<video src="/android-push-notifications-android-modal-rich-media-3.webm" title="Android modal displayed at bottom with fade out dismissal and slide up animation" autoplay loop muted playsinline />

```
        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.