Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Current »

개요

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

Pop 배경 색상 변경

팝 아이콘의 배경 색상을 테마변경 가이드에 따라 변경할 수 있습니다.

Pop 아이콘 변경

PopConfig의 iconResId 와 rewardReadyIconResId 를 설정하여 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)

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 커스터마이징

PopNotificationConfig 설정

팝을 실행하고 있는 동안에 Service Notification이 보여집니다. Service Notification을 클릭하면 Pop Feed 지면을 보여줍니다.
PopNotificationConfig 을 설정하여 Notification에 표시될 내용을 변경할 수 있습니다.

  1. smallIconResId Small icon을 설정합니다. 흰색 아이콘을 사용하며 Adaptive Icon 이 설정하지 않도록 주의해야합니다.

  2. colorResId(@ColorRes int colorResId) Notification 의 아이콘, 앱 이름 에 적용되는 색상을 설정합니다.

  3. titleResId(@StringRes int titleResId) 타이틀 문구를 설정합니다.

  4. textResId(@StringRes int textResId) Notification의 내용을 설정합니다.

  5. notificationId(int notificationId) Android Notification Id를 설정합니다. Default 값은 5000 입니다.

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

Custom Pop Service Notification

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

Step 1. CustomControlService 구현

  1. getPopPendingIntent 를 통해 click 시 Pop Icon 을 띄우는 기능을 하는 PendingIntent 를 만들 수 있습니다. 필요에 따라 사용할 수 있습니다.

  2. 필요에 따라 notificationChannel 을 생성해 등록합니다.

  3. (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에 CustomControlService를 등록하여 사용할 수 있습니다.
이 경우, 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 커스터마이징

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

PopFeed 하단의 Utility영역을 커스텀할 때 PopUtilityLayoutHandler 클래스를 상속받아 사용합니다. 기본으로는 카메라, 사진첩, 브라우저로 이동하는 기능이 제공됩니다.

Utility에 넣고 싶은 View를 작성하여 parent ViewGroup에 추가합니다.

public final 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.layout.my_pop_utility_view,
                parent,
                false
        );
        parent.addView(layout);
    }
}

PopConfig에 CustomPopUtilityLayoutHandler를 설정합니다.

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) 커스터마이징

PopFeed 상단의 Toolbar영역은 DefaultPopToolbarHolder 클래스를 상속한 클래스를 구현하여 변경할 수 있습니다.
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 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.

// 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 버튼 추가
        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);
    }
}

Option2. Toolbar 레이아웃 변경

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

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

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

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

Snackbar 및 Toast 내용 커스터마이징

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

  1. DefaultPopFeedbackHandler를 상속 받는 클래스를 생성합니다.

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

  2. PopConfig에이전 스텝에서 생성한 Custom PopFeedbackHandler 클래스를 넘겨줍니다.

    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를 사용해서 유저에게 좀 더 구체적인 피드백을 제공할 수 있습니다.

 

  • No labels