PopConfig 설정

...

PopConfig를 통해 Pop에서 원하는 Pop의 기능을 켜고 끌 제어할 수 있습니다. YOUR_POP_UNIT_ID에 Feed에서 사용한 Unit ID와 동일한 값을 넣어주세요. Application 의 OnCreate에 onCreate에 다음과 같이 추가합니다. BuzzAdBenefit.init 시점에 BuzzAdBenefitConfig 에 PopConfig를 설정합니다.

PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), "YOUR_POPFEED_UNIT_ID).build();
final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context)
        ... 생략
        .setPopConfig(popConfig")
        .build();
BuzzAdBenefit.init(this, buzzAdBenefitConfig);

Pop Feed 커스터마이징

Custom Bottom Sheet

다음은 PopContentActivity 내에서 사용가능한 Custom Bottom Sheet에 대한 내용 입니다. 유틸리티 영역이나 팝에 버튼 추가후, 버튼을 클릭했을때 다음 코드들을 호출합니다. 유틸리티 영역이나 툴바에 버튼을 추가하는 방법은 Utility/Toolbar Customization 가이드를 참고하세요.

BottomSheet 호출 코드 (Custom PopUtilityLayoutHandler 사용)

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

...

1. line 1~6: 다음은 구글 Material 라이브러리의 BottomSheetDialog 클래스를 호출하는 예시입니다.

LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View dialogView = inflater.inflate(R.layout.view_fragment_pop_bottom_sheet, (ViewGroup) null);
TextView textBottomSheet = dialogView.findViewById(R.id.textBottomSheet);
textBottomSheet.setOnClickListener((OnClickListener)(new OnClickListener() {
  public final void onClick(View it) {
      Toast.makeText(CustomPopUtilityLayoutHandler.this.context, "text bottom sheet clicked", Toast.LENGTH_SHORT).show();
  }
}));
BottomSheetDialog dialog = new BottomSheetDialog(CustomPopUtilityLayoutHandler.this.context);
dialog.setContentView(dialogView);
dialog.show();

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

구글 Material 라이브러리에서 기본적으로 제공되는 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>

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

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

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

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

Custom In-app-landing

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

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

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

  • BuzzAdBenefit SDK에서는 Fragment 내의 툴바를 제공하며, fragment contents 영역은 자유롭게 쓸 수 있습니다.

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

  • contents 영역에 원하는 내용을 넣을 수 있습니다.

...

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

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

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

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

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

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

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

PopFeed 지면 활용

커스텀 페이지

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

...

• 툴바에는 타이틀을 설정할 수 있습니다.

• 컨텐츠영역에 원하는 Fragment를 설정할 수 있습니다.

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

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

Exit 광고 설정

...

PopConfig 중 popExitUnitId 을 설정하면 뒤로가기 버튼 또는 팝 닫기 버튼을 눌렀을 때 광고를 보여줍니다.

...

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