개요

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

Pop 아이콘 변경

iconResourceId 팝 아이콘 drawable을 만들어 아이콘을 변경할 수 있습니다. 이때 상태에 따라 평상시 아이콘과 팝 닫기 아이콘을 지정해 주어야 합니다.

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

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

<!-- 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를 빌드할 때 다음과 같이 아이콘의 리소스 아이디를 지정해줍니다.

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

Notification 커스터마이징

PopNotificationConfig 설정

팝을 실행하고 있는 동안에 Service Notification을 보여집니다.
PopNotificationConfig 을 설정하여 Notification에 표시될 내용을 결정합니다. 앱의 브랜딩을 반영할 수 있습니다.

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)
    .build();
    
PopConfig popConfig = new PopConfig.Builder(context, YOUR_POP_UNIT_ID)
    ...(생략)...
    .popNotificationConfig(popNotificationConfig)
    .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

Pop 에서 기본 제공하는 Service Notification 은 클릭 했을 때 Pop 을 다시 보이는 기능을 제공합니다. 하지만 개발 요구사항에 따라 Service Notification 을 다른 형식으로 사용해야 할 경우가 있는데, 예를 들어 Pop service notification의 layout을 변경하고 싶거나, 채널 아이디를 변경하고 싶을때 입니다. 그런 경우 Custom Service Notification 을 등록하는 방법을 사용할 수 있습니다.

Step 1. CustomControlService class

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

// 1. PopControlService 를 상속받아 class 를 만듭니다.
public class CustomControlService extends PopControlService {

    // 2. buildForegroundNotification 함수를 오버라이드 합니다.
    @Override
    protected Notification buildForegroundNotification(@NonNull String unitId, @NonNull PopNotificationConfig popNotificationConfig) {
        // 3. getPopPendingIntent 를 통해 click 시 Pop Icon 을 띄우는 기능을 하는 PendingIntent 를 만들 수 있습니다.
        PendingIntent popPendingIntent = getPopPendingIntent(unitId, this);

        NotificationCompat.Builder builder;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            // 4. 필요에 따라 notificationChannel 을 생성해 등록합니다.
            createNotificationChannelIfNeeded();
            builder = new NotificationCompat.Builder(this, NOTIFICATION_CHANNEL_ID);
        } else {
            builder = new NotificationCompat.Builder(this);
        }

        // 5. CustomContolService 에서 사용할 View 를 등록합니다.
        RemoteViews remoteView = new RemoteViews(getPackageName(), R.layout.view_custom_notification);
        builder.setSmallIcon(popNotificationConfig.getSmallIconResId())
                .setContent(remoteView)
                .setContentIntent(popPendingIntent)
                .setPriority(PRIORITY_LOW)
                .setShowWhen(false);
        if (popNotificationConfig.getColor() == null) {
            builder.setColor(popNotificationConfig.getColor());
        }
        return builder.build();
    }

    @TargetApi(Build.VERSION_CODES.O)
    private void createNotificationChannelIfNeeded() {
        final NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
        if (notificationManager.getNotificationChannel(NOTIFICATION_CHANNEL_ID) == null) {
            final NotificationChannel channel = new NotificationChannel(NOTIFICATION_CHANNEL_ID, NOTIFICATION_CHANNEL_NAME, NotificationManager.IMPORTANCE_LOW);
            channel.setShowBadge(false);
            notificationManager.createNotificationChannel(channel);
        }
    }
}

Step 2. Custom Service Class 등록

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

이 경우, PopNotificationConfig 는 SmallIconRes 와 NotificationId 두 가지만 설정하면 됩니다.

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();

Step 3. Manifest 에 CustomControlService 를 등록

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

Pop Feed 커스터마이징

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

Feed 하단의 Utility영역을 커스텀할 때 PopUtilityLayoutHandler 클래스를 상속받아 사용합니다.

기본 클래스에서는 카메라, 사진첩, 브라우저로 이동하는 기능이 제공됩니다. 오버라이드 해야 하는 함수는 다음과 같습니다.

onLayoutCreated(ViewGroup parent): Utility에 넣고 싶은 View를 작성한 후에 인자로 넘어온 Parent 뷰그룹에 붙여줍니다.

public final class CustomPopUtilityLayoutHandler extends PopUtilityLayoutHandler {
    public void onLayoutCreated(@NotNull ViewGroup parent) {
        final LinearLayout layout = (LinearLayout) inflater.inflate(
            R.layout.my_view_utility_layout, 
            parent, 
            false
        );
        parent.addView(layout);
    }
}

커스텀 클래스를 PopConfig에 설정해줍니다.

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

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

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

Pop Toolbar (AppBar) 커스터마이징

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

final PopConfig popConfig = new PopConfig.Builder(this, YOUR_POP_UNIT_ID)
      ... 생략
      .feedToolbarHolderClass(DefaultPopToolbarHolder.class) 
      .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 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.

// 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 를 구성하는 예제입니다.

// 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);

        View buttonInquiry = root.findViewById(R.id.buttonInquiry);
        buttonInquiry.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 문의하기 페이지 열기
                showInquiry(activity, unitId);
            }
        });
        return root;
    }
}

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="@color/bzv_white_100">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingLeft="16dp">

        <ImageView
            android:id="@+id/imageIcon"
            android:layout_width="154dp"
            android:layout_height="24dp"
            android:src="@drawable/bz_img_buzzvil_logo" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/buttonInquiry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="16dp"
            android:src="@drawable/bzv_ic_circle_question"
            android:tint="@color/bzv_gray_light" />

    </LinearLayout>
</LinearLayout>

Snackbar및 Toast 내용 커스터마이징

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

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

class CustomPopFeedbackHandler 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(context, view, message);
        } else {
            showToast(context, message);
        }
    }
}

PopConfig popConfig = new PopConfig.Builder(this, YOUR_POP_UNIT_ID)
      ...(생략)...
      .popFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)
      .build();

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

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

6.2.3. 커스터마이징

개요