...

Pop Feed 커스터마이징

Custom Bottom Sheet

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

BottomSheet 호출 코드 (CustomPopUtilityLayoutHandler Custom PopUtilityLayoutHandler 사용)

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

...

1. line 1~6: bottomsheet 에서 사용할 view 와 동작을 지정할 수 있습니다다음은 구글 Material 라이브러리의 BottomSheetDialog 클래스를 호출하는 예시입니다.

valLayoutInflater inflater: LayoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
asView LayoutInflater
val dialogView = inflater.inflate(R.layout.view_fragment_pop_bottom_sheet, (ViewGroup) null);
valTextView textBottomSheet: TextView = 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();
  }
}));
valBottomSheetDialog dialog = new BottomSheetDialog(CustomPopUtilityLayoutHandler.this.context);
dialog.setContentView(dialogView);
dialog.show();

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

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

...

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

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

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

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

  • BuzzAdBenefit SDK에서는 Fragment 내의 툴바를 제공하며, 매체사는 fragment 의 내용을 채워넣게 됩니다fragment contents 영역은 자유롭게 쓸 수 있습니다.

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

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

...

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

...

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

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

  Code Block

  language	bash

  // app level build.gradle 에 아래 mediation sdk 를 추가합니다. // Adfit implementation(‘com.buzzvil.mediation:sdk-adfit:3.4.0.0’)

  버즈빌 광고 외에 추가적인 애드네트워크 광고 물량을 추가하고 싶다면, 여기를 참고하세요