...
"
개요
Pop 디자인 커스터마이징시 고려해야 할 사항은 Pop 디자인 가이드 문서에서 확인 가능합니다. PopConfig 설정을 해야 아래의 사항들을 적용할 수 있습니다.
Pop 아이콘 변경
iconResourceId
팝 아이콘 drawable을 만들어 아이콘을 PopConfig의 iconResId
와 rewardReadyIconResId
를 설정하여 Pop 아이콘 이미지를 변경할 수 있습니다. 이때 상태에 따라 평상시 아이콘과 팝 닫기 아이콘을 지정해 주어야 합니다.
Code Block | ||
---|---|---|
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> |
팝 아이콘 권장 사이즈
56x56 dp (mdpi 기준)
224x224 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)
rewardReadyIconResId
팝에서 적립 가능한 포인트가 있을 때 기본 아이콘이 아닌 다른 아이콘을 (예: 동전 아이콘) 유저에게 보여줄 수 있습니다. iconResourceId
와 마찬가지로 selector를 이용하여 작성합니다.
| |
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 | ||
---|---|---|
| ||
<!-- 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> |
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) |
Notification 커스터마이징
PopNotificationConfig 설정
팝을 실행하고 있는 동안에 Service Notification을 보여집니다.PopNotificationConfig
을 설정하여 Notification에 표시될 내용을 결정합니다. 앱의 브랜딩을 반영할 수 있습니다.
...
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_POPFEED_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 를 등록합니다.
...
language | java |
---|
...
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 builder;(this); } if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { // 45. 필요에CustomContolService 따라에서 notificationChannel사용할 을View 생성해를 등록합니다. RemoteViews remoteView = new createNotificationChannelIfNeededRemoteViews(getPackageName(); , R.layout.view_custom_notification); builder = new NotificationCompat.Builder(this, NOTIFICATION_CHANNEL_ID);builder.setSmallIcon(popNotificationConfig.getSmallIconResId()) } else.setContent(remoteView) { builder = new NotificationCompat.BuildersetContentIntent(thispopPendingIntent); } .setPriority(PRIORITY_LOW) // 5. CustomContolService 에서 사용할 View 를 등록합니다. RemoteViews remoteView = new RemoteViews(getPackageName(), R.layout.view_custom_notification);.setShowWhen(false); if builder.setSmallIcon(popNotificationConfig.getSmallIconResIdgetColor()) == null) { .setContent(remoteView)builder.setColor(popNotificationConfig.getColor()); } return builder.setContentIntentbuild(popPendingIntent); } @TargetApi(Build.VERSION_CODES.O) private void .setPrioritycreateNotificationChannelIfNeeded(PRIORITY_LOW) { final NotificationManager notificationManager = .setShowWhen(false(NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); if (popNotificationConfignotificationManager.getColorgetNotificationChannel(NOTIFICATION_CHANNEL_ID) == null) { builder.setColor(popNotificationConfig.getColor()); }final NotificationChannel channel = new NotificationChannel(NOTIFICATION_CHANNEL_ID, NOTIFICATION_CHANNEL_NAME, NotificationManager.IMPORTANCE_LOW); return builderchannel.buildsetShowBadge(false); } @TargetApi(Build.VERSION_CODES.O) private void createNotificationChannelIfNeeded() {notificationManager.createNotificationChannel(channel); } final NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);} } |
Step 2. Custom Service Class 등록
PopConfig에 CustomControlService
를 등록하여 사용할 수 있습니다.
이 경우, PopNotificationConfig 는 SmallIconRes 와 NotificationId 두 가지만 설정하면 됩니다.
Code Block | ||
---|---|---|
| ||
final PopNotificationConfig popNotificationConfig = new PopNotificationConfig.Builder() if (notificationManager.getNotificationChannel(NOTIFICATION_CHANNEL_ID) == null) { .smallIconResId(R.drawable.ic_notification_pop_gift) final NotificationChannel channel = new NotificationChannel .notificationId(NOTIFICATION_CHANNEL_ID, NOTIFICATION_CHANNEL_NAME, NotificationManager.IMPORTANCE_LOW);) channel.setShowBadgebuild(false); final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP) notificationManager.createNotificationChannel(channel);...생략... .popNotificationConfig(popNotificationConfig) } } } |
Step 2. Custom Service Class 등록
PopConfig.controlService(@NonNull Class<? extends PopControlService> popControlServiceClass)
를 사용해 Custom Service Notification 을 등록할 수 있습니다.
이 경우, PopNotificationConfig 는 SmallIconRes 와 NotificationId 두 가지만 설정하면 됩니다.
Code Block | ||
---|---|---|
| ||
final PopNotificationConfig popNotificationConfig = new PopNotificationConfig.Builder() .controlService(CustomControlService.class) .build(); final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context) .smallIconResId(R.drawable.ic_notification_pop_gift)...생략... .setPopConfig(popConfig) .notificationIdbuild(NOTIFICATION_ID)); |
Step 3. Manifest 에 CustomControlService 를 등록
Code Block | ||
---|---|---|
| ||
<application ...생략... .build(); final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP) ...(생략)... <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 .popNotificationConfig(popNotificationConfig)CustomPopUtilityLayoutHandler(Context context) { .controlService(CustomControlService.class)super(context); .build();this.context = context; final BuzzAdBenefitConfig} buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context) @Override public void ...(생략)...onLayoutCreated(ViewGroup parent) { LayoutInflater inflater = LayoutInflater.setPopConfigfrom(popConfigcontext); final FrameLayout layout .build= (); |
Step 3. Manifest 에 CustomControlService 를 등록
Code Block | ||
---|---|---|
| ||
<applicationFrameLayout) inflater.inflate( ...(생략)... <service android:name=".java.CustomControlService" /> </application> |
Pop Feed 커스터마이징
유틸리티 영역 커스터마이징
Feed 하단의 Utility영역을 커스텀할 때 PopUtilityLayoutHandler
클래스를 상속받아 사용합니다. 기본으로는 카메라, 사진첩, 브라우저로 이동하는 기능이 제공됩니다.
...
오버라이드 해야 하는 함수는 다음과 같습니다.
onLayoutCreated(ViewGroup parent)
: Utility에 넣고 싶은 View를 작성한 후에 인자로 넘어온 Parent 뷰그룹에 붙여줍니다.
...
language | java |
---|
...
R.layout.my_pop_utility_view, parent, false |
...
|
...
|
...
); |
...
|
...
|
...
parent.addView(layout); |
...
|
...
|
...
}
} |
PopConfig에 CustomPopUtilityLayoutHandler
를 설정합니다.
Code Block | ||
---|---|---|
| ||
new PopConfig.Builder(getApplicationContext(), "YOUR_FEED_UNIT_ID") |
...
...생략... |
...
. |
...
popUtilityLayoutHandlerClass(CustomPopUtilityLayoutHandler.class) |
...
PopConfig에 CustomPopUtilityLayoutHandler
를 설정합니다.
Code Block | ||
---|---|---|
| ||
new PopConfig.Builder(getApplicationContext(), YOUR_POP_UNIT_ID)
... 생략
.popUtilityLayoutHandlerClass(CustomPopUtilityLayoutHandler.class)
.build(); |
Info |
---|
팝피드 유틸리티 영역 아이콘 참고사항
|
Pop Toolbar (AppBar) 커스터마이징
PopConfig 에 PopConfig.feedToolbarHolderClass
를 설정하는데 여기에 DefaultPopToolbarHolder
를 상속받은 class 를 사용해서 Pop Toolbar 커스터마이징 가능합니다.
Code Block | ||
---|---|---|
| ||
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 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.
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 버튼 추가.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() { return toolbar; @Override } // custom 버튼 추가는 toolbar.buildPopMenuItemView 를public 사용하여void onClick(View v) 를{ 생성하고 // toolbar.addRightMenuButton 를 사용하여 toolbar 에 추가합니다. private void addRightMenuItemView1(@NonNull final Activity activity, @NonNull final String unitId) {showInquiry(activity, unitId); } PopMenuImageView menuItemView = toolbar.buildPopMenuItemView(activity, R.mipmap.ic_launcher }); menuItemViewtoolbar.setOnClickListener(new View.OnClickListener() { addRightMenuButton(menuItemView); } } |
Option2. Toolbar 레이아웃 변경
SDK에서 제공하는 기본 UI (PopToolbar
)를 사용하지 않고 직접 구성한 레이아웃을 사용하여 Toolbar 영역을 전체를 커스터마이징 할 수 있습니다.
...
툴바 영역 전체를 커스터마이징하는 예제입니다.
Code Block | ||
---|---|---|
| ||
public class CustomPopToolbarHolder extends DefaultPopToolbarHolder { @Override public View getView(Activity activity, @NonNull final public void onClick(View vString unitId) { // 직접 구성한 layout 을 사용합니다 showInquiry(activity, unitId); ViewGroup root = } }(ViewGroup) activity.getLayoutInflater().inflate(R.layout.your_pop_custom_toolbar_layout, null); toolbar.addRightMenuButton(menuItemView); View buttonInquiry }= } |
Option2. Toolbar 레이아웃 변경
DefaultPopToolbarHolder
를 상속받아서 사용합니다. 레이아웃을 직접 구성하여 Toolbar 영역을 전부 커스터마이징 할 수 있습니다.
...
위 그림과 같은 toolbar를 만들기 위해 커스텀 class 를 구성하는 예제입니다.
Code Block | ||
---|---|---|
| ||
// DefaultPopToolbarHolder 상속 public class CustomPopToolbarHolder extends DefaultPopToolbarHolder { @Overrideroot.findViewById(R.id.yourInquiryButton); buttonInquiry.setOnClickListener(new View.OnClickListener() { public View getView(Activity activity, @NonNull final String@Override unitId) { // 직접 구성한public layoutvoid 을 사용합니다 onClick(View v) { 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() {showInquiry(activity, unitId); } @Override }); public void onClick(View v) {return root; } } |
Snackbar 및 Toast 내용 커스터마이징
...
PopFeed 지면에서 유저가 리워드를 획득을 했을때 스낵바 혹은 Toast 가 표시됩니다.
스낵바 혹은 Toast에 표시되는 메세지를 커스터마이징할 수 있습니다.
DefaultPopFeedbackHandler
를 상속 받는 클래스를 생성합니다.Code Block public class CustomPopFeedback extends DefaultPopFeedbackHandler {
...
@Override
...
...
...
public
...
void notifyNativeAdReward(
...
...
@NotNull Context context,
...
...
...
Snackbar및 Toast 내용 커스터마이징
Pop 지면에서 보여주는 다양한 피드백(snackbar, toast)를 커스터마이징 할 수 있습니다. 어떤 경우가 있는지는 아래 표에서 확인할 수 있습니다.
DefaultPopFeedbackHandler
를 상속 받는 클래스를 생성합니다.PopConfig를 초기화할 때에, 이전 스텝에서 생성한 Custom PopFeedbackHandler 클래스를 넘겨줍니다.
...
@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();
methods | Description |
---|---|
| 광고 적립에 성공 시, 호출됩니다. |
...