Table of Contents

Notification 커스터마이징

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 를 등록합니다.

Code Block

language	java

// 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.controlService(@NonNull Class<? extends PopControlService> popControlServiceClass) 를 사용해 Custom Service Notification 을 등록할 수 있습니다.

이 경우, PopNotificationConfig 는 SmallIconRes 와 NotificationId 두 가지만 설정하면 됩니다.

...

language	java

...

PopConfig 설정

...

PopConfig를 통해 Pop의 기능을 제어할 수 있습니다. Application 의 onCreate에 다음과 같이 추가합니다.

Code Block

language	java

PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), "YOUR_FEED_UNIT_ID_POP")
        ...build(생략)...;
        .controlService(CustomControlService.class)
 
      .build();

final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context)
        ...(생략)...
        .setPopConfig(popConfig)
        .build();

Step 3. Manifest 에 CustomControlService 를 등록

Code Block

language	xml

<application
    ...(생략)...
    <service android:name=".java.CustomControlService" />
</application>

Pop Feed 커스터마이징

Custom Bottom Sheet

PopContentActivity 내에서 사용가능한 Custom Bottom Sheet 입니다. 일반적으로 PopUtilityLayoutHandler 를 Customize 후 유저가 UtilityLayout내 아이콘을 클릭시 호출합니다.

BottomSheet 호출 코드 (CustomPopUtilityLayoutHandler 사용)

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

...

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

Code Block

language	kotlin

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

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

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

...

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

rounded_dialog.xml

Code Block

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

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

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

Code Block

language	xml

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

BuzzvilSamplePopContentActivityTheme 을 PopContentActivity 에 적용합니다.

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

Code Block

language	xml

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

Custom In-app-landing

Utility 영역이나 Toolbar 영역에 버튼을 추가한 경우, 유저가 버튼을 클릭했을때 새로운 activity로 랜딩시키거나 fragment로 랜딩시킬 수 있습니다. fragment를 이용하는 경우, 보다 자연스러운 UX를 만들 수 있습니다. Utility/Toolbar Customization 가이드를 참고하세요.

activity로 랜딩하는 경우, startActivity를 이용하여 원하는 activity를 열 수 있습니다.
fragment로 랜딩하는 경우, 정해신 방식을 따라야 합니다. (아래의 그림은 fragment로 in app landing 시켰을 경우의 예시입니다.)
- BuzzAdBenefit SDK에서는 Fragment 내의 툴바를 제공하며, 매체사는 fragment 의 내용을 채워넣게 됩니다.
- toolbar 영역은 제목의 텍스트만 변경가능합니다.
- contents 영역은 모든 내용을 fragment 로 만들어 넣을 수 있습니다.

...

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

PopNavigator: pop의 navigation을 담당하는 클래스
CustomInAppLandingInfo: 랜딩하게 될 fragment의 내용에 대한 정보를 가지고 있는 클래스
- fragment: 랜딩되는 화면의 컨텐츠를 담당하는 fragment 객체를 넘겨줍니다.
- titleResId: 랜딩되는 화면의 타이틀의 resource id를 넘겨줍니다.

...


BuzzAdBenefit.init(this, buzzAdBenefitConfig);

PopFeed 지면 활용

커스텀 페이지

커스텀 페이지는 툴바와 컨텐츠로 이루어져있습니다.

...

툴바에는 타이틀을 설정할 수 있습니다.
컨텐츠영역에 원하는 Fragment를 설정할 수 있습니다.

아래 예시 코드에 따라 구현할 수 있습니다.

Code Block

language	java

new PopNavigator().launchCustomFragment(
    context,
    new CustomInAppLandingInfo(
        new ExampleFragmentYourFragment(),
        R.stirng.exampleyour_title
    )
)

Exit 광고 설정

PopConfig 중 popExitUnitId 을 설정하면 뒤로가기 버튼 또는 Feed 닫기 버튼을 눌렀을 때(Pop feed 를 종료할 때) 광고를 보여줍니다.

Exit 광고에서 SDK 광고 (Adfit 등) 를 사용하려면 아래 내용을 추가합니다.

...

language	bash

...

커스텀 페이지는 유틸리티 영역, 툴바 영역을 커스터마이징할때 사용할 수 있습니다.
유틸리티 영역과 툴바 영역의 커스터마이징은 여기에서 확인할 수 있습니다.

Versions Compared

Old Version 10

New Version Current

Key

Notification 커스터마이징

Custom Pop Service Notification

PopConfig 설정

Pop Feed 커스터마이징

Custom Bottom Sheet

Custom In-app-landing

PopFeed 지면 활용

커스텀 페이지

Exit 광고 설정

Page Comparison

Versions Compared

Old Version 10

New Version Current

Key

Notification 커스터마이징

Custom Pop Service Notification

PopConfig 설정

Pop Feed 커스터마이징

Custom Bottom Sheet

Custom In-app-landing

PopFeed 지면 활용

커스텀 페이지

Exit 광고 설정