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 cela doit l’être.

Warning

Ce guide couvre les flows et paywalls rendus par Adapty. Le processus diffère pour les paywalls personnalisés et le mode Observer.

Pour présenter des paywalls personnalisés, consultez Présenter des paywalls personnalisés.
Pour présenter des 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 Fetch the view configuration 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 plus de simplicité. Consultez la rubrique Handle flow & paywall events pour plus de détails.
insets	optionnel	Les insets sont les espaces autour du flow qui empêchent les éléments cliquables d’être masqués par les barres système. Par défaut : `Unspecified`, ce qui signifie qu’Adapty ajustera automatiquement les insets — idéal pour les flows bord à bord. Si votre flow n’est pas bord à bord, vous pouvez définir des insets personnalisés. Pour savoir comment procéder, consultez la section Change flow insets ci-dessous.
customAssets	optionnel	Passez un objet `AdaptyCustomAssets` pour remplacer les images et vidéos de votre flow ou paywall au moment de l’exécution. Consultez Customize assets pour plus de détails.
tagResolver	optionnel	Un `AdaptyUiTagResolver` qui retourne les valeurs de votre application pour les tags personnalisés du flow. Pour plus de détails, consultez Pass data to flows.
timerResolver	optionnel	Passez le resolver ici si vous comptez utiliser la 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 tags personnalisés

Article principal : Passer des données aux flows

Créez un AdaptyUiTagResolver qui renvoie la valeur de votre application pour chaque tag personnalisé dans le flow :

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

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

Dans cet exemple, username est le nom d’un tag personnalisé dans votre flow. Les utilisateurs voient “DragonSlayer42” à la place du tag.

Passez le résolveur dans le paramètre tagResolver de AdaptyUI.getFlowView, AdaptyFlowView.showFlow, ou AdaptyFlowScreen.

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 personnalisé, ou d’un paywall en mode Observer fonctionne différemment.

Pour présenter des paywalls personnalisés, consultez Présenter des paywalls personnalisés.
Pour présenter des paywalls en mode Observer, consultez Android - Présenter les paywalls 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>