"

개요

Pop 디자인 커스터마이징시 고려해야 할 사항은 Pop 디자인 가이드 문서에서 확인 가능합니다. PopConfig 설정을 해야 아래의 사항들을 적용할 수 있습니다.

Pop 아이콘 변경

iconResourceId 팝 아이콘 drawable을 만들어 아이콘을 PopConfig의 iconResId 와 rewardReadyIconResId 를 설정하여 Pop 아이콘 이미지를 변경할 수 있습니다. 이때 상태에 따라 평상시 아이콘과 팝 종료 아이콘을 지정해 주어야 합니다.

Code Block

language	xml

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

팝 아이콘 권장 사이즈

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

...

java

PopConfig popConfig = new PopConfig.Builder(context, "YOUR_FEED_UNIT_ID")
    ...생략...
    .iconResId(R.drawable.your_pop_icon)
    .rewardReadyIconResId(R.drawable.you_pop_icon_reward_ready)

...

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

Code Block

language	xml

<!-- 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: 적립 가능한 포인트가 있을 때 기본 아이콘이 아닌 다른 아이콘을 (예: 동전 아이콘) 유저에게 보여줄 수 있습니다. iconResourceId와 마찬가지로 selector를 이용하여 작성합니다.

...

Code Block

language	xml

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

Application 클래스에서 popConfig를 빌드할 때 다음과 같이 아이콘의 리소스 아이디를 지정해줍니다.

Code Block
PopConfig popConfig = new PopConfig.Builder(context, YOUR_POP_UNIT_ID) ... .iconResId(R.drawable.your_pop_icon) .rewardReadyIconResId(R.drawable.you_pop_icon_reward_ready)

...

Info

팝 아이콘 권장 사이즈

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

Notification 커스터마이징

PopNotificationConfig 설정

팝을 실행하고 있는 동안에 Service Notification을 Notification이 보여집니다.
Service Notification을 클릭하면 Pop Feed 지면을 보여줍니다.
PopNotificationConfig 을 설정하여 Notification에 표시될 내용을 결정합니다. 앱의 톤 & 매너를 반영하여 변경합니다.

...

language	java

...

변경할 수 있습니다.

...

smallIconResId Small icon을 설정합니다. 흰색 아이콘을 사용하며 Adaptive Icon 이 설정하지 않도록 주의해야합니다.
colorResId(@ColorRes int colorResId) Notification 의 아이콘, 앱 이름 에 적용되는 색상을 설정합니다.
titleResId(@StringRes int titleResId) 타이틀 문구를 설정합니다.
textResId(@StringRes int textResId) Notification의 내용을 설정합니다.
notificationId(int notificationId) Android Notification Id를 설정합니다. Default 값은 5000 입니다.

Code Block

language	java

final PopNotificationConfig popNotificationConfig = new PopNotificationConfig.Builder(context)
    .smallIconResId(R.drawable.your_small_icon)
    .titleResId(R.string.your_pop_notification_title)
   
    .textResId(R.string.your_pop_notification_text)
 
      .colorResId(R.color.your_pop_notification_color)
    .notificationId(1000)
    .notificationIdbuild(1000);
    
PopConfig popConfig = new PopConfig.build();

smallIconResId Small icon을 설정합니다. 흰색 아이콘을 사용하며 Adaptive Icon 이 설정하지 않도록 주의해야합니다.
colorResId(@ColorRes int colorResId) Notification 의 아이콘, 앱 이름 에 적용되는 색상을 설정합니다.
titleResId(@StringRes int titleResId) 타이틀 문구를 설정합니다.
textResId(@StringRes int textResId) Notification의 내용을 설정합니다.
notificationId(int notificationId) Android Notification Id를 설정합니다. Default 값은 5000

Custom Pop Service Notification

...

Builder(context, "YOUR_FEED_UNIT_ID")
    ...생략...
    .popNotificationConfig(popNotificationConfig)
    .build();

Custom Pop Service Notification

