---
title: "Android - 新しいペイウォールビルダーのペイウォールを表示する"
description: "Androidで効果的なマネタイズのためのペイウォール表示方法を学びましょう。"
---

ペイウォールビルダーを使ってペイウォールをカスタマイズした場合、ユーザーに表示するためのレンダリングコードをモバイルアプリに書く必要はありません。このようなペイウォールには、表示内容と表示方法の両方が含まれています。

:::warning

このガイドは、SDK v3.0 が必要な**新しいペイウォールビルダーのペイウォール**専用です。ペイウォールの表示方法は、異なるバージョンのペイウォールビルダーで設計されたペイウォール、リモートコンフィグペイウォール、[Observer モード](observer-vs-full-mode)によって異なります。

- **リモートコンフィグペイウォール**の表示については、[リモートコンフィグで設計されたペイウォールのレンダリング](present-remote-config-paywalls)をご覧ください。
- **Observer モードペイウォール**の表示については、[Android - Observer モードでペイウォールビルダーのペイウォールを表示する](android-present-paywall-builder-paywalls-in-observer-mode)をご覧ください。

:::

以下で使用する `viewConfiguration` オブジェクトの取得方法については、[ペイウォールビルダーのペイウォールと設定を取得する](android-get-pb-paywalls)をご覧ください。

<Tabs groupId="current-os" queryString>
<TabItem value="views" label="Views" default>

デバイス画面にビジュアルペイウォールを表示するには、まず設定が必要です。`AdaptyUI.getPaywallView()` メソッドを呼び出すか、`AdaptyPaywallView` を直接作成してください：

<Tabs groupId="current-os" queryString>
  <TabItem value="kotlin" label="Kotlin (option 1)" default>

```kotlin showLineNumbers
   val paywallView = AdaptyUI.getPaywallView(
       activity,
       viewConfiguration,
       products,
       eventListener,
       insets,
       personalizedOfferResolver,
       tagResolver,
       timerResolver,
   )
```
</TabItem>
<TabItem value="kotlin2" label="Kotlin (option 2)" default>

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

</TabItem>
<TabItem value="java" label="Java (option 1)" default>

```java showLineNumbers
AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        eventListener,
        insets,
        personalizedOfferResolver,
        tagResolver,
        timerResolver
);
```
</TabItem>
<TabItem value="java2" label="Java (option 2)" default>

```java showLineNumbers
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);
```

</TabItem>
<TabItem value="XML" label="XML" default>

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

ビューが正常に作成されたら、ビュー階層に追加してデバイス画面に表示できます。

`AdaptyUI.getPaywallView()` を呼び出さずに `AdaptyPaywallView` を取得した場合は、`.showPaywall()` メソッドも呼び出す必要があります。

</TabItem>
<TabItem value="compose" label="Jetpack Compose" default>

デバイス画面にビジュアルペイウォールを表示するには、まず設定が必要です。次のコンポーザブル関数を使用してください：

```kotlin showLineNumbers
AdaptyPaywallScreen(
    viewConfiguration,
    products,
    eventListener,
    insets,
    personalizedOfferResolver,
    tagResolver,
    timerResolver,
)
```
</TabItem>
</Tabs>

リクエストパラメータ：

| パラメータ                       | 必須/任意 | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| :---------------------------- | :------- |:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **viewConfiguration**         | 必須 | ペイウォールのビジュアル詳細を含む `AdaptyUI.LocalizedViewConfiguration` オブジェクトを指定します。`Adapty.getViewConfiguration(paywall)` メソッドで読み込んでください。詳細は[ペイウォールのビジュアル設定を取得する](android-get-pb-paywalls#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder)をご覧ください。                                                                                                                                 |
| **products**                  | 任意 | 画面上のプロダクト表示タイミングを最適化するために `AdaptyPaywallProduct` の配列を指定します。`null` を渡すと、AdaptyUI が必要なプロダクトを自動的に取得します。                                                                                                                                                                                                                                                                              |
| **eventListener**             | 任意 | ペイウォールイベントを監視するために `AdaptyUiEventListener` を指定します。使いやすさのために `AdaptyUiDefaultEventListener` の拡張を推奨します。詳細は[ペイウォールイベントの処理](android-handling-events)をご覧ください。                                                                                                                                                                                                                                       |
| **insets**                    | 任意 | <p>インセットは、システムバーの後ろにタップ可能な要素が隠れないようにするためのペイウォール周囲のスペースです。</p><p>デフォルト: `UNSPECIFIED`（Adapty がインセットを自動調整します。エッジ・ツー・エッジのペイウォールに適しています）</p><p>ペイウォールがエッジ・ツー・エッジでない場合は、カスタムインセットを設定することをお勧めします。設定方法は下記の[ペイウォールインセットの変更](#change-paywall-insets)セクションをご覧ください。</p> |
| **personalizedOfferResolver** | 任意 | パーソナライズされた価格設定（[詳細はこちら](https://developer.android.com/google/play/billing/integrate#personalized-price)）を指定するには、`AdaptyUiPersonalizedOfferResolver` を実装し、`AdaptyPaywallProduct` が個人化された価格かどうかを true/false で返す独自のロジックを渡してください。                                                                                                                                                      |
| **tagResolver**               | 任意 | ペイウォールテキスト内のカスタムタグを解決するために `AdaptyUiTagResolver` を使用します。このリゾルバーはタグパラメータを受け取り、対応する文字列に解決します。詳細はペイウォールビルダーのカスタムタグのトピックをご覧ください。                                                                                                                                                                                                      |
| **timerResolver**             | 任意 | カスタムタイマー機能を使用する場合は、ここにリゾルバーを渡してください。                                                                                                                                                                                                                                                                                                                                                                                      |

:::tip

Adapty SDK がモバイルアプリにどのように統合されているか、実際の例を見てみませんか？ペイウォールの表示、購入処理、その他の基本機能を含む完全なセットアップを実演している[サンプルアプリ](sample-apps)をご覧ください。

:::

## ペイウォールインセットの変更 \{#change-paywall-insets\}

インセットは、システムバーの後ろにタップ可能な要素が隠れないようにするためのペイウォール周囲のスペースです。デフォルトでは、Adapty がインセットを自動調整します。これはエッジ・ツー・エッジのペイウォールに適しています。

ペイウォールがエッジ・ツー・エッジでない場合は、カスタムインセットの設定をお勧めします：

- ステータスバーとナビゲーションバーのどちらも `AdaptyPaywallView` と重なっていない場合は `AdaptyPaywallInsets.NONE` を使用してください。
- ペイウォールが上部のステータスバーとは重なっているが下部とは重なっていない場合など、より詳細な設定が必要な場合は、以下の例のように `bottomInset` のみを `0` に設定できます：

<Tabs groupId="current-os" queryString>
<TabItem value="kotlin" label="Kotlin" default>
```kotlin showLineNumbers

//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,
       )
}
```
</TabItem>
<TabItem value="java" label="Java" default>
```java showLineNumbers

...

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

## 開発者定義タイマーの使用 \{#use-developer-defined-timer\}

モバイルアプリで開発者定義タイマーを使用するには、カスタムタイマーとペイウォールのレンダリング時に置き換えられる文字列値をペアにしたディクショナリまたはマップである `timerResolver` オブジェクトを作成します。以下に例を示します：

<Tabs groupId="current-os" queryString>
<TabItem value="kotlin" label="Kotlin" default>

```kotlin showLineNumbers

...

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 */ } )
}
```

</TabItem>
<TabItem value="java" label="Java" default>

```java showLineNumbers

...

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

</TabItem>

</Tabs>

この例では、`CUSTOM_TIMER_NY` は Adapty ダッシュボードで設定した開発者定義タイマーの **Timer ID** です。`timerResolver` により、アプリはタイマーの終了時刻（元日など）から現在時刻を引いて計算した `13d 09h 03m 34s` のような正確な値でタイマーを動的に更新します。

## カスタムタグの使用 \{#use-custom-tags\}

モバイルアプリでカスタムタグを使用するには、カスタムタグとペイウォールのレンダリング時に置き換えられる文字列値をペアにしたディクショナリまたはマップである `tagResolver` オブジェクトを作成します。以下に例を示します：

<Tabs groupId="current-os" queryString>
<TabItem value="kotlin" label="Kotlin" default>

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

</TabItem>
<TabItem value="java" label="Java" default>

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

</TabItem>
</Tabs>

この例では、`USERNAME` は Adapty ダッシュボードで `<USERNAME/>` として入力したカスタムタグです。`tagResolver` により、アプリはこのカスタムタグを `John` のような指定された値に動的に置き換えます。

`tagResolver` はペイウォールを表示する直前に作成・設定することをお勧めします。準備ができたら、ペイウォール表示に使用する AdaptyUI メソッドに渡してください。

## ペイウォールのローディングインジケーターの色を変更する \{#change-paywall-loading-indicator-color\}

ローディングインジケーターのデフォルトカラーは、次の方法でオーバーライドできます：

```xml showLineNumbers title = "XML"

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

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