목차

개요

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

Pop 디자인 가이드 문서

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

Pop 배경색 변경

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

Pop 아이콘 변경

Application.onCreate에서 BuzzAdPopTheme 을 지정해 줍니다. 이때 BuzzAdPopTheme의 iconResId 와 rewardReadyIconResId, popFeedCloseIconResId 를 설정하여 Pop 아이콘 이미지를 변경할 수 있습니다.

BuzzAdPopTheme buzzAdPopTheme = BuzzAdPopTheme.getDefault()
    ...생략...
    .iconResId(R.drawable.your_pop_icon)
    .rewardReadyIconResId(R.drawable.your_pop_icon_reward_ready)
    .popFeedCloseIconResId(R.drawable.your_pop_icon_feed_close);
BuzzAdPop.getInstance().setTheme(buzzAdPopTheme);

iconResId: Pop의 평상시 아이콘 입니다.

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

popFeedCloseIconResId: 팝을 통해 피드를 열고난 후, 피드를 닫기 위한 아이콘 입니다.

각 icon의 resource는 다음과 같이 구성할 수 있습니다.

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>

Pop 활성화 버튼

Pop 활성화 버튼의 디자인은 아래 가이드에 따라 수정할 수 있습니다.

• 활성화 버튼의 색상과 아이콘은 테마 적용을 통해 변경할 수 있습니다.

• 활성화 버튼의 문구는 DefaultOptInAndShowPopButtonHandler의 상속 클래스에서 설정합니다. 상속 클래스를 작성하고 FeedConfig에 설정합니다.

  public class CustomOptInAndShowPopButtonHandler extends DefaultOptInAndShowPopButtonHandler {
      // 활성화 버튼에 보여지는 문구입니다.
      @Override
      public String getOptInAndShowPopButtonText(Context context) {
          return "YOUR_BUTTON_TEXT";
      }
  }

  final FeedConfig feedConfig = new FeedConfig.Builder("YOUR_FEED_UNIT_ID")
          .optInAndShowPopButtonHandlerClass(CustomOptInAndShowPopButtonHandler.class)
          .build();

Notification UI 수정

Pop이 활성화되어 있는 동안에 Service Notification이 보입니다.

다음은 PopNotificationConfig를 설정하여 BuzzAd Android SDK에서 제공하는 Notification 의 UI를 변경하는 방법입니다.

final PopNotificationConfig popNotificationConfig = new PopNotificationConfig.Builder(getApplicationContext())
      .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();

final FeedConfig popFeedConfig = new FeedConfig.Builder("YOUR_POP_UNIT_ID").build();

PopConfig popConfig = new PopConfig.Builder(context, popFeedConfig)
    ...생략...
    .popNotificationConfig(popNotificationConfig)
    .build();

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

툴바 영역 커스터마이징

BuzzAd Android SDK에서 제공하는 Pop 툴바 영역의 좌측 아이콘 색상은 테마 적용에 따라 변경할 수 있습니다.