Service Notification 에서 커스텀 뷰를 사용하거나 클릭시 동작을 변경하기 위해서는 CustomControlService 를 구현해야합니다. 예를 들어, Pop service notification의 layout을 변경하고 싶거나, 채널 아이디를 변경하고 싶을때 입니다. 그런 경우 Custom Service Notification 을 등록하는 방법을 사용할 수 있습니다.변경하는 경우에 해당합니다.

...

Step 1. CustomControlService class

...

PopControlService 를 상속받아 class 를 만듭니다.

...

buildForegroundNotification 함수를 오버라이드 합니다.

구현

getPopPendingIntent 를 통해 click 시 Pop Icon 을 띄우는 기능을 하는 PendingIntent 를 만들 수 있습니다. 요구사항에 따라 이 기능 대신 필요한 기능을 PendingIndent로 사용하면 됩니다필요에 따라 사용할 수 있습니다.
필요에 따라 notificationChannel 을 생성해 등록합니다.
(Optional)RemoteViews, setContent 를 사용해 CustomContolService 에서 사용할 View 를 등록합니다.

...

Step 2. Custom Service Class 등록

PopConfig.controlService(@NonNull Class<? extends PopControlService> popControlServiceClass) 를 사용해 Custom Service Notification 을 등록할 수 있습니다.

이 PopConfig에 CustomControlService를 등록하여 사용할 수 있습니다.
이 경우, PopNotificationConfig 는 SmallIconRes 와 NotificationId 두 가지만 설정하면 됩니다.

Code Block

language	java

final PopNotificationConfig popNotificationConfig = new PopNotificationConfig.Builder()
                .smallIconResId(R.drawable.ic_notification_pop_gift)
                .notificationId(NOTIFICATION_ID)
                .build();
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...(생략)...
        .popNotificationConfig(popNotificationConfig)
        .controlService(CustomControlService.class)
        .build();

final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context)
        ...(생략)...
        .setPopConfig(popConfig)
        .build();

...

Code Block

language	xml

<application
    ...(생략)...
    <service android:name=".java.CustomControlService" />
</application>

Pop Feed 커스터마이징

유틸리티 영역 커스터마이징

피드 PopFeed 하단의 Utility영역을 커스텀할 때 PopUtilityLayoutHandler 클래스를 상속받아 사용합니다. 기본 클래스에서는 기본으로는 카메라, 사진첩, 브라우저로 이동하는 기능이 제공됩니다. 오버라이드 해야 하는 함수는 다음과 같습니다.

...

Utility에 넣고 싶은 View를

...

작성하여 parent ViewGroup에 추가합니다.

Code Block

language	java

public final LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.my_view_utility_layout, parent, false);
parent.addView(layout);

팝피드 하단아이콘 참고사항
- 이미지 사이즈
  - 24*24 dp (mdpi 기준)
  - 96*96 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)
- 아이콘은 png 와 벡터이미지가 모두 가능합니다.
- 컬러 아이콘 사용 가능

사용법

Code Block

language	java

new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
    .popUtilityLayoutHandlerClass(MyPopUtilityLayoutHandler.class)

Pop Toolbar (AppBar) 커스터마이징

PopConfig 를 사용하여 Toolbar 영역을 커스터마이징 할 수 있습니다. PopConfig 에 PopConfig.feedToolbarHolderClass 를 설정하는데 여기에 DefaultPopToolbarHolder 를 상속받은 class 를 사용해서 Pop Toolbar 커스터마이징 가능합니다.

Code Block

language	java

final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop)
      ...(생략)... class CustomPopUtilityLayoutHandler extends PopUtilityLayoutHandler {

    private Context context;

    public CustomPopUtilityLayoutHandler(Context context) {
        super(context);
        this.context = context;
    }

    @Override
    public void onLayoutCreated(ViewGroup parent) {
        LayoutInflater inflater = LayoutInflater.from(context);
        final FrameLayout layout = (FrameLayout) inflater.inflate(
                R.feedToolbarHolderClass(DefaultPopToolbarHolder.class)layout.my_pop_utility_view,
          .build();

feedToolbarHolderClass를 따로 설정하지 않는다면 DefaultPopToolbarHolder 를 사용하게 됩니다.

...

Option1. Toolbar 제목 및 아이콘 변경

DefaultPopToolbarHolder 를 상속받는 클래스를 만들어 사용합니다. 그리고 기본 제공하는 PopToolbar 를 사용하여 미리 구성되어있는 PopToolbarTemplate 을 수정하여 customize 가능합니다. Toolbar 내의 왼쪽 아이콘, 제목, 배경 색상 등을 변경할 수 있고 Toolbar 우측에 클릭 가능한 이미지 버튼을 추가할 수 있습니다.

...

Toolbar icon 변경: toolbar.setIconResource
Toolbar title 변경: toolbar.setTitle
Toolbar background color 변경: toolbar.setBackgroundColor
Toolbar 우측 문의하기 버튼 추가: addInquiryMenuItemView
Toolbar 우측 custom 버튼 추가: toolbar.buildPopMenuItemView 를 통해 PopMenuImageView 를 생성하고 생성된 View 를 toolbar.addRightMenuButton 를 통해 toolbar에 추가합니다. (우측 버튼은 add 된 순서대로 좌측부터 우측으로 배열됩니다.)
- showInquiry 함수: 문의하기 페이지를 엽니다. 문의하기 버튼 icon 을 customize 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.

Code Block

// DefaultPopToolbarHolder 상속
public class TemplatePopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity, @NonNull final String unitId) {
        toolbar = new PopToolbar(activity); // PopToolbar 에서 제공하는 기본 Template 사용
        toolbar.setTitle("TemplatePopToolbarHolder");
        toolbar.setIconResource(R.mipmap.ic_launcher);
        toolbar.setBackgroundColor(Color.LTGRAY);

        addInquiryMenuItemView(activity, unitId); // 문의하기 버튼은 이 함수를 통해 간단하게 추가 가능합니다.
        addRightMenuItemView1(activity, unitId); // custom 버튼 추가 
        addRightMenuItemView2(activity);
        return toolbar;
    }

    // custom 버튼 추가는 toolbar.buildPopMenuItemView 를 사용하여 View 를 생성하고
    // toolbar.addRightMenuButton 를 사용하여 toolbar 에 추가합니다.
    private void addRightMenuItemView1(@NonNull final Activity activity, @NonNull final String unitId) {
        PopMenuImageView menuItemView = toolbar.buildPopMenuItemView(activity, R.mipmap.ic_launcher);
        menuItemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showInquiry(activity, unitId));
            }
        });
        toolbar.addRightMenuButton(menuItemView);
    }

    private void addRightMenuItemView2(@NonNull final Activity activity) {
        PopMenuImageView menuItemView = toolbar.buildPopMenuItemView(activity, R.mipmap.ic_launcher);
        menuItemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showPotto(activity);
            }
        });
        toolbar.addRightMenuButton(menuItemView);
    }
}

Option2. Toolbar 레이아웃 변경

DefaultPopToolbarHolder 를 상속받아서 사용합니다. 레이아웃을 직접 구성하여 Toolbar 영역을 전부 커스터마이징 할 수 있습니다.

...

위 그림과 같은 toolbar를 만들기 위해 커스텀 class 를 구성하는 예제입니다.

Code Block

language	java

// DefaultPopToolbarHolder 상속
public class CustomPopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity, @NonNull final String unitId) {
        // 직접 구성한 layout 을 사용합니다
        ViewGroup root =  (ViewGroup) activity.getLayoutInflater().inflate(R.layout.view_pop_custom_toolbar, null);

      parent,
                false
        );
        parent.addView(layout);
    }
}

PopConfig에 CustomPopUtilityLayoutHandler를 설정합니다.

Code Block

language	java

new PopConfig.Builder(getApplicationContext(), "YOUR_FEED_UNIT_ID")
    ...생략...
    .popUtilityLayoutHandlerClass(CustomPopUtilityLayoutHandler.class)
    .build();

Info

팝피드 유틸리티 영역 아이콘 참고사항

추천 이미지 사이즈
- 24*24 dp (mdpi 기준)
- 96*96 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)
아이콘은 png 와 벡터이미지가 모두 가능합니다.
컬러 아이콘 사용 가능

Pop Toolbar (AppBar) 커스터마이징

PopFeed 상단의 Toolbar영역은 DefaultPopToolbarHolder 클래스를 상속한 클래스를 구현하여 변경할 수 있습니다.

...

Option1. Toolbar 제목 및 아이콘 변경

SDK에서 제공하는 PopToolbar 를 사용하여 Toolbar 제목 및 아이콘을 변경할 수 있습니다.
Toolbar 우측에 클릭 가능한 버튼도 추가할 수 있습니다.

...

Toolbar icon 변경: toolbar.setIconResource
Toolbar title 변경: toolbar.setTitle
Toolbar background color 변경: toolbar.setBackgroundColor
Toolbar 우측 문의하기 버튼 추가: addInquiryMenuItemView
Toolbar 우측 custom 버튼 추가: toolbar.buildPopMenuItemView 를 통해 PopMenuImageView 를 생성하고 생성된 View 를 toolbar.addRightMenuButton 를 통해 toolbar에 추가합니다. (우측 버튼은 add 된 순서대로 좌측부터 우측으로 배열됩니다.)
- showInquiry 함수: 문의하기 페이지를 엽니다. 문의하기 버튼 icon 을 customize 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.

Code Block

language	java

// DefaultPopToolbarHolder 상속
public class TemplatePopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity, @NonNull final String unitId) {
       View buttonInquirytoolbar = root.findViewById(R.id.buttonInquirynew PopToolbar(activity); // PopToolbar 에서 제공하는 기본 Template 사용
       buttonInquiry.setOnClickListener(new Viewtoolbar.OnClickListenersetTitle("TemplatePopToolbarHolder");
 {       toolbar.setIconResource(R.mipmap.ic_launcher);
     @Override   toolbar.setBackgroundColor(Color.LTGRAY);

        public void onClick(View v) {
      addInquiryMenuItemView(activity, unitId); // 문의하기 버튼은 이 함수를 통해 간단하게 추가 가능합니다.
        addRightMenuItemView1(activity, unitId); // 문의하기custom 페이지버튼 열기추가
        return toolbar;
      showInquiry(activity, unitId);}

    // custom 버튼      }
    추가는 toolbar.buildPopMenuItemView 를 사용하여 View 를 생성하고
   }); // toolbar.addRightMenuButton 를 사용하여 toolbar 에 추가합니다.
 return root;  private void addRightMenuItemView1(@NonNull }
}

CustomPopToolbarHolder에서 사용하는 layout.view_pop_custom_toolbar은 다음과 같습니다.

Code Block

language	xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"final Activity activity, @NonNull final String unitId) {
       android:layout_height="match_parent"
    android:gravity="center_vertical" PopMenuImageView menuItemView = toolbar.buildPopMenuItemView(activity, R.mipmap.ic_launcher);
    android:orientation="horizontal"     android:background="@color/bzv_white_100">
menuItemView.setOnClickListener(new View.OnClickListener() {
    <LinearLayout         android:layout_width="0dp"@Override
         android:layout_height="wrap_content"   public void onClick(View v) {
 android:layout_weight="1"         android:gravity="center_vertical"      showInquiry(activity, unitId);
 android:orientation="horizontal"         android:paddingLeft="16dp">  }
       <ImageView });
        toolbar.addRightMenuButton(menuItemView);
  android:id="@+id/imageIcon"         }
}

Option2. Toolbar 레이아웃 변경

SDK에서 제공하는 기본 UI (PopToolbar)를 사용하지 않고 직접 구성한 레이아웃을 사용하여 Toolbar 영역을 전체를 커스터마이징 할 수 있습니다.

...

툴바 영역 전체를 커스터마이징하는 예제입니다.

Code Block

language	java

public class CustomPopToolbarHolder extends DefaultPopToolbarHolder {
   android:layout_width="154dp"
 @Override
    public View getView(Activity activity, @NonNull final  android:layout_height="24dp"
   String unitId) {
        android:src="@drawable/bz_img_buzzvil_logo" /> 직접 구성한    </LinearLayout>
layout 을 사용합니다
    <LinearLayout    ViewGroup root =   android:layout_width="wrap_content"(ViewGroup) activity.getLayoutInflater().inflate(R.layout.your_pop_custom_toolbar_layout, null);

       android:layout_height="wrap_content"
    View buttonInquiry = root.findViewById(R.id.yourInquiryButton);
    android:gravity="center_vertical">    buttonInquiry.setOnClickListener(new View.OnClickListener() {
   <ImageView         @Override
   android:id="@+id/buttonInquiry"         public void onClick(View  android:layout_width="wrap_content"
 v) {
          android:layout_height="wrap_content"      // 문의하기 페이지 열기
    android:layout_gravity="center_vertical"            showInquiry(activity,  android:layout_marginRight="16dp"unitId);
             android:src="@drawable/bzv_ic_circle_question"}
        });
    android:tint="@color/bzv_gray_light" />    return root;
  </LinearLayout>
</LinearLayout>

...

}
}

Snackbar 및 Toast 내용 커스터마이징

...

팝 지면에서 보여주는 다양한 피드백(snackbar, toast)를 커스터마이징 할 수 있습니다. 어떤 경우가 있는지는 아래 표에서 확인할 수 있습니다.

다음의 적용이 필요합니다PopFeed 지면에서 유저가 리워드를 획득을 했을때 스낵바 혹은 Toast 가 표시됩니다.
스낵바 혹은 Toast에 표시되는 메세지를 커스터마이징할 수 있습니다.

...

language	kotlin

...

DefaultPopFeedbackHandler를 상속 받는 클래스를 생성합니다.
PopConfig를 초기화할 때에, 이전 스텝에서 생성한 Custom PopFeedbackHandler 클래스를 넘겨줍니다.

...

title	예시 코드

Code Block
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에이전 스텝에서 생성한 Custom PopFeedbackHandler 클래스를 넘겨줍니다.
Code Block
language java
PopConfig popConfig = new PopConfig.Builder(this, "YOUR_

...

FEED_UNIT_ID") ...

...

생략

...

... .

...

popFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)
      .build();

Snackbar/Toast가 보여지는 경우

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

Parameters	Description
`context: Context`	snackbar나 toast를 사용할 때 인자로 넘겨주는 context입니다.
`view: View`	snackbar를 사용할 때 인자로 넘겨주는 view입니다.
`canUseSnackbar: Boolean`	snackbar를 사용할 수 있는 상태인지를 알려주는 flag입니다.
`reward: Int`	적립된 리워드 포인트 양을 나타내는 인자입니다. 해당 인수를 사용해서 커스텀 메시지를 formatting 하면 나타냅니다. `reward`를 사용해서 유저에게 좀 더 구체적인 피드백을 제공할 수 있습니다.

...

Versions Compared

Old Version 15

New Version Current

Key

개요

Pop 아이콘 변경

Notification 커스터마이징

PopNotificationConfig 설정

Custom Pop Service Notification

Custom Pop Service Notification

Pop Feed 커스터마이징

유틸리티 영역 커스터마이징

Pop Toolbar (AppBar) 커스터마이징

Option1. Toolbar 제목 및 아이콘 변경

Option2. Toolbar 레이아웃 변경

Pop Toolbar (AppBar) 커스터마이징

Snackbar 및 Toast 내용 커스터마이징

Page Comparison

Versions Compared

Old Version 15

New Version Current

Key

개요

Pop 아이콘 변경

Notification 커스터마이징

PopNotificationConfig 설정

Custom Pop Service Notification

Custom Pop Service Notification

Pop Feed 커스터마이징

유틸리티 영역 커스터마이징

Pop Toolbar (AppBar) 커스터마이징

Option1. Toolbar 제목 및 아이콘 변경

Option2. Toolbar 레이아웃 변경

Pop Toolbar (AppBar) 커스터마이징

Snackbar 및 Toast 내용 커스터마이징