---
title: "Hiển thị onboarding trong Android SDK"
description: "Tìm hiểu cách hiển thị onboarding trên Android để tăng mức độ tương tác với người dùng."
---

Trước khi bắt đầu, hãy đảm bảo rằng:

1. Bạn đã cài đặt [Adapty Android SDK](sdk-installation-android) phiên bản 3.8.0 trở lên.
2. Bạn đã [tạo onboarding](create-onboarding).
3. Bạn đã thêm onboarding vào một [placement](placements).

Nếu bạn đã tùy chỉnh onboarding bằng Onboarding Builder, bạn không cần lo lắng về việc render nó trong code ứng dụng để hiển thị cho người dùng. Onboarding đó đã bao gồm cả nội dung hiển thị lẫn cách thức hiển thị.

Để hiển thị onboarding trực quan trên màn hình thiết bị, trước tiên bạn phải cấu hình nó. Để làm điều này, gọi phương thức `AdaptyUI.getOnboardingView()` hoặc tạo `OnboardingView` trực tiếp:

<Tabs groupId="views-code-examples" queryString>
  <TabItem value="kotlin" label="Kotlin (option 1)" default>

```kotlin
val onboardingView = AdaptyUI.getOnboardingView(
    activity = this,
    viewConfig = onboardingConfig,
    eventListener = eventListener
)
```
  </TabItem>
  <TabItem value="kotlin2" label="Kotlin (option 2)">

```kotlin
val onboardingView = AdaptyOnboardingView(activity)
onboardingView.show(
    viewConfig = onboardingConfig,
    delegate = eventListener
)
```
  </TabItem>
  <TabItem value="java" label="Java (option 1)">

```java
AdaptyOnboardingView onboardingView = AdaptyUI.getOnboardingView(
    activity,
    onboardingConfig,
    eventListener
);
```
  </TabItem>
  <TabItem value="java2" label="Java (option 2)">

```java
AdaptyOnboardingView onboardingView = new AdaptyOnboardingView(activity);
onboardingView.show(onboardingConfig, eventListener);
```
  </TabItem>
  <TabItem value="xml" label="XML">

```xml
<com.adapty.ui.onboardings.AdaptyOnboardingView
        android:id="@+id/onboardingView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
```
  </TabItem>
</Tabs>

Sau khi view được tạo thành công, bạn có thể thêm nó vào view hierarchy và hiển thị trên màn hình thiết bị.

Tham số yêu cầu:

| Tham số | Bắt buộc | Mô tả                                                                                                                                                                      |
| :-------- | :------- |:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **viewConfig** | bắt buộc | Cấu hình onboarding lấy từ `AdaptyUI.getOnboardingConfiguration()`                                                                                               |
| **eventListener** | bắt buộc | Một implementation của `AdaptyOnboardingEventListener` để xử lý các sự kiện onboarding. Xem [Xử lý sự kiện onboarding](android-handle-onboarding-events) để biết thêm chi tiết.      |

## Thay đổi màu chỉ báo tải \{#change-loading-indicator-color\}

Bạn có thể ghi đè màu mặc định của chỉ báo tải theo cách sau:

```xml

<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">
    
    <item name="adapty_progressIndicatorColor">@color/yourColor</item>
</style>
```

## Thêm hiệu ứng chuyển màn hình mượt mà giữa splash screen và onboarding \{#add-smooth-transitions-between-the-splash-screen-and-onboarding\}

Theo mặc định, giữa splash screen và onboarding, bạn sẽ thấy màn hình loading cho đến khi onboarding được tải xong. Tuy nhiên, nếu bạn muốn tạo hiệu ứng chuyển màn hình mượt mà hơn, bạn có thể tùy chỉnh để kéo dài splash screen hoặc hiển thị nội dung khác.

Để làm điều này, hãy tạo file `adapty_onboarding_placeholder_view.xml` trong thư mục `res/layout` và định nghĩa placeholder (nội dung sẽ được hiển thị trong khi onboarding đang tải) ở đó.

Nếu bạn định nghĩa một placeholder, onboarding sẽ được tải ở nền và tự động hiển thị khi sẵn sàng.

## Tắt safe area padding \{#disable-safe-area-paddings\}

Theo mặc định, onboarding view tự động áp dụng safe area padding để tránh các thành phần UI hệ thống như status bar và navigation bar. Tuy nhiên, nếu bạn muốn tắt hành vi này và kiểm soát hoàn toàn bố cục, bạn có thể làm bằng cách đặt tham số `safeAreaPaddings` thành `false`.

<Tabs groupId="views-code-examples" queryString>
  <TabItem value="kotlin" label="Kotlin (option 1)" default>

```kotlin
val onboardingView = AdaptyUI.getOnboardingView(
    activity = this,
    viewConfig = onboardingConfig,
    eventListener = eventListener,
    safeAreaPaddings = false
)
```
  </TabItem>
  <TabItem value="kotlin2" label="Kotlin (option 2)">

```kotlin
val onboardingView = AdaptyOnboardingView(activity)
onboardingView.show(
    viewConfig = onboardingConfig,
    delegate = eventListener,
    safeAreaPaddings = false
)
```
  </TabItem>
  <TabItem value="java" label="Java (option 1)">

```java
AdaptyOnboardingView onboardingView = AdaptyUI.getOnboardingView(
    activity,
    onboardingConfig,
    eventListener,
    false
);
```
  </TabItem>
  <TabItem value="java2" label="Java (option 2)">

```java
AdaptyOnboardingView onboardingView = new AdaptyOnboardingView(activity);
onboardingView.show(onboardingConfig, eventListener, false);
```
  </TabItem>
</Tabs>

Ngoài ra, bạn có thể kiểm soát hành vi này toàn cục bằng cách thêm một boolean resource vào ứng dụng:

```xml

<resources>
    <bool name="adapty_onboarding_enable_safe_area_paddings">false</bool>
</resources>
```

Khi `safeAreaPaddings` được đặt thành `false`, onboarding sẽ mở rộng ra toàn màn hình mà không có padding tự động, giúp bạn kiểm soát hoàn toàn bố cục và cho phép nội dung onboarding sử dụng toàn bộ không gian màn hình.

## Tùy chỉnh cách mở liên kết trong onboarding \{#customize-how-links-open-in-onboardings\}

:::important
Tùy chỉnh cách mở liên kết trong onboarding được hỗ trợ từ Adapty SDK v3.15.1 trở đi.
:::

Theo mặc định, các liên kết trong onboarding mở trong trình duyệt in-app. Điều này mang lại trải nghiệm liền mạch cho người dùng bằng cách hiển thị trang web ngay trong ứng dụng, cho phép họ xem mà không cần chuyển sang ứng dụng khác.

Nếu bạn muốn mở liên kết trong trình duyệt ngoài thay thế, bạn có thể tùy chỉnh hành vi này bằng cách đặt tham số `externalUrlsPresentation` thành `AdaptyWebPresentation.ExternalBrowser`:

<Tabs groupId="views-code-examples" queryString>
  <TabItem value="kotlin" label="Kotlin" default>

```kotlin
val onboardingConfig = AdaptyUI.getOnboardingConfiguration(
    onboarding = onboarding,
    externalUrlsPresentation = AdaptyWebPresentation.ExternalBrowser // default – InAppBrowser
)
```
  </TabItem>
  <TabItem value="java" label="Java">

```java
AdaptyOnboardingConfiguration onboardingConfig = AdaptyUI.getOnboardingConfiguration(
    onboarding,
    AdaptyWebPresentation.ExternalBrowser // default – InAppBrowser
);
```
  </TabItem>
</Tabs>