# Rich media modal de Android

<Aside type="note" title="Importante">
Disponible a partir del SDK 6.7.13
</Aside>

La función Rich Media Modal de Android permite a los desarrolladores mostrar contenido HTML dentro de una ventana emergente modal en su aplicación. Esta ventana emergente no bloquea otros elementos de la interfaz de usuario y se puede descartar fácilmente mediante gestos de deslizamiento. El modal ofrece múltiples opciones de personalización para la apariencia, el comportamiento, las animaciones y más, proporcionando una experiencia de usuario altamente flexible.

## Características principales

- **Interfaz de usuario no bloqueante**: El modal no bloquea la interacción con otros elementos de la interfaz de usuario.
- **Gestos de deslizamiento personalizables**: Configure gestos de deslizamiento para descartar el modal en varias direcciones.
- **Posicionamiento flexible**: Elija dónde aparece el modal en la pantalla (superior, centro o inferior).
- **Animaciones personalizadas**: Controle cómo aparece y desaparece el modal con diferentes tipos de animación.
- **Descartable mediante deslizamiento**: Los usuarios pueden deslizar para descartar el modal desde cualquier dirección.
- **Duración de la animación ajustable**: Ajuste la velocidad de las animaciones del modal.
- **Manejo de la barra de estado**: Opción para mostrar el modal debajo o encima de la barra de estado.
- **Ancho de ventana ajustable**: Opción para establecer el ancho del modal a pantalla completa o para que se ajuste al contenido.

## Uso

### Habilitar Rich Media modal

Para habilitar la función **Modal Rich Media**, debe configurarla en el archivo `AndroidManifest.xml` de su aplicación agregando la siguiente entrada de metadatos:

```xml
<meta-data
    android:name="com.pushwoosh.rich_media_type"
    android:value="Modal" />
```
## Configuración predeterminada
La apariencia y el comportamiento del modal se pueden personalizar estableciendo una configuración predeterminada a través del `RichMediaManager`. Esta configuración le permite especificar cómo se comporta el modal, dónde aparece, cómo se puede descartar y el tipo de animaciones utilizadas.

## Opciones de personalización

### Posición de la vista modal

Puede establecer la posición del modal en la pantalla usando `setViewPosition()`. Los valores disponibles para este parámetro son:

- `TOP`
- `CENTER` (predeterminado)
- `BOTTOM`

### Tipos de animación de descarte

Personalice cómo se descarta el modal con `setDismissAnimationType()`. Las opciones disponibles incluyen:

- `FADE_OUT` (predeterminado)
- `SLIDE_UP`
- `SLIDE_DOWN`
- `SLIDE_LEFT`
- `SLIDE_RIGHT`
- `NONE`

### Tipos de animación de presentación

Defina cómo aparece el modal con `setPresentAnimationType()`. Las opciones disponibles son:

- `FADE_IN`
- `SLIDE_UP`
- `SLIDE_RIGHT`
- `DROP_DOWN`
- `SLIDE_LEFT`
- `NONE` (predeterminado)

### Configuración de gestos de deslizamiento

El modal se puede descartar con gestos de deslizamiento en diferentes direcciones usando `setSwipeGesture()`. Los gestos de deslizamiento disponibles incluyen:

- `UP`
- `LEFT`
- `RIGHT`
- `DOWN`
- `NONE` (predeterminado)

### Duración de la animación

Controle la velocidad de la animación estableciendo la `animationDuration()` en milisegundos. La duración se especifica como un valor entero, que representa el tiempo en milisegundos.

### Ancho de la ventana modal

El ancho del modal se puede establecer usando `setWindowWidth()`, que define si el modal ocupará todo el ancho de la pantalla o solo lo suficiente para ajustarse al contenido. Los valores posibles son:

- `FULL_SCREEN` (predeterminado)
- `WRAP_CONTENT`

### Manejo de la barra de estado

Por defecto, el modal no cubrirá la barra de estado. Para permitir que el modal aparezca debajo de la barra de estado, establezca la propiedad `setStatusBarCovered()` en `true`.


## Configuración de ejemplo
Aquí hay algunos ejemplos que demuestran varias animaciones, incluyendo gestos de deslizamiento, apariciones con deslizamiento, descartes con desvanecimiento, diferentes duraciones de animación y anchos de pantalla variables. A continuación, también puede encontrar las configuraciones utilizadas para lograr estos efectos.

### Ejemplo de gesto de deslizamiento

<video src="/android-push-notifications-android-modal-rich-media-1.webm" title="Modal de Android con gesto de deslizamiento a la derecha para descartar" 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));
```
### Ejemplo de animación desplegable

<video src="/android-push-notifications-android-modal-rich-media-2.webm" title="Modal de Android que aparece con animación desplegable y se descarta deslizando hacia arriba" autoplay loop muted playsinline />

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

```

### Ejemplo de Rich Media inferior

<video src="/android-push-notifications-android-modal-rich-media-3.webm" title="Modal de Android que se muestra en la parte inferior con descarte de desvanecimiento y animación de deslizamiento hacia arriba" autoplay loop muted playsinline />

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

## Conclusión
La función Rich Media Modal de Android proporciona una forma fácil y flexible de presentar contenido HTML dentro de su aplicación sin obstruir la experiencia del usuario. Con sus amplias opciones de personalización, que incluyen gestos de deslizamiento, animaciones, posicionamiento y ancho de ventana, puede crear una interacción fluida y atractiva para sus usuarios.