Index

Pop 디자인 customize 관련 자세한 "

개요

Pop 디자인 커스터마이징시 고려해야 할 사항은 Pop 디자인 가이드 문서에서 확인 가능합니다.

[Preview Message] CustomPreviewMessage

CustomPreviewMessage 는 6시간 간격으로 서버에 설정된 CustomPreviewConfig 를 받아와서 frequency capping 후 PreviewMessage 를 보여주는 기능입니다. 따라서 서버에 CustomPreviewConfig 설정하는 작업이 선행되어야합니다. (frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.)

서버에서 클라이언트로 전달되는 CustomPreviewMessageConfig 는 다음과 같은 정보를 가지고 PopConfig 설정을 해야 아래의 사항들을 적용할 수 있습니다.

Pop 아이콘 변경

PopConfig의 iconResId 와 rewardReadyIconResId 를 설정하여 Pop 아이콘 이미지를 변경할 수 있습니다.

{PopConfig popConfig = "id": 5new PopConfig.Builder(context,   "unit_id": 1234567890,
  "message": "오늘도 아케이드 게임하고 최대 90P 팡팡!",
  "landing_url": "deeplink://landing?activity=arcade",
  "start_date": "2020-03-01T00:00:00Z",
  "end_date": "2020-03-31T23:59:59Z",
  "start_hour_minute": "21:00",
  "end_hour_minute": "23:00",
  "dipu": 2,
  "tipu": 60,
  "dcpu": 1,
  "tcpu": 30,
  "icon": "http://imagelocation/arcade_icon.png"
}

...

이름

...

내용

...

id

...

configId (messageId), 서버에서 자동 할당합니다

...

unit_id

...

pop unitId

...

landing_url

...

랜딩 url or deeplink

...

start_date

...

config 시작 일 (UTC, 시간은 무시됩니다)

...

end_date

...

config 종료 일 (UTC, 시간은 무시됩니다)

...

start_hour_minute

...

config 시작 시간 (분은 무시됩니다)

...

end_hour_minute

...

config 종료 시간 (분은 무시됩니다)

...

dipu

...

Frequency capping: daily impression per user

...

tipu

...

Frequency capping: total impression per user

...

dcpu

...

Frequency capping: daily click per user

...

tcpu

...

Frequency capping: total click per user

...

icon

...

icon url

CustomPreviewMessage 는 두가지 영역에 표시됩니다.

• Pop 의 CustomPreviewMessage 영역 (그림1)

  • 설정된 기간, 시간 내에 dipu, tipu, dcpu, tcpu 에 따라 frequency capping 됩니다.

  • frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.

• PopFeedHeader 의 CustomPreviewMessage 영역 (그림2)

  • frequency capping 되지 않고 설정된 기간, 시간내 라면 보여집니다.

  • FeedConfig 를 customize 가능합니다

  • FeedConfig 를 사용하면서 header 를 설정하지 않으면 CustomPreviewMessage 를 안보이게 설정 가능합니다

그림1. Pop 에 CustomPreviewMessage 가 표시된 모습

...

그림2. PopFeedHeader 에 CustomPreviewMessage 가 표시된 모습

...

Step 1. (Optional) PopFeedHeader Customize

1. DefaultPopHeaderViewAdapter 를 상속받아 CustomPopHeaderViewAdapter 를 만들고

2. getCustomPreviewMessageLayout 를 오버라이드 합니다.

3. getCustomPreviewMessageLayout 의 파라미터인 CustomPreviewMessage 에 message, landingUrl, iconUrl 정보가 담겨있습니다.

4. line 9~17 3번에서 받아온 정보를 토대로 직접 layout 을 구성하고, clickEvent 처리할 수 있습니다.

5. line 24 FeedConfig.feedHeaderViewAdapterClass를 통해 1번에서 생성한 CustomPopHeaderViewAdapter 를 설정합니다.

6. line 29 PopConfig.feedConfig를 통해 5번에서 설정한 FeedConfig 를 설정합니다.

public class CustomPopHeaderViewAdapter extends DefaultPopHeaderViewAdapter {
    @Nullable
    @Override
    protected View getCustomPreviewMessageLayout(Context context, ViewGroup parent, CustomPreviewMessage customPreviewMessage) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (inflater == null) {
            return null;
        }
        View viewCustomPreviewMessage = inflater.inflate(R.layout.view_custom_preview_message, parent, false);
        final TextView textCustomPreviewMessageTitle = viewCustomPreviewMessage.findViewById(R.id.textCustomPreviewMessageTitle);
        textCustomPreviewMessageTitle.setText(customPreviewMessage.getMessage());
        viewCustomPreviewMessage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v"YOUR_FEED_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>

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_FEED_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 startDeeplinkActivity(context, customPreviewMessage.getLandingUrl());
       Icon 을 띄우는 기능을 하는 PendingIntent 를 만들 수 있습니다.
    }    PendingIntent popPendingIntent =   }getPopPendingIntent(unitId, this);

       return viewCustomPreviewMessageNotificationCompat.Builder builder;
    } }  final FeedConfig popFeedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
       ...     // 4. 필요에  .feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)
  따라 notificationChannel 을 생성해 등록합니다.
     ...         .buildcreateNotificationChannelIfNeeded();
final PopConfig popConfig            builder = new PopConfigNotificationCompat.Builder(getApplicationContext()this, UNITNOTIFICATION_CHANNEL_ID_POP);
         ...} else {
            builder = new NotificationCompat.feedConfigBuilder(popFeedConfigthis);
        ...}

        // .build();

Step 2. (Optional) FeedConfig 사용 설정

• PopFeedHeader 에 CustomPreviewMessage 보이지 않도록 설정

PopConfig.feedConfig 설정시 FeedConfig.feedHeaderViewAdapterClass 를 설정 하지 않으면 PopFeedHeader 의 CustomPreviewMessage 를 보이지 않게 설정할 수 있습니다.

• PopFeedHeader 에 DefaultPreviewMessage 보이도록 설정

PopConfig.feedConfig 설정시 FeedConfig.feedHeaderViewAdapterClass(DefaultPopHeaderViewAdapter.class) 를 설정 하면 기본 제공하는 DefaultPreviewMessage 를 사용할 수 있습니다. (그림 2 참조)

Step 3. (Optional) Preview Interval 설정

PopConfig.previewIntervalInMillis를 통해서 Preview interval 을 설정합니다. AdPreview, ContentPreview/CustomPreviewMessage 동일하게 interval 이 설정됩니다.

final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)5. CustomContolService 에서 사용할 View 를 등록합니다.
        RemoteViews remoteView = new RemoteViews(getPackageName(), R.layout.view_custom_notification);
        builder.setSmallIcon(popNotificationConfig.getSmallIconResId())
                .setContent(remoteView)
                ...setContentIntent(popPendingIntent)
        .previewIntervalInMillis(1 * 60 * 60 * 1000) // 1 hour .setPriority(PRIORITY_LOW)
                ...setShowWhen(false);
        if (popNotificationConfig.getColor() == null) {
            builder.buildsetColor(popNotificationConfig.getColor();

[Preview Message] PopAdMessageViewClass

...

광고가 있는 경우 PopAdMessageViewClass를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 현재 적립가능한 포인트와 몇초후에 닫히는지 보여줍니다. 해당 클래스는 PopAdMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.

• updateView: 매초마다 말풍선을 업데이트 하는데 업데이트 해야 할때마다 호출됩니다. 남은 시간(초)과 적립가능한 reward 값이 인자로 넘어옵니다.

• getDurationInSeconds 몇초동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.

);
        }
        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(), "POP_UNIT_ID"_POP)
        ..popAdMessageViewClass(MyPopAdMessageView.class)

[Preview Message] PopArticleMessageViewClass

광고가 없는 경우 PopArticleMessageViewClass 를 이용하여 말풍선(preview)을 보여줍니다. 기본 클래스에서는 로드된 첫번째 기사의 제목과 몇초후에 닫히는지를 보여줍니다. 해당 클래스는 PopArticleMessageView를 상속받아서 작성해야 합니다. 다음 함수들을 오버라이드 할 수 있습니다.

...

updateView: 매초마다 말풍선을 업데이트 하는데 업데이트 해야 할때마다 호출됩니다. 남은 시간(초)과 기사의 제목이 인자로 넘어옵니다.

...

getDurationInSeconds: 몇초동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.

getNativeArticleView: NativeArticleView 클래스의 인스턴스를 반환합니다. NativeArticleView는 LinearLayout을 상속받아 Impression과 Click을 처리합니다. PopArticleMessageViewClass의 뷰를 다음과 같이 설정합니다.

...

...

.생략...
        .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_FEED_UNIT_ID")
    ...생략...
    .popUtilityLayoutHandlerClass(CustomPopUtilityLayoutHandler.class)
    .build();

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 할 때 이 함수를 통해서 문의하기 페이지를 열 수 있습니다.

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

사용법

new PopConfig.Builder(getApplicationContext(), "POP_UNIT_ID")
    .popArticleMessageViewClass(MyPopArticleMessageView.class)

[Pop Feed] PopUtilityLayoutHandlerClass

피드 하단의 Utility화면을 커스텀할 때 PopUtilityLayoutHandler 클래스를 사용합니다.

기본 클래스에서는 카메라, 사진첩, 브라우저로 이동하는 뷰가 제공됩니다. 유틸리티를 커스텀하기 위해서는 PopUtilityLayoutHandler 클래스를 상속받아 사용합니다. 오버라이드 해야 하는 함수는 다음과 같습니다. 

...

• onLayoutCreated(ViewGroup parent): Utility에 넣고 싶은 View를 작성한 후에 인자로 넘어온 Parent 뷰그룹에 붙여줍니다. 커스텀으로 작성된 뷰에 있는 아이콘에 클릭 리스너를 달아서 원하는 행동을 수행하도록 작업합니다.

final LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.my_view_utility_layout, parent, false);
parent.addView(layout);

• 팝피드 하단아이콘 참고사항

  • 이미지 사이즈

    • 24*24 dp (mdpi 기준)

    • 96*96 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)

  • 아이콘은 png 와 벡터이미지가 모두 가능합니다.

  • 컬러 아이콘 사용 가능

• 사용법

new PopConfig.Builder(getApplicationContext(), "POP_UNIT_ID")
    .popUtilityLayoutHandlerClass(MyPopUtilityLayoutHandler.class)

[Pop Feed] Pop Toolbar (AppBar) Customize

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

final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop) // 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) {
   .feedUnitId(feedUnitId)       // 아래에서 소개하는 TemplatePopToolbarHolder, CustomPopToolbarHolder 등을 showInquiry(activity, unitId);
     // 용도에 맞게 사용합니다    }
  .feedToolbarHolderClass(DefaultPopToolbarHolder.class)      });
 ...       toolbar.buildaddRightMenuButton(menuItemView);

DefaultPopToolbarHolder

DefaultPopToolbarHolder 를 바로 설정하면 간단하게 Pop Toolbar 가 설정됩니다.

...

TemplatePopToolbarHolder

DefaultPopToolbarHolder 를 상속하여 TemplatePopToolbarHolder 를 만들어 사용합니다. 그리고 기본 제공하는 PopToolbar 를 사용하여 미리 구성되어있는 PopToolbarTemplate 을 수정하여 customize 가능합니다. Toolbar 내의 Pop feed icon, title, toolbar background color 등을 변경할 수 있고 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) {
    }
}

Option2. Toolbar 레이아웃 변경

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

...

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

public class CustomPopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity, @NonNull final String unitId) {
        // 직접 구성한 layout 을 사용합니다
        ViewGroup toolbarroot = new PopToolbar(ViewGroup) activity.getLayoutInflater().inflate(R.layout.your_pop_custom_toolbar_layout, null);
//
PopToolbar 에서 제공하는 기본 Template 사용   View buttonInquiry =    toolbar.setTitle("TemplatePopToolbarHolder"root.findViewById(R.id.yourInquiryButton);
        toolbarbuttonInquiry.setIconResourcesetOnClickListener(R.mipmap.ic_launcher);
new View.OnClickListener() {
       toolbar.setBackgroundColor(Color.LTGRAY);     @Override
    addInquiryMenuItemView(activity, unitId); // 문의하기 버튼은 이 함수를 통해 간단하게public 추가 가능합니다.
 void onClick(View v) {
      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);
    }
}

CustomizePopToolbarHolder

DefaultPopToolbarHolder 를 상속받아서 사용하는 점은 TemplatePopToolbarHolder 와 동일합니다. 차이점은 PopToolbar 를 사용하지않고 layout 을 직접 구성하여 Toolbar 영역을 전부 customize 할 수 있습니다.

...

CustomPopToolbarHolder 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>

[Pop Feed] Custom Bottom Sheet

PopContentActivity 내에서 사용가능한 Custom Bottom Sheet 입니다. 일반적으로 PopUtilityLayoutHandler 를 Customize 하여 호출합니다.

BottomSheet 호출 코드 (CustomPopUtilityLayoutHandler 사용)

Utility 버튼을 눌렀을 때 아래 코드를 호출하면 BottomSheet 이 열립니다.

...

1. line 1~6: bottomsheet 에서 사용할 view 와 동작을 지정할 수 있습니다.

val inflater: LayoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val dialogView = inflater.inflate(R.layout.view_fragment_pop_bottom_sheet, null)
val textBottomSheet: TextView = dialogView.findViewById(R.id.textBottomSheet)
textBottomSheet.setOnClickListener {
    Toast.makeText(context, "text bottom sheet clicked", Toast.LENGTH_SHORT).show()
}
val dialog = BottomSheetDialog(context)
dialog.setContentView(dialogView)
dialog.show()

(Optional) PopContentActivity 에 Theme을 적용하여 BottomSheet 좌우측 상단 모서리 둥글게 만들기

기본적으로 제공되는 BottomSheet은 흰색 사각형 모양인데, 좌우측 상단을 둥글게 사용하기 위해서는 다음과 같이 설정하면 됩니다.

...

1. 좌우측 상단 모서리가 둥근 drawable 을 준비합니다.

rounded_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:topLeftRadius="16dp"
        android:topRightRadius="16dp"/>

</shape>

1. PopContentActivity 를 위한 theme(BuzzvilSamplePopContentActivityTheme) 을 준비합니다.

styles.xml BottomSheet 에서 위에서 설정한 좌우측이 둥근 background 를 사용할 수 있도록 설정합니다.

<style name="BuzzvilSamplePopContentActivityTheme" parent="Theme.Buzzvil.PopContentActivity">
    <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>

<style name="AppBottomSheetDialogTheme"
    parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>

<style name="AppModalStyle"
    parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@drawable/rounded_dialog</item>
</style>

1. BuzzvilSamplePopContentActivityTheme 을 PopContentActivity 에 적용합니다.

AndroidManifest.xml를 통해 PopContentActivity 에 위에서 선언한 BuzzvilSamplePopContentActivityTheme 스타일을 사용하도록 설정합니다.

<activity android:name="com.buzzvil.buzzad.benefit.pop.PopContentActivity"
    tools:replace="android:theme"
    android:theme="@style/BuzzvilSamplePopContentActivityTheme"/>

[Pop Feed] Custom In-app-landing

유틸리티 영역이나 툴바 영역에 버튼을 추가한 경우, 버튼을 클릭했을때 유저를 새로운 activity로 랜딩시키거나 fragment로 랜딩시킬 수 있습니다. (fragment를 이용하는 경우, 보다 자연스러운 UX를 만들 수 있습니다.)

• activity로 랜딩하는 경우, startActivity를 이용하여 원하는 activity를 열 수 있습니다.

• fragment로 랜딩하는 경우, 정해신 방식을 따라야 합니다. (아래의 그림은 fragment로 in app landing 시켰을 경우의 예시입니다.)

  • BuzzAd SDK에서는 툴바를 제공하며, SDK 사용자는 fragment 의 내용을 채워넣게 됩니다.

  • toolbar 영역은 제목의 텍스트만 변경가능합니다.

  • contents 영역은 모든 내용을 fragment 로 만들어 넣을 수 있습니다.

...

다음의 클래스가 필요합니다.

• PopNavigator: pop의 navigation을 담당하는 클래스

• CustomInAppLandingInfo: 랜딩하게 될 fragment의 내용에 대한 정보를 가지고 있는 클래스

  • fragment: 랜딩되는 화면의 컨텐츠를 담당하는 fragment 객체를 넘겨줍니다.

  • titleResId: 랜딩되는 화면의 타이틀의 resource id를 넘겨줍니다.

예시 코드

new PopNavigator().launchCustomFragment(
    context,
    new CustomInAppLandingInfo(
        new ExampleFragment(),
        R.stirng.example_title
    )
)

원하는 fragment 를 instantiate하여 (ExampleFragment) CustomInAppLandingInfo 에 넘겨서 화면에 표시하는 코드입니다.

[Pop Feed] Custom Feedback (Snackbar, Toast)

...

팝 지면에서 보여주는 다양한 피드백을 customize 할 수 있습니다. 오른쪽의 이미지는 피드 오픈 리워드 피드백을 customize 했을 때 보여주는 커스텀 피드백입니다.

다음의 적용이 필요합니다.

1. PopFeedbackHandler 인터페이스를 구현하는 커스텀 클래스를 생성합니다. 기본으로 제공되는 피드백의 일부를 사용하고 싶다면, DefaultPopFeedbackHandler를 확장하는 것을 권장합니다. (하단의 PopFeedbackHandler 인터페이스에 대한 부연 설명을 참고)

2. PopConfig를 초기화할 때에, 이전 스텝에서 생성한 Custom PopFeedbackHandler 클래스를 넘겨줍니다.

페이지 열기
                showInquiry(activity, unitId);
            }
       

 });
        

return root;
    }
}

Snackbar 및 Toast 내용 커스터마이징

...

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

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

   Code Block
   public class CustomPopFeedback

...

1. extends

...

1. DefaultPopFeedbackHandler { @Override

...

...

1. public void notifyNativeAdReward(

...

...

...

...

1. @NotNull

...

1. Context

...

1. context,

...

...

...

...

1. @NotNull

...

1. View view, boolean

...

1. canUseSnackbar,

...

...

...

...

...

1. int reward

...

1. ) {

...

1. String message = "Customized

...

1. feed launch reward message";

...

...

...

...

...

...

...

1. if

...

1. (canUseSnackbar) {

...

...

1. showSnackbar(message, view);

...

1. } else {

...

PopFeedbackHandler Interface

...

...

...

...

...

...

1. showToast(message); }

...

1. } }

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

   Code Block
   language java
   PopConfig popConfig = new PopConfig.Builder(this, "YOUR_FEED_UNIT_ID") ...생략... .popFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)

...

...

methods

...

Description

...

notifyFeedLaunchReward

...

1. .build();