디자인 커스터마이징

이 페이지에서는 BuzzAd Android용 SDK에서 제공하는 UI의 디자인을 변경하기 위한 방법을 확인할 수 있습니다.

✏️  참고
추가적인 디자인 변경을 원하는 경우, 고급 설정 토픽을 참고해 UI를 직접 구현하세요.

피드 배경 색상 변경하기

✅  중요
이 기능은 BuzzAd Android용 SDK v3.27.x부터 사용할 수 있습니다.

피드 배경 색상을 변경할 수 있습니다.

final BuzzAdFeedTheme buzzAdFeedTheme =
      BuzzAdFeedTheme.getDefault()
        .backgroundColor(R.color.YOUR_BACKGROUND_COLOR) // Feed의 배경 색상
BuzzAdFeed.setDefaultTheme(buzzAdFeedTheme);

✏️  참고
backgroundColor 변경 시 Toolbar, Header, Tab background의 BackgroundColor도 함께 변경됩니다.

탭 디자인 변경하기

피드 탭이 활성화되어 있는 경우, 탭의 UI 디자인을 변경할 수 있습니다.
이때 tabTextColorSelector처럼 이름에 selector가 포함된 옵션은 Android 개발 정책에 따라 설정하는 리소스에 <selector>가 포함되어야 합니다. 자세한 내용은 Android 공식 문서를 참고하세요.

탭 UI 디자인을 변경하려면 다음의 예시를 참고하세요.

// BuzzAdFeedTheme 설정을 통해 색상 등 UI 구성 요소를 변경할 수 있습니다.
final BuzzAdFeedTheme buzzAdFeedTheme = 
      BuzzAdFeedTheme.getDefault()
          ...생략...
          .tabTextColorSelector(R.color.YOUR_TEXT_COLOR) // 탭의 텍스트 색상(state_selected 필수 적용)
          .tabBackgroundColor(R.color.YOUR_TAB_BACKGROUND_COLOR) // 탭의 배경 색상
          .tabIndicatorSelector(R.drawable.YOUR_TAB_INDICATOR_SELECTOR); // 탭의 인디케이터에 대한 Selector
BuzzAdFeed.setDefaultTheme(buzzAdFeedTheme);

✅  중요
tabIndicatorSelector 기능은 BuzzAd Android용 SDK v3.17.x부터 사용할 수 있습니다.

// tab indicator selector example
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <layer-list>
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="YOUR_SELECTED_COLOR" android:width="2dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item android:state_selected="false">
        <layer-list>
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="YOUR_UNSELECTED_COLOR" android:width="1dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

필터 디자인 변경하기

피드 필터가 활성화되어 있는 경우, 필터의 UI 디자인을 변경할 수 있습니다.
이때 filterTextColorSelector, filterBackgroundColorSelector처럼 이름에 selector가 포함된 옵션은 Android 개발 정책에 따라 설정하는 리소스에 지정한 <selector>가 포함되어야 합니다. Android 개발 정책에 대한 자세한 내용은 Android 공식 문서를 참고하세요.

필터 UI 디자인을 변경하려면 다음의 예시를 참고하세요.

final BuzzAdFeedTheme buzzAdFeedTheme = 
      BuzzAdFeedTheme.getDefault()
          ...생략...
          .filterTextColorSelector(R.color.YOUR_TEXT_COLOR) // 필터의 텍스트 색상(state_selected 필수 적용)
          .filterBackgroundColorSelector(R.color.YOUR_BACKGROUND_COLOR); // 필터의 배경 색상
BuzzAdFeed.setDefaultTheme(buzzAdFeedTheme);

CTA 버튼 디자인 변경하기

CTA 버튼의 디자인을 변경하려면 CTA 버튼 커스터마이징하기 토픽을 참고하세요.

개인정보 처리방침 UI 자체구현하기

개인정보 처리방침 UI를 자체 구현하는 경우, SDK에 동의 여부를 전달해야 합니다. 아래 표를 참고하여 적절한 함수를 호출 해 주세요.

Class	API	설명
BuzzAdBenefit	getPrivacyPolicyManager() (정적 메소드)	PrivacyPolicyManager 인스턴스를 반환합니다.
PrivacyPolicyManager	grantConsent()	개인 정보 수집에 동의합니다. 사용자가 처음 피드 지면에 진입하기 전에 호출하면 사용자에게 개인정보 제3자 제공 동의 UI가 보이지 않습니다.
	revokeConsent()	개인 정보 수집 동의를 철회합니다. 사용자가 동의를 철회하고 피드 지면에 진입하는 경우, 개인정보 제3자 제공 동의 UI가 다시 표시됩니다.
	isConsentGranted()	개인 정보 수집 동의 여부를 확인합니다.

사용 예시

PrivacyPolicyManager privacyPolicyManager = BuzzAdBenefit.getPrivacyPolicyManager();

// 직접 구현한 개인정보 제3자 제공 동의 UI에서 동의를 받았을 경우 아래 코드를 실행하면, 피드 화면에서 개인정보 제3자 제공 동의 UI가 노출되지 않으면서 광고 할당이 정상적으로 진행 됩니다.
// 아래의 코드를 실행하지 않을 경우 피드 진입 시 개인정보 제3자 제공 동의 UI가 노출되기 때문에 필수적으로 실행이 필요합니다.
privacyPolicyManager.grantConsent();

// 아래 코드를 통해서 수집 동의를 철회할 수 있습니다. 이 코드가 실행되면 피드에서 광고 할당이 이루어지지 않습니다.
privacyPolicyManager.revokeConsent();