목차

개요

본 가이드에서는 여기에서는 BuzzAd Android Android용 SDK에서 제공하는 Pop 버튼과 Pop Feed 지면의 UI의 구성을 지키며 디자인을 변경하기 위한 방법을 안내합니다. 추가적인 디자인 변경을 원하시는 경우에는 고급 설정에서 UI를 자체 구현하는 방법으로 진행할 수 있습니다.Pop 버튼과 Pop Feed 지면 디자인 규격에 대한 자세한 지침은 Pop 디자인 가이드 문서

...

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

Pop 배경색 변경

...

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

Pop 아이콘 변경

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

...

를 확인하세요.

Pop 버튼 색상

주요 UI의 색상(Primary color)을 변경할 수 있는 GlobalTheme을 사용해 Pop 버튼의 색상을 변경할 수 있습니다. 자세한 내용은 전체 테마 변경하기 토픽을 참고하세요.

...

Pop 버튼 아이콘

Application.onCreate에서 BuzzAdPopTheme을 설정하여 Pop 버튼의 평상시 아이콘, 리워드 아이콘, 종료 아이콘을 변경할 수 있습니다.

...

다음의 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: 팝을 통해 피드를 열고난 후, 피드를 닫기 위한 아이콘 입니다.

...

Pop 버튼 아이콘 리소스 구성하기

Pop 버튼 아이콘의 리소스는 각각 다음과 같이 구성할 수 있습니다.

• 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>

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

Pop 활성화 버튼

...

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

...

Pop 활성화 버튼은 버튼 색상 및 아이콘, 그리고 텍스트로 구성됩니다.

...

버튼의 색상과 아이콘의 디자인은 전체 테마 변경하기 토픽을 참고해 변경할 수 있습니다.

...

버튼의

...

텍스트를 변경하려면 DefaultOptInAndShowPopButtonHandler를 상속받는 클래스를 구현하고 FeedConfig에서 설정하세요.

다음은 Pop 활성화 버튼의 텍스트를 변경하는 예시입니다.

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이 보입니다.

...

Pop 포그라운드 서비스 알림

Pop이 활성화되면 Pop의 포그라운드 서비스 알림이 사용자 모바일 기기 상단의 알림 창에 표시됩니다. BuzzAd Android용 SDK에서 기본으로 제공하는 UI를 설정해 Pop 포그라운드 서비스 알림 디자인을 변경할 수 있습니다.

SDK 기본 UI로 변경할 수 있는 서비스 알림 디자인 요소는 아래 그림과 표를 참고하세요.

...

Pop 포그라운드 서비스 알림의 디자인을 변경하려면 PopNotificationConfig에서 구성 요소 값을 설정한 다음 popFeedConfig에 popNotificationConfig를 설정하세요.

다음은 Pop 포그라운드 서비스 알림의 디자인을 변경하는 예시입니다.

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 Feed 지면 내 툴바 영역의 왼쪽 아이콘 색상을 변경할 수 있습니다. 자세한 내용은 전체 테마 변경하기 토픽을 참고하세요.

...