...
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) |
...
팝을 실행하고 있는 동안에 Service Notification을 보여집니다.PopNotificationConfig 을 설정하여 Notification에 표시될 내용을 결정합니다. 앱의 톤 & 매너를 반영하여 변경합니다브랜딩을 반영할 수 있습니다.
...
| 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(); |
smallIconResIdSmall 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 | ||
|---|---|---|
| ||
<application
...(생략)...
<service android:name=".java.CustomControlService" />
</application> |
Pop Feed 커스터마이징
유틸리티 영역 커스터마이징
피드 Feed 하단의 Utility영역을 커스텀할 때 PopUtilityLayoutHandler 클래스를 상속받아 사용합니다.
...
추천 이미지 사이즈
24*24 dp (mdpi 기준)
96*96 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)
아이콘은 png 와 벡터이미지가 모두 가능합니다.
컬러 아이콘 사용 가능
Pop Toolbar (AppBar) 커스터마이징
PopConfig 를 사용하여 Toolbar 영역을 커스터마이징 할 수 있습니다. PopConfig 에 PopConfig.feedToolbarHolderClass 를 설정하는데 여기에 DefaultPopToolbarHolder 를 상속받은 class 를 사용해서 Pop Toolbar 커스터마이징 가능합니다.
...
feedToolbarHolderClass를 따로 설정하지 않는다면 DefaultPopToolbarHolder 를 사용하게 됩니다.
...
Option1. Toolbar 제목 및 아이콘 변경
DefaultPopToolbarHolder 를 상속받는 클래스를 만들어 사용합니다. 그리고 기본 제공하는 PopToolbar 를 사용하여 미리 구성되어있는 PopToolbarTemplate 을 수정하여 customize 가능합니다. Toolbar 내의 왼쪽 아이콘, 제목, 배경 색상 등을 변경할 수 있고 Toolbar 우측에 클릭 가능한 이미지 버튼을 추가할 수 있습니다.
...
| 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 영역을 전부 커스터마이징 할 수 있습니다.
...
| Code Block | ||
|---|---|---|
| ||
<?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 클래스를 넘겨줍니다.
...
| |||
| Code Block | |||
|---|---|---|---|
| kotlin
| ||
class CustomPopFeedbackHandler extends DefaultPopFeedbackHandler { @Override public void notifyNativeAdReward( @NotNull Context context, @NotNull View view, boolean canUseSnackbar, int reward ) {val 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 popFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class) .build(); |
...
methods | Description |
|---|---|
| 광고 적립 피드백을 보여줍니다. 적립에 성공 시, 호출됩니다. |
Parameters | Description |
|---|---|
| snackbar나 toast를 사용할 때 인자로 넘겨주는 context입니다. |
| snackbar를 사용할 때 인자로 넘겨주는 view입니다. |
| snackbar를 사용할 수 있는 상태인지를 알려주는 flag입니다. |
| 적립된 리워드 포인트 양을 나타내는 인자입니다. 해당 인수를 사용해서 커스텀 메시지를 formatting 하면 유저에게 좀 더 구체적인 피드백을 제공할 수 있습니다. |
...