개요

본 가이드에서는 BuzzAd Android SDK에서 제공하는 UI의 구성을 지키며 디자인을 변경하기 위한 방법을 안내합니다. 추가적인 디자인 변경을 원하시는 경우에는 고급 설정에서 UI를 자체 구현하는 방법으로 진행할 수 있습니다.

Pop 디자인 가이드 문서

Pop 디자인 규격은 Pop 디자인 가이드 문서에서 확인 가능합니다. Pop의 디자인을 변경하기 위해서는 PopConfig를 설정해야 합니다.

Pop 배경색 변경

Pop의 배경색은 테마 적용에 따라 변경할 수 있습니다.

Pop 아이콘 변경

PopConfig를 설정하여 Pop 아이콘 이미지를 변경할 수 있습니다.

PopConfig popConfig = new PopConfig.Builder(context, "YOUR_POP_UNIT_ID")
      .iconResId(R.drawable.your_pop_icon)
      .rewardReadyIconResId(R.drawable.you_pop_icon_reward_ready)
      .build();

iconResId: 상태에 따라 평상시 아이콘과 팝 닫기 아이콘을 지정해 주어야 합니다.

<!-- your_pop_icon.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 닫기 아이콘 -->
    <item android:drawable="@drawable/icon_pop_selected" android:state_selected="true" />
    <!-- 평상시 팝 아이콘 -->
    <item android:drawable="@drawable/icon_pop"/>
</selector>

rewardReadyIconResId: 적립 가능한 포인트가 있을 때 기본 아이콘이 아닌 다른 아이콘을 (예: 동전 아이콘) 유저에게 보여줄 수 있습니다.

<!-- you_pop_icon_reward_ready.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 닫기 아이콘 -->
    <item android:drawable="@drawable/icon_pop_selected" android:state_selected="true" />
    <!-- 적립 가능 포인트가 있을 때 팝 아이콘 -->
    <item android:drawable="@drawable/icon_pop_reward_ready"/>
</selector>

팝 아이콘 권장 사이즈

56x56 dp (mdpi 기준)
224x224 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)

Notification UI 수정

Pop이 활성화되어 있는 동안에 Service Notification이 보입니다. 다음은 PopNotificationConfig를 설정하여 BuzzAd Android SDK에서 제공하는 Notification 의 UI를 변경하는 방법입니다.

final PopNotificationConfig popNotificationConfig = new PopNotificationConfig.Builder(context)
      .smallIconResId(R.drawable.your_small_icon) // 흰색 아이콘, Adaptive Icon 이 설정하지 않도록 주의 요망
      .titleResId(R.string.your_pop_notification_title)
      .textResId(R.string.your_pop_notification_text)
      .colorResId(R.color.your_pop_notification_color)
      .notificationId(5000) // 기본값
      .build();
      
PopConfig popConfig = new PopConfig.Builder(context, "YOUR_POP_UNIT_ID")
      .popNotificationConfig(popNotificationConfig)
      .build();

UI 레이아웃 혹은 Notification 전체를 수정하기 위해서는 Pop Service Notification 자체 구현을 참고하시기 바랍니다.

툴바 영역 커스터마이징

다음은 툴바 영역의 아이콘 색상을 변경하는 방법을 안내합니다.

좌측 아이콘 색상은 테마 적용에 따라 변경할 수 있습니다.

스낵바 및 토스트 메시지 커스터마이징

Pop 지면에서 사용자에게 리워드가 부여되었을 때 스낵바 혹은 토스트가 표시됩니다. DefaultPopFeedbackHandler의 상속 클래스를 구현하여 스낵바 혹은 토스트에 표시되는 메시지를 변경할 수 있습니다. 상속 클래스는 PopConfig의 popFeedbackHandlerClass로 설정합니다.

public class CustomPopFeedback extends DefaultPopFeedbackHandler {
    @Override
    public void notifyNativeAdReward(
            @NotNull Context context,
            @NotNull View view,
            boolean canUseSnackbar,
            int reward
    ) {
        String message = "Customized feed launch reward message";

        if (canUseSnackbar) {
            showSnackbar(message, view);
        } else {
            showToast(message);
        }
    }
}

PopConfig popConfig = new PopConfig.Builder(this, "YOUR_FEED_UNIT_ID")
      .popFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)
      .build();

methods	Description
`notifyNativeAdReward`	광고 적립에 성공 시, 호출됩니다. 디폴트 메세지: `광고 적립 포인트 n포인트 적립되었습니다.`

Parameters	Description
`context`	snackbar나 toast를 사용할 때 인자로 넘겨주는 context입니다.
`view`	snackbar를 사용할 때 인자로 넘겨주는 view입니다.
`canUseSnackbar`	snackbar를 사용할 수 있는 상태인지를 알려주는 flag입니다.
`reward`	적립된 리워드 양을 나타냅니다. `reward`를 사용해서 유저에게 좀 더 구체적인 피드백을 제공할 수 있습니다.

(ver 2.25.x) 6.2.3. 커스터마이징

목차

개요