Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagejava
PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), YOUR_POP_UNIT_ID).build();
final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context)
        ... 생략
        .setPopConfig(popConfig)
        .build();
BuzzAdBenefit.init(this, buzzAdBenefitConfig);

Pop Feed 커스터마이징

Custom

...

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

BottomSheet 호출 코드 (Custom PopUtilityLayoutHandler 사용)

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

...

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

Code Block
languagekotlin
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

Code Block
languagexml
<?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 를 사용할 수 있도록 설정합니다.

Code Block
languagexml
<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 스타일을 사용하도록 설정합니다.

Code Block
languagexml
<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 커스터마이징 가이드를 참고하세요.

...