Table of Contents |
---|
개요
Pop 디자인 커스터마이징시 고려해야 할 사항은 Pop 디자인 가이드 문서에서 확인 가능합니다. PopConfig 설정을 해야 아래의 사항들을 적용할 수 있습니다.
Pop 아이콘 변경
PopConfig의 iconResId
와 rewardReadyIconResId
를 설정하여 Pop 아이콘 이미지를 변경할 수 있습니다.
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) |
iconResId
: 상태에 따라 평상시 아이콘과 팝 닫기 아이콘을 지정해 주어야 합니다.
Code Block | ||
---|---|---|
| ||
<!-- 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
: 적립 가능한 포인트가 있을 때 기본 아이콘이 아닌 다른 아이콘을 (예: 동전 아이콘) 유저에게 보여줄 수 있습니다.
Code Block | ||
---|---|---|
| ||
<!-- 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> |
Info |
---|
팝 아이콘 권장 사이즈
|
Notification 커스터마이징
PopNotificationConfig 설정
팝을 실행하고 있는 동안에 Service Notification이 보여집니다. Service Notification을 클릭하면 Pop Feed 지면을 보여줍니다.PopNotificationConfig
을 설정하여 Notification에 표시될 내용을 변경할 수 있습니다.
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 | ||
---|---|---|
| ||
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
구현
getPopPendingIntent
를 통해 click 시 Pop Icon 을 띄우는 기능을 하는 PendingIntent 를 만들 수 있습니다. 필요에 따라 사용할 수 있습니다.필요에 따라 notificationChannel 을 생성해 등록합니다.
(Optional)RemoteViews
,setContent
를 사용해 CustomContolService 에서 사용할 View 를 등록합니다.
Code Block | ||
---|---|---|
| ||
// 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 두 가지만 설정하면 됩니다.
Code Block | ||
---|---|---|
| ||
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 를 등록
Code Block | ||
---|---|---|
| ||
<application ...생략... <service android:name=".java.CustomControlService" /> </application> |
Pop Feed 커스터마이징
유틸리티 영역 커스터마이징
PopFeed 하단의 Utility영역을 커스텀할 때 PopUtilityLayoutHandler
클래스를 상속받아 사용합니다. 기본으로는 카메라, 사진첩, 브라우저로 이동하는 기능이 제공됩니다.
Utility에 넣고 싶은 View를 작성하여 parent
ViewGroup에 추가합니다.
Code Block | ||
---|---|---|
| ||
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
를 설정합니다.
Code Block | ||
---|---|---|
| ||
new PopConfig.Builder(getApplicationContext(), YOUR_POP_UNIT_ID) ...생략... .popUtilityLayoutHandlerClass(CustomPopUtilityLayoutHandler.class) .build(); |
Info |
---|
팝피드 유틸리티 영역 아이콘 참고사항
|
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 | ||
---|---|---|
| ||
// 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 영역을 전체를 커스터마이징 할 수 있습니다.
툴바 영역 전체를 커스터마이징하는 예제입니다.
Code Block | ||
---|---|---|
| ||
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에 표시되는 메세지를 커스터마이징할 수 있습니다.
DefaultPopFeedbackHandler
를 상속 받는 클래스를 생성합니다.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_POP_UNIT_ID) ...생략... .popFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class) .build();
methods | Description |
---|---|
| 광고 적립에 성공 시, 호출됩니다. |
Parameters | Description |
---|---|
| snackbar나 toast를 사용할 때 인자로 넘겨주는 context입니다. |
| snackbar를 사용할 때 인자로 넘겨주는 view입니다. |
| snackbar를 사용할 수 있는 상태인지를 알려주는 flag입니다. |
| 적립된 리워드 양을 나타냅니다. |