Mostrar flows y paywalls - Android

Si has creado un flow o paywall, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Un flow o paywall ya contiene tanto lo que se debe mostrar como la forma en que debe mostrarse.

Esta guía cubre flows y paywalls del nuevo Paywall Builder renderizados por Adapty. El proceso es diferente para los paywalls de Remote Config y el modo Observer.

Para presentar paywalls de Remote Config, consulta Mostrar paywall diseñado con Remote Config.
Para presentar paywalls en modo Observer, consulta Android - Presentar paywalls de Paywall Builder en modo Observer

Para obtener el objeto flowConfiguration utilizado a continuación, consulta Obtener flows y paywalls.

Para mostrar el flow visual en la pantalla del dispositivo, primero debes configurarlo. Para ello, llama al método AdaptyUI.getFlowView() o crea el AdaptyFlowView directamente:

   val flowView = AdaptyUI.getFlowView(
       activity,
       flowConfiguration,
       products,
       eventListener,
       insets,
       customAssets,
       tagResolver,
       timerResolver,
   )

   val flowView =
        AdaptyFlowView(activity) // or retrieve it from xml
   ...
   with(flowView) {
       showFlow(
           flowConfiguration,
           products,
					 eventListener,
           insets,
           customAssets,
           tagResolver,
           timerResolver,
       )
   }

AdaptyFlowView flowView = AdaptyUI.getFlowView(
        activity,
        flowConfiguration,
        products,
        eventListener,
        insets,
        customAssets,
        tagResolver,
        timerResolver
);

AdaptyFlowView flowView =
  new AdaptyFlowView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
flowView.showFlow(flowConfiguration, products, eventListener, insets, customAssets, tagResolver, timerResolver);

<com.adapty.ui.AdaptyFlowView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Una vez que la vista se haya creado correctamente, puedes añadirla a la jerarquía de vistas y mostrarla en la pantalla del dispositivo.

Si obtienes AdaptyFlowView sin llamar a AdaptyUI.getFlowView(), también necesitarás llamar al método .showFlow().

Para mostrar el flow visual en la pantalla del dispositivo, primero debes configurarlo. Para ello, usa esta función composable:

AdaptyFlowScreen(
    flowConfiguration,
    products,
    eventListener,
    insets,
    customAssets,
    tagResolver,
    timerResolver,
)

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
flowConfiguration	obligatorio	Proporciona un objeto `AdaptyUI.FlowConfiguration` con los detalles visuales del flow. Usa el método `AdaptyUI.getFlowConfiguration(flow)` para cargarlo. Consulta el tema Fetch the view configuration para más detalles.
products	opcional	Proporciona un array de `AdaptyPaywallProduct` para optimizar el momento en que se muestran los productos en pantalla. Si se pasa `null`, AdaptyUI obtendrá los productos necesarios automáticamente.
eventListener	opcional	Proporciona un `AdaptyFlowEventListener` para observar los eventos del flow. Se recomienda extender `AdaptyFlowDefaultEventListener` para facilitar su uso. Consulta el tema Handle flow & paywall events para más detalles.
insets	opcional	Los insets son los espacios alrededor del flow que evitan que los elementos interactivos queden ocultos tras las barras del sistema. Por defecto: `Unspecified`, lo que significa que Adapty ajustará los insets automáticamente, lo cual funciona bien para flows edge-to-edge. Si tu flow no es edge-to-edge, puede que quieras definir insets personalizados. Consulta la sección Change flow insets a continuación.
customAssets	opcional	Pasa un objeto `AdaptyCustomAssets` para reemplazar imágenes y vídeos en tu flow o paywall en tiempo de ejecución. Consulta Customize assets para más detalles.
tagResolver	opcional	Usa `AdaptyUiTagResolver` para resolver etiquetas personalizadas dentro del texto del flow. Este resolver recibe un parámetro de etiqueta y lo resuelve en la cadena correspondiente. Consulta el tema Custom tags in Paywall Builder para más detalles.
timerResolver	opcional	Pasa el resolver aquí si vas a utilizar funcionalidad de temporizador personalizado.

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras apps de ejemplo, que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

Cambiar los márgenes del flow

Los márgenes son los espacios alrededor del flow que evitan que los elementos interactivos queden ocultos detrás de las barras del sistema. Por defecto, Adapty ajusta automáticamente estos márgenes, lo que funciona muy bien para flows edge-to-edge.

Si tu flow no es edge-to-edge, puede que quieras definir márgenes personalizados:

Si ni la barra de estado ni la barra de navegación se superponen con el AdaptyFlowView, usa AdaptyFlowInsets.None.
Para configuraciones más personalizadas, por ejemplo si tu flow se superpone con la barra de estado superior pero no con la inferior, puedes establecer solo el bottomInset a 0, como se muestra en el ejemplo siguiente:


//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
    ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
        val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        ViewCompat.setOnApplyWindowInsetsListener(this, null)
        action(systemBarInsets)
        insets
    }
}
//and then use it with the view
flowView.onReceiveSystemBarsInsets { insets ->
    val flowInsets = AdaptyFlowInsets.vertical(insets.top, 0)
    flowView.showFlow(
           flowConfiguration,
           products,
					 eventListener,
           flowInsets,
           customAssets,
           tagResolver,
           timerResolver,
       )
}


...

ViewCompat.setOnApplyWindowInsetsListener(flowView, (view, insets) -> {
    Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
    ViewCompat.setOnApplyWindowInsetsListener(flowView, null);

    AdaptyFlowInsets flowInsets =
                AdaptyFlowInsets.vertical(systemBarInsets.top, 0);
    flowView.showFlow(flowConfiguration, products, eventListener, flowInsets);

    return insets;
});

Usar el temporizador definido por el desarrollador

Para usar temporizadores definidos por el desarrollador en tu app, crea un objeto timerResolver—un diccionario o mapa que asocia temporizadores personalizados con los valores de cadena que los reemplazarán cuando el flow se renderice. Aquí tienes un ejemplo:


...

val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to Calendar.getInstance(TimeZone.getDefault()).apply { set(2025, 0, 1) }.time, // New Year 2025
)
val timerResolver = AdaptyUiTimerResolver { timerId ->
    customTimers.getOrElse(timerId, { Date(System.currentTimeMillis() + 3600 * 1000L) /* in 1 hour */ } )
}


...

Map<String, Date> customTimers = new HashMap<>();
customTimers.put(
        "CUSTOM_TIMER_NY",
        new Calendar.Builder().setTimeZone(TimeZone.getDefault()).setDate(2025, 0, 1).build().getTime()
);
AdaptyUiTimerResolver timerResolver = new AdaptyUiTimerResolver() {
    @NonNull
    @Override
    public Date timerEndAtDate(@NonNull String timerId) {
        Date date = customTimers.get(timerId);
        return date != null ? date : new Date(System.currentTimeMillis() + 3600 * 1000L); /* en 1 hora */
    }
};

En este ejemplo, CUSTOM_TIMER_NY es el Timer ID del temporizador definido por el desarrollador que configuraste en el Adapty dashboard. El timerResolver garantiza que tu app actualice dinámicamente el temporizador con el valor correcto, como 13d 09h 03m 34s (calculado como la hora de fin del temporizador, por ejemplo el Año Nuevo, menos la hora actual).

Usar etiquetas personalizadas

Para usar etiquetas personalizadas en tu aplicación móvil, crea un objeto tagResolver—un diccionario o mapa que asocia etiquetas personalizadas con los valores de cadena que las reemplazarán cuando se renderice el flow. Aquí tienes un ejemplo:

val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }

Map<String, String> customTags = new HashMap<>();
customTags.put("USERNAME", "John");
AdaptyUiTagResolver tagResolver = customTags::get;

En este ejemplo, USERNAME es una etiqueta personalizada que introdujiste en el Adapty dashboard como <USERNAME/>. El tagResolver se asegura de que tu app reemplace dinámicamente esta etiqueta personalizada con el valor indicado, como John.

Te recomendamos crear y completar el tagResolver justo antes de mostrar tu flow. Una vez listo, pásalo al método de AdaptyUI que uses para presentar el flow.

Cambiar el color del indicador de carga del flow

Puedes reemplazar el color predeterminado del indicador de carga de la siguiente forma:


<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">

    <item name="adapty_progressIndicatorColor">@color/yourColor</item>
</style>

Si has personalizado un paywall con el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese paywall ya incluye tanto lo que se debe mostrar como la forma en que debe mostrarse.

Esta guía es solo para paywalls del nuevo Paywall Builder que requieren SDK v3.0. El proceso para mostrar paywalls difiere según la versión del Paywall Builder utilizada, los paywalls de Remote Config y el modo Observer.

Para mostrar paywalls de Remote Config, consulta Renderizar un paywall diseñado con Remote Config.
Para mostrar paywalls en modo Observer, consulta Android - Mostrar paywalls del Paywall Builder en modo Observer

Para obtener el objeto viewConfiguration utilizado a continuación, consulta Obtener paywalls del Paywall Builder y su configuración.

Para mostrar el paywall visual en la pantalla del dispositivo, primero debes configurarlo. Para ello, llama al método AdaptyUI.getPaywallView() o crea el AdaptyPaywallView directamente:

   val paywallView = AdaptyUI.getPaywallView(
       activity,
       viewConfiguration,
       products,
       eventListener,
       insets,
       personalizedOfferResolver,
       tagResolver,
       timerResolver,
   )

   val paywallView =
        AdaptyPaywallView(activity) // or retrieve it from xml
   ...
   with(paywallView) {
       showPaywall(
           viewConfiguration,
           products,
					 eventListener,
           insets,
           personalizedOfferResolver,
           tagResolver,
           timerResolver,
       )
   }

AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        eventListener,
        insets,
        personalizedOfferResolver,
        tagResolver,
        timerResolver
);

AdaptyPaywallView paywallView =
  new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.showPaywall(viewConfiguration, products, eventListener, insets, personalizedOfferResolver, tagResolver, timerResolver);

<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Después de que la vista se haya creado correctamente, puedes añadirla a la jerarquía de vistas y mostrarla en la pantalla del dispositivo.

Si obtienes AdaptyPaywallView sin llamar a AdaptyUI.getPaywallView(), también tendrás que llamar al método .showPaywall().

Para mostrar el paywall visual en la pantalla del dispositivo, primero debes configurarlo. Para ello, utiliza esta función composable:

AdaptyPaywallScreen(
    viewConfiguration,
    products,
    eventListener,
    insets,
    personalizedOfferResolver,
    tagResolver,
    timerResolver,
)

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
viewConfiguration	obligatorio	Proporciona un objeto `AdaptyUI.LocalizedViewConfiguration` con los detalles visuales del paywall. Usa el método `Adapty.getViewConfiguration(paywall)` para cargarlo. Consulta el tema Fetch the visual configuration of paywall para más detalles.
products	opcional	Proporciona un array de `AdaptyPaywallProduct` para optimizar el momento en que se muestran los productos en pantalla. Si se pasa `null`, AdaptyUI obtendrá automáticamente los productos necesarios.
eventListener	opcional	Proporciona un `AdaptyUiEventListener` para observar los eventos del paywall. Se recomienda extender `AdaptyUiDefaultEventListener` para facilitar su uso. Consulta el tema Handling paywall events para más detalles.
insets	opcional	Los insets son los espacios alrededor del paywall que evitan que los elementos interactivos queden ocultos detrás de las barras del sistema. Por defecto: `UNSPECIFIED`, lo que significa que Adapty ajustará los insets automáticamente, algo que funciona muy bien para paywalls edge-to-edge. Si tu paywall no es edge-to-edge, puede que quieras definir insets personalizados. Puedes ver cómo hacerlo en la sección Change paywall insets más abajo.
personalizedOfferResolver	opcional	Para indicar precios personalizados (más información), implementa `AdaptyUiPersonalizedOfferResolver` y añade tu propia lógica que devuelva `true` para los `AdaptyPaywallProduct` cuyo precio sea personalizado, y `false` en caso contrario.
tagResolver	opcional	Usa `AdaptyUiTagResolver` para resolver etiquetas personalizadas dentro del texto del paywall. Este resolver recibe un parámetro de etiqueta y lo resuelve a la cadena correspondiente. Consulta el tema Custom tags in Paywall Builder para más detalles.
timerResolver	opcional	Pasa el resolver aquí si vas a usar la funcionalidad de temporizador personalizado.

Cambiar los márgenes del paywall

Los márgenes son los espacios alrededor del paywall que evitan que los elementos interactivos queden ocultos detrás de las barras del sistema. Por defecto, Adapty ajusta automáticamente estos márgenes, lo que funciona perfectamente para paywalls de borde a borde.

Si tu paywall no es de borde a borde, puede que quieras definir márgenes personalizados:

Si ni la barra de estado ni la barra de navegación se superponen con AdaptyPaywallView, usa AdaptyPaywallInsets.NONE.
Para configuraciones más personalizadas, como cuando tu paywall se superpone con la barra de estado superior pero no con la inferior, puedes establecer solo el bottomInset a 0, como se muestra en el ejemplo a continuación:


//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
    ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
        val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        ViewCompat.setOnApplyWindowInsetsListener(this, null)
        action(systemBarInsets)
        insets
    }
}
//and then use it with the view
paywallView.onReceiveSystemBarsInsets { insets ->
    val paywallInsets = AdaptyPaywallInsets.vertical(insets.top, 0)
    paywallView.showPaywall(
           viewConfiguration,
           products,
					 eventListener,
           paywallInsets,
           personalizedOfferResolver,
           tagResolver,
           timerResolver,
       )
}


...

ViewCompat.setOnApplyWindowInsetsListener(paywallView, (view, insets) -> {
    Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
    ViewCompat.setOnApplyWindowInsetsListener(paywallView, null);

    AdaptyPaywallInsets paywallInsets =
                AdaptyPaywallInsets.of(systemBarInsets.top, 0);
    paywallView.showPaywall(paywall, products, viewConfiguration, paywallInsets, productTitleResolver);

    return insets;
});

Usar temporizador definido por el desarrollador

Para usar temporizadores definidos por el desarrollador en tu app, crea un objeto timerResolver —un diccionario o mapa que asocia temporizadores personalizados con los valores de cadena que los reemplazarán cuando se renderice el paywall. Aquí tienes un ejemplo:


...

val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to Calendar.getInstance(TimeZone.getDefault()).apply { set(2025, 0, 1) }.time, // New Year 2025
)
val timerResolver = AdaptyUiTimerResolver { timerId ->
    customTimers.getOrElse(timerId, { Date(System.currentTimeMillis() + 3600 * 1000L) /* in 1 hour */ } )
}


...

Map<String, Date> customTimers = new HashMap<>();
customTimers.put(
        "CUSTOM_TIMER_NY",
        new Calendar.Builder().setTimeZone(TimeZone.getDefault()).setDate(2025, 0, 1).build().getTime()
);
AdaptyUiTimerResolver timerResolver = new AdaptyUiTimerResolver() {
    @NonNull
    @Override
    public Date timerEndAtDate(@NonNull String timerId) {
        Date date = customTimers.get(timerId);
        return date != null ? date : new Date(System.currentTimeMillis() + 3600 * 1000L); /* in 1 hour */
    }
};

En este ejemplo, CUSTOM_TIMER_NY es el Timer ID del temporizador definido por el desarrollador que configuraste en el Adapty dashboard. El timerResolver garantiza que tu app actualice dinámicamente el temporizador con el valor correcto, como 13d 09h 03m 34s (calculado como la hora de finalización del temporizador, por ejemplo el Año Nuevo, menos la hora actual).

Usa etiquetas personalizadas

Para usar etiquetas personalizadas en tu app, crea un objeto tagResolver—un diccionario o mapa que asocia etiquetas personalizadas con los valores de cadena que las reemplazarán cuando se renderice el paywall. Aquí tienes un ejemplo:

val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }

Map<String, String> customTags = new HashMap<>();
customTags.put("USERNAME", "John");
AdaptyUiTagResolver tagResolver = customTags::get;

En este ejemplo, USERNAME es una etiqueta personalizada que introdujiste en el Adapty dashboard como <USERNAME/>. El tagResolver se encarga de que tu app reemplace dinámicamente esta etiqueta personalizada con el valor especificado, como John.

Te recomendamos crear y rellenar el tagResolver justo antes de mostrar tu paywall. Una vez listo, pásalo al método de AdaptyUI que uses para presentar el paywall.

Cambiar el color del indicador de carga del paywall

Puedes cambiar el color por defecto del indicador de carga de la siguiente manera:


<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">

    <item name="adapty_progressIndicatorColor">@color/yourColor</item>
</style>