# UI 설정

Source: https://docs.buzzvil.com/docs/buzzbenefit-android/v6/ui-configuration
Platform: Android
SDK major version: v6
Language: Korean (ko)

## 전체 테마

Buzzvil SDK에서 제공하는 기본 UI를 사용해 광고 지면이나 CTA의 색상, 아이콘 이미지 등 테마를 변경할 수 있습니다.

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

### 주요 색상

Buzzvil SDK에서 제공하는 UI 중 다이얼로그의 버튼 색상, 바텀 시트 UI의 확인 버튼 등 앱에 연동한 모든 지면 내 주요 UI의 색상(Primary color)을 변경할 수 있습니다. 색상을 버즈빌 담당자(<help@buzzvil.com>)에게 전달해 주세요.

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

### CTA 버튼 자체 구현하기

Buzzvil SDK에서 기본으로 제공하는 UI를 사용하지 않고 CTA 버튼을 자체적으로 구현할 수 있습니다. 자체적으로 구현한 CTA 버튼을 네이티브와 인터스티셜에서 사용할 수 있습니다.

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

CTA 버튼을 직접 구현하려면 다음의 절차를 따르세요.

1. 뷰 레이아웃(`view_customized_cta.xml`)을 구현하세요. 다음은 레이아웃 리소스로 뷰 레이아웃을 구현한 예시입니다.

   ```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. `BuzzCtaView` 클래스를 상속하는 서브클래스인 `YourCustomBuzzCtaView`를 생성하세요.

3. `BuzzCtaView` 클래스에서 사용하던 CTA View 레이아웃을 `inflate`하도록 구현하세요.

4. 유저의 광고 참여 상태에 따라 호출되는 아래의 오버라이딩 메소드에서 CTA 버튼의 아이콘 이미지, 텍스트, 리워드 값을 구현하세요.

- `renderViewParticipatingState` : 유저가 광고에 참여 중인 상태 (예: 액션형 광고의 랜딩 페이지에 진입한 상태)

- `renderViewParticipatedState` : 유저가 광고 참여를 완료한 상태

- `renderViewRewardAvailableState` : 유저가 아직 광고에 참여하지 않은 상태

- `renderViewRewardNotAvailableState` : 유저가 획득할 리워드가 없는 광고

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

> ⚠️ **주의**\
> `YourCustomBuzzCtaView` 클래스는 난독화 되지 않도록 Proguard 설정에서 제외해야 합니다. Proguard 설정 파일에 다음 라인을 추가하세요.
>
> ```proguard
> -keep class com.your.packagename.YourCustomBuzzCtaView { *; }
> ```

#### 자체 구현한 CTA 버튼을 GlobalTheme에 적용하기

`BuzzTheme.setCustomBuzzCtaView()`를 호출하여 자체 구현한 CTA 버튼을 적용하세요.

> ✏️ **참고**
>
> - SDK에서 기본 광고 디자인을 제공하는 인터스티셜 등에 적용됩니다.
> - 네이티브는 연동 과정에서 자체 구현한 CTA 버튼을 적용하세요. 자세한 내용은 [네이티브 - 2 단계. 광고 레이아웃 구성하기](https://docs.buzzvil.com/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) 토픽을 참고하세요.
> - 베네핏허브에는 적용되지 않습니다.

```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(...)
    }
}
```

## 네이티브

### 네이티브 오버레이 UI

네이티브 오버레이 UI를 커스터마이징 하려면 버즈빌 담당자(<help@buzzvil.com>)에게 연락하세요.

- 이미지와 UI 스트링이 지원하는 규격은 다음과 같습니다.

  - 이미지 포맷: PNG, JPG, JSON(Lottie)
  - 파일 크기: 최대 2 MB
  - 이미지 비율: 312 x 212 (가로 x 세로). 이미지의 비율이 맞지 않을 경우, 여백이 발생하거나 이미지 일부가 잘릴 수 있습니다.
  - UI 스트링 글자 수 & 줄 수: 최대 20 자 (공백 포함) & 두 줄

### 네이티브 오버레이 영역

네이티브 오버레이가 표시되는 영역을 변경하려면 다음과 같이 `BuzzNativeViewBinder`에 `nativeOverlayViewLayout()`를 사용하여 네이티브 오버레이가 보여질 영역을 설정합니다.

> ✏️  **참고**
>
> - `yourCustomNativeAdLayout`은 `BuzzNativeAdView`의 하위 컴포넌트로 구현된 `ViewGroup`이어야 합니다. e.g. `CardView`, `ConstraintLayout`
> - `nativeOverlayViewLayout()`를 설정하지 않으면 모서리의 radius 값이 12dp인 기본 배경이 적용됩니다.

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

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

## 베네핏허브

Buzzvil SDK에서 제공하는 UI의 디자인을 변경하기 위한 방법을 안내합니다.

### 포인트 단위 변경

베네핏허브에 표시되는 포인트 단위를 변경할 수 있습니다. 변경하고자 하는 포인트 단위를 버즈빌 담당자(<help@buzzvil.com>)에게 전달해 주세요.

> ✏️ **참고**\
> 네이티브 및 인터스티셜에서는 [CTA 버튼 자체 구현하기](https://docs.buzzvil.com/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)

### 내비게이션 바

베네핏허브 내비게이션 바의 UI 스트링을 수정하거나 내비게이션 바 영역을 자체 구현할 수 있습니다.

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

#### 내비게이션 바 UI 스트링 변경하기

내비게이션 바의 UI 스트링을 변경할 수 있습니다. 변경하고자 하는 문구를 버즈빌 담당자(<help@buzzvil.com>)에게 전달해 주세요.

#### 내비게이션 바 자체 구현하기

[프래그먼트로 베네핏허브 연동하기](https://docs.buzzvil.com/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) 항목을 참고하여 내비게이션 바를 자체 구현할 수 있습니다.

### 개인정보 제3자 제공 동의 UI 자체 구현

개인정보 제3자 제공 동의 UI를 자체 구현하는 경우, SDK에 동의 여부를 전달해야 합니다.

아래 코드를 참고하여 적절한 함수를 호출해주세요.

```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()
}
```