# UI configuration

Source: https://docs.buzzvil.com/en/docs/buzzbenefit-android/v6/ui-configuration
Platform: Android
SDK major version: v6
Language: English (en)
Translation: AI-translated from Korean. Original: https://docs.buzzvil.com/docs/buzzbenefit-android/v6/ui-configuration

## Global theme

You can customize the theme of the Buzzvil SDK's default UI, including colors and icon images for ad placements and CTAs.

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-android/v6/image/M-customization_01.png)

### Primary color

You can change the primary color of key UI elements across all integrated placements, including dialog buttons and bottom sheet confirmation buttons. Send your preferred color to your Buzzvil representative at <help@buzzvil.com>.

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-android/v6/image/A-feed_custom_primary_color.png)

### Implement a custom CTA button

You can implement your own CTA button instead of using the SDK's default UI. Custom CTA buttons can be used in native and interstitial placements.

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-android/v6/image/M-customization_cta.png)

Follow these steps to implement your own CTA button.

1. Implement the view layout (`view_customized_cta.xml`). The following example implements a view layout as a layout resource.

   ```xml


   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@color/colorPrimaryDark">
           
       <TextView
           android:id="@+id/textCta"/>
           
       
       <ImageView
           android:id="@+id/imageReward"
           android:layout_width="24dp"
           android:layout_height="24dp"
           android:src="아이콘 이미지 리소스"/>

       
       <TextView
           android:id="@+id/textReward"/>
   </LinearLayout>
   ```

2. Create `YourCustomBuzzCtaView`, a subclass of `BuzzCtaView`.

3. In your subclass of `BuzzCtaView`, use `inflate` to load the CTA view layout.

4. Implement the CTA button's icon, text, and reward value in the following override methods, which are called according to the user's ad participation state.

- `renderViewParticipatingState`: The user is participating in an ad (for example, has entered an action-based ad's landing page).

- `renderViewParticipatedState`: The user has completed ad participation.

- `renderViewRewardAvailableState`: The user has not yet participated in the ad.

- `renderViewRewardNotAvailableState`: The ad offers no reward to the user.

  ```kotlin
  import com.buzzvil.buzzbenefit.BuzzCtaView

  class YourCustomBuzzCtaView(context: Context, attrs: AttributeSet?, defStyleAttr: Int) :
      BuzzCtaView(context, attrs, defStyleAttr) {
      private val rewardImageView: ImageView
      private val rewardTextView: TextView
      private val ctaTextView: TextView

      constructor(context: Context) : this(
          context,
          null
      )

      constructor(context: Context, attrs: AttributeSet?) : this(
          context,
          attrs,
          0
      )

      init {
          inflate(getContext(), R.layout.view_customized_cta, this)
          rewardImageView = findViewById(R.id.imageReward)
          rewardTextView = findViewById(R.id.textReward)
          ctaTextView = findViewById(R.id.textCta)
      }

      private fun setRewardIcon(@DrawableRes iconResId: Int) {
          rewardImageView.setImageResource(iconResId)
          rewardImageView.visibility = View.VISIBLE
      }

      private fun hideRewardIcon() {
          rewardImageView.visibility = View.GONE
      }

      private fun setCtaText(ctaText: String) {
          ctaTextView.text = ctaText
      }

      private fun setRewardText(rewardText: String) {
          rewardTextView.text = rewardText
      }

      override fun renderViewParticipatingState(callToAction: String) {
          setCtaText("참여 확인 중")
          hideRewardIcon()
          setRewardText("")
      }

      override fun renderViewParticipatedState(callToAction: String) {
          setRewardIcon(R.drawable.custom_participated_icon)
          setRewardText("")
          setCtaText("참여 완료")
      }

      override fun renderViewRewardAvailableState(callToAction: String, reward: Int) {
          setRewardIcon(R.drawable.custom_reward_icon)
          setRewardText(String.format(Locale.US, "+%,d", reward)) // 원하는 포인트 단위를 적용하세요. (예시: `+1`, `1P`)
          setCtaText(callToAction)
      }

      override fun renderViewRewardNotAvailableState(callToAction: String) {
          hideRewardIcon()
          setRewardText("")
          setCtaText(callToAction)
      }
  }
  ```

> ⚠️ **Caution**\
> Exclude the `YourCustomBuzzCtaView` class from obfuscation in your Proguard settings. Add the following line to your Proguard configuration file.
>
> ```proguard
> -keep class com.your.packagename.YourCustomBuzzCtaView { *; }
> ```

#### Apply the custom CTA button to GlobalTheme

Call `BuzzTheme.setCustomBuzzCtaView()` to apply your custom CTA button.

> ✏️ **Note**
>
> - This applies to placements such as interstitials where the SDK supplies the default ad design.
> - For native placements, apply the custom CTA button during integration. See [Native — Step 2. Configure the ad layout](https://docs.buzzvil.com/en/docs/buzzbenefit-android/v6/native#2-%EB%8B%A8%EA%B3%84-%EA%B4%91%EA%B3%A0-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0).
> - This does not apply to BenefitHub.

```kotlin
import com.buzzvil.buzzbenefit.BuzzTheme
import com.buzzvil.sdk.BuzzvilSdk

class App : Application() {
    override fun onCreate() {
        super.onCreate()

        val buzzAdBenefitConfig = ...

        // BuzzvilSdk.initialize()를 호출하기 전에 BuzzTheme을 설정합니다.
        BuzzTheme.setCustomBuzzCtaView(YourCustomBuzzCtaView::class.java)

        // Buzzvil SDK 초기화
        BuzzvilSdk.initialize(...)
    }
}
```

## Native

### Native overlay UI

To customize the native overlay UI, contact your Buzzvil representative at <help@buzzvil.com>.

- Supported image and UI text specifications:

  - Image formats: PNG, JPG, JSON (Lottie)
  - File size: Up to 2 MB
  - Image ratio: 312 x 212 (width x height). A different ratio may leave blank space or crop part of the image.
  - UI text: Up to 20 characters, including spaces, across two lines

### Native overlay area

To change where the native overlay appears, set its display area using `nativeOverlayViewLayout()` on `BuzzNativeViewBinder` as shown below.

> ✏️  **Note**
>
> - `yourCustomNativeAdLayout` must be a `ViewGroup` implemented as a child component of `BuzzNativeAdView`, such as `CardView` or `ConstraintLayout`.
> - If `nativeOverlayViewLayout()` is not set, the default background has a 12dp corner radius.

```kotlin
import com.buzzvil.buzzbenefit.buzznative.BuzzNativeViewBinder

buzzNativeViewBinder = BuzzNativeViewBinder.Builder()
    .buzzNativeView(buzzNativeAdView)
    ...
    .nativeOverlayViewLayout(yourCustomNativeAdLayout)
    .build(Constant.YOUR_NATIVE_ID)
```

## BenefitHub

This section explains how to change the design of the UI provided by the Buzzvil SDK.

### Change the point unit

You can change the point unit displayed in BenefitHub. Send the desired unit to your Buzzvil representative at <help@buzzvil.com>.

> ✏️ **Note**\
> For native and interstitial placements, change the point unit by [implementing a custom CTA button](https://docs.buzzvil.com/en/docs/buzzbenefit-android/v6/ui-configuration#cta-%EB%B2%84%ED%8A%BC-%EC%9E%90%EC%B2%B4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0).

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-android/v6/image/A-feed_custom_cta.png)

### Navigation bar

You can change the text in BenefitHub's navigation bar or implement your own navigation bar.

![](https://docs.buzzvil.com/api/content-image/buzzbenefit-android/v6/image/A-feed_toolbar_custom.png)

#### Change navigation bar text

You can change the text in the navigation bar. Send your preferred wording to your Buzzvil representative at <help@buzzvil.com>.

#### Implement a custom navigation bar

See [Integrate BenefitHub as a fragment](https://docs.buzzvil.com/en/docs/buzzbenefit-android/v6/benefithub#%ED%94%84%EB%9E%98%EA%B7%B8%EB%A8%BC%ED%8A%B8%EB%A1%9C-%EB%B2%A0%EB%84%A4%ED%95%8F%ED%97%88%EB%B8%8C-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0) to implement your own navigation bar.

### Implement a custom UI for consent to share personal information with third parties

If you implement your own UI for consent to share personal information with third parties, you must pass the user's consent status to the SDK.

Call the appropriate function as shown below.

```kotlin
import com.buzzvil.buzzbenefit.BuzzBenefit

lifecycleScope.launch(Dispatchers.IO) {
    // SDK 초기화를 하지 않으면 privacyPolicyManager는 null을 반환합니다.

    // 개인정보 동의 여부를 확인합니다.
    val isConsentGranted: Result<Boolean>? = BuzzBenefit.privacyPolicyManager?.isConsentGranted()

    // 직접 구현한 개인정보 제3자 제공 동의 UI에서 동의를 받았을 경우 아래 코드를 실행하면, 베네핏허브 진입 시 개인정보 제3자 제공 동의 UI가 노출되지 않으면서 광고 할당이 정상적으로 진행 됩니다.
    val result: Result<Unit>? = BuzzBenefit.privacyPolicyManager?.grantConsent()
}
```