Afficher les flows et paywalls - Android

Si vous avez créé un flow ou un paywall dans l’ancien Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel flow ou paywall contient à la fois ce qui doit être affiché et la manière dont il doit l’être.

Warning

Ce guide couvre les flows et paywalls rendus par Adapty. Le processus est différent pour les paywalls Remote Config et le mode Observateur.

Pour présenter les paywalls Remote Config, consultez Afficher un paywall conçu avec Remote Config.
Pour présenter les paywalls en mode Observer, consultez Android - Présenter des flows en mode Observer

Pour obtenir l’objet flowConfiguration utilisé ci-dessous, consultez Obtenir des flows et paywalls.

Pour afficher le flow visuel sur l’écran de l’appareil, vous devez d’abord le configurer. Pour ce faire, appelez la méthode AdaptyUI.getFlowView() ou créez directement le AdaptyFlowView :

   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" />

Après la création réussie de la vue, vous pouvez l’ajouter à la hiérarchie des vues et l’afficher à l’écran de l’appareil.

Si vous obtenez AdaptyFlowView sans appeler AdaptyUI.getFlowView(), vous devrez également appeler la méthode .showFlow().

Pour afficher le flow visuel sur l’écran de l’appareil, vous devez d’abord le configurer. Pour cela, utilisez cette fonction composable :

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

Paramètres de la requête :

Paramètre	Présence	Description
flowConfiguration	requis	Fournissez un objet `AdaptyUI.FlowConfiguration` contenant les détails visuels du flow. Utilisez la méthode `AdaptyUI.getFlowConfiguration(flow)` pour le charger. Consultez la rubrique Récupérer la configuration de la vue pour plus de détails.
products	optionnel	Fournissez un tableau d’`AdaptyPaywallProduct` pour optimiser le moment d’affichage des produits à l’écran. Si `null` est passé, AdaptyUI récupérera automatiquement les produits requis.
eventListener	optionnel	Fournissez un `AdaptyFlowEventListener` pour observer les événements du flow. Il est recommandé d’étendre `AdaptyFlowDefaultEventListener` pour faciliter l’utilisation. Consultez la rubrique Gérer les événements du flow et du paywall pour plus de détails.
insets	optionnel	Les insets sont les espaces autour du flow qui empêchent les éléments interactifs d’être masqués derrière les barres système. Valeur par défaut : `Unspecified`, ce qui signifie qu’Adapty ajustera automatiquement les insets — ce qui fonctionne très bien pour les flows bord à bord. Si votre flow n’est pas bord à bord, vous souhaiterez peut-être définir des insets personnalisés. Pour savoir comment procéder, consultez la section Modifier les insets du flow ci-dessous.
customAssets	optionnel	Passez un objet `AdaptyCustomAssets` pour remplacer les images et vidéos de votre flow ou paywall à l’exécution. Consultez Personnaliser les assets pour plus de détails.
tagResolver	optionnel	Utilisez `AdaptyUiTagResolver` pour résoudre les balises personnalisées dans le texte du flow. Ce resolver prend un paramètre de balise et le résout en chaîne de caractères correspondante.
timerResolver	optionnel	Passez le resolver ici si vous comptez utiliser une fonctionnalité de minuterie personnalisée.

Tip

Vous souhaitez voir un exemple concret d’intégration du SDK Adapty dans une application mobile ? Découvrez nos applications exemples, qui illustrent la configuration complète, notamment l’affichage des paywalls, la réalisation d’achats et d’autres fonctionnalités de base.

Modifier les marges d’un flow

Les marges (insets) sont les espaces autour du flow qui empêchent les éléments interactifs d’être masqués derrière les barres système. Par défaut, Adapty ajuste automatiquement ces marges, ce qui fonctionne très bien pour les flows plein écran.

Si votre flow n’est pas plein écran, vous pouvez définir des marges personnalisées :

Si ni la barre de statut ni la barre de navigation ne se superposent à AdaptyFlowView, utilisez AdaptyFlowInsets.None.
Pour des configurations plus spécifiques, par exemple si votre flow chevauche la barre de statut en haut mais pas en bas, vous pouvez définir uniquement bottomInset à 0, comme dans l’exemple ci-dessous :


//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;
});

Utiliser un minuteur défini par le développeur

Pour utiliser des minuteurs définis par le développeur dans votre application mobile, créez un objet timerResolver — un dictionnaire ou une map qui associe des minuteurs personnalisés aux valeurs de chaîne qui les remplaceront lors du rendu du flow. Voici un exemple :


...

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 */
    }
};

Dans cet exemple, CUSTOM_TIMER_NY est le Timer ID du timer défini par le développeur dans l’Adapty dashboard. Le timerResolver garantit que votre application met dynamiquement à jour le timer avec la valeur correcte — par exemple 13d 09h 03m 34s (calculée comme la différence entre l’heure de fin du timer, comme le Nouvel An, et l’heure actuelle).

Utiliser des balises personnalisées

Pour utiliser des balises personnalisées dans votre application mobile, créez un objet tagResolver — un dictionnaire ou une map qui associe des balises personnalisées aux valeurs de chaîne qui les remplaceront lors du rendu du flow. Voici un exemple :

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;

Dans cet exemple, USERNAME est une balise personnalisée que vous avez saisie dans le tableau de bord Adapty sous la forme <USERNAME/>. Le tagResolver permet à votre application de remplacer dynamiquement cette balise personnalisée par la valeur spécifiée — comme John.

Nous recommandons de créer et de renseigner le tagResolver juste avant d’afficher votre flow. Une fois prêt, passez-le à la méthode AdaptyUI que vous utilisez pour afficher le flow.

Modifier la couleur de l’indicateur de chargement du flow

Vous pouvez remplacer la couleur par défaut de l’indicateur de chargement de la façon suivante :


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

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

Si vous avez personnalisé un paywall avec le Paywall Builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel paywall contient à la fois ce qui doit être affiché et la façon dont cela doit l’être.

Warning

Ce guide couvre uniquement les paywalls créés dans l’ancien Paywall Builder pour Adapty SDK 3.x. Ils nécessitent le SDK v3.0. La présentation d’un paywall créé pour le SDK 2.x ou antérieur, d’un paywall avec Remote Config, ou d’un paywall en mode Observer fonctionne différemment.

Pour présenter des paywalls avec Remote Config, consultez Afficher un paywall conçu avec Remote Config.
Pour présenter des paywalls en mode Observer, consultez Android - Présenter les paywalls du Paywall Builder en mode Observer

Pour obtenir l’objet viewConfiguration utilisé ci-dessous, consultez Récupérer les paywalls du Paywall Builder et leur configuration.

Pour afficher le paywall visuel sur l’écran de l’appareil, vous devez d’abord le configurer. Pour ce faire, appelez la méthode AdaptyUI.getPaywallView() ou créez directement l’objet AdaptyPaywallView :

   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" />

Une fois la vue créée avec succès, vous pouvez l’ajouter à la hiérarchie de vues et l’afficher à l’écran de l’appareil.

Si vous obtenez AdaptyPaywallView sans appeler AdaptyUI.getPaywallView(), vous devrez également appeler la méthode .showPaywall().

Pour afficher le paywall visuel sur l’écran de l’appareil, vous devez d’abord le configurer. Pour cela, utilisez cette fonction composable :

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

Paramètres de la requête :

Paramètre	Présence	Description
viewConfiguration	obligatoire	Fournissez un objet `AdaptyUI.LocalizedViewConfiguration` contenant les détails visuels du paywall. Utilisez la méthode `Adapty.getViewConfiguration(paywall)` pour le charger. Consultez la rubrique Récupérer la configuration visuelle du paywall pour plus de détails.
products	optionnel	Fournissez un tableau d’`AdaptyPaywallProduct` pour optimiser le moment d’affichage des produits à l’écran. Si `null` est passé, AdaptyUI récupérera automatiquement les produits requis.
eventListener	optionnel	Fournissez un `AdaptyUiEventListener` pour observer les événements du paywall. Il est recommandé d’étendre `AdaptyUiDefaultEventListener` pour plus de simplicité. Consultez la rubrique Gérer les événements du paywall pour plus de détails.
insets	optionnel	Les insets sont les espaces autour du paywall qui empêchent les éléments cliquables d’être masqués derrière les barres système. Par défaut : `UNSPECIFIED`, ce qui signifie qu’Adapty ajustera automatiquement les insets — idéal pour les paywalls plein écran. Si votre paywall n’est pas plein écran, vous pouvez définir des insets personnalisés. Pour savoir comment procéder, consultez la section Modifier les insets du paywall ci-dessous.
personalizedOfferResolver	optionnel	Pour indiquer un tarif personnalisé (en savoir plus), implémentez `AdaptyUiPersonalizedOfferResolver` et fournissez votre propre logique qui associe `AdaptyPaywallProduct` à `true` si le prix du produit est personnalisé, sinon `false`.
tagResolver	optionnel	Utilisez `AdaptyUiTagResolver` pour résoudre les balises personnalisées dans le texte du paywall. Ce résolveur prend un paramètre de balise et le résout en une chaîne correspondante. Consultez la rubrique sur les balises personnalisées dans le Paywall Builder pour plus de détails.
timerResolver	optionnel	Passez le résolveur ici si vous comptez utiliser une fonctionnalité de minuterie personnalisée.

Tip

Modifier les marges du paywall

Les marges sont les espaces autour du paywall qui empêchent les éléments interactifs d’être masqués derrière les barres système. Par défaut, Adapty ajuste automatiquement ces marges, ce qui fonctionne parfaitement pour les paywalls en plein écran.

Si votre paywall n’est pas en plein écran, vous pouvez définir des marges personnalisées :

Si ni la barre d’état ni la barre de navigation ne se chevauchent avec AdaptyPaywallView, utilisez AdaptyPaywallInsets.NONE.
Pour des configurations plus personnalisées, par exemple si votre paywall chevauche la barre d’état en haut mais pas en bas, vous pouvez définir uniquement bottomInset à 0, comme indiqué dans l’exemple ci-dessous :


//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;
});

Utiliser les minuteurs définis par le développeur


...

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 */
    }
};

Dans cet exemple, CUSTOM_TIMER_NY est le Timer ID du timer défini par le développeur dans l’Adapty Dashboard. Le timerResolver permet à votre application de mettre à jour dynamiquement le timer avec la valeur correcte — comme 13d 09h 03m 34s (calculée en soustrayant l’heure actuelle de la date de fin du timer, par exemple le Jour de l’An).

Utiliser des tags personnalisés

Pour utiliser des tags personnalisés dans votre application mobile, créez un objet tagResolver — un dictionnaire ou une map qui associe des tags personnalisés aux valeurs de chaîne qui les remplaceront lors du rendu du paywall. Voici un exemple :

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;

Dans cet exemple, USERNAME est un tag personnalisé que vous avez saisi dans l’Adapty dashboard sous la forme <USERNAME/>. Le tagResolver s’assure que votre app remplace dynamiquement ce tag personnalisé par la valeur spécifiée — comme John.

Nous vous recommandons de créer et de remplir le tagResolver juste avant d’afficher votre paywall. Une fois prêt, passez-le à la méthode AdaptyUI que vous utilisez pour afficher le paywall.

Changer la couleur de l’indicateur de chargement du paywall

Vous pouvez remplacer la couleur par défaut de l’indicateur de chargement de la façon suivante :


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

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