...

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 와 벡터이미지가 모두 가능합니다.

  • 컬러 아이콘 사용 가능

...

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

...

1. 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;
    }
}

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

Custom

...

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

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

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

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

...

class CustomPopFeedbackHandler : DefaultPopFeedbackHandler() {
    override fun notifyFeedLaunchReward(
        context: Context,
        view: View,
        canUseSnackbar: Boolean,
        reward: Int
    ) {
        val message = "Customized feed launch reward message"

        if (canUseSnackbar) {
            showSnackbar(context, view, message)
        } else {
            showToast(context, message)
        }
    }

    ...
}

final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop)
      ...
      .PopFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)
      ...
      .build();

PopFeedbackHandler Interface

interface PopFeedbackHandler {
    fun notifyFeedLaunchReward(context: Context, view: View, canUseSnackbar: Boolean, reward: Int)

    fun notifyNativeAdReward(context: Context, view: View, canUseSnackbar: Boolean, reward: Int)

    fun notifyPottoDrawOneMore(context: Context, view: View, canUseSnackbar: Boolean)

    fun notifyPottoStatus(context: Context, view: View, canUseSnackbar: Boolean)
}

...

methods

...

Description

...

notifyFeedLaunchReward

...

피드 오픈 리워드 피드백을 보여줍니다.

...

notifyNativeAdReward

...

광고 적립 피드백을 보여줍니다.

...

notifyPottoDrawOneMore

...

포또 한번 더 뽑기 피드백을 보여줍니다.

...

notifyPottoStatus

...

포또 뽑기가 가능한 상태일 때를 알려주는 피드백을 보여줍니다. 해당 피드백은 한 번 만 노출됩니다.

...

Parameters

...

Description

...

context: Context

...

snackbar나 toast를 사용할 때 인수로 넘겨주는 context입니다.

...

view: View

...

snackbar를 사용할 때 인수로 넘겨주는 view입니다.

...

canUseSnackbar: Boolean

...

snackbar를 사용할 수 있는 상태인지를 알려주는 flag입니다.

...

reward: Int

...

적립된 리워드 포인트 양을 나타내는 인수입니다. 해당 인수를 사용해서 커스텀 메시지를 formatting 하면 유저에게 좀 더 구체적인 피드백을 제공할 수 있습니다.

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

...

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>

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를 만들 수 있습니다.)

• 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 에 넘겨서 화면에 표시하는 코드입니다.

Custom Feedback (Snackbar, Toast)

...

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

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

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

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

class CustomPopFeedbackHandler : DefaultPopFeedbackHandler() {
    override fun notifyFeedLaunchReward(
        context: Context,
        view: View,
        canUseSnackbar: Boolean,
        reward: Int
    ) {
        val message = "Customized feed launch reward message"

        if (canUseSnackbar) {
            showSnackbar(context, view, message)
        } else {
            showToast(context, message)
        }
    }

    ...
}

final PopConfig popConfig = new PopConfig.Builder(this, unitIdPop)
      ...
      .PopFeedbackHandlerClass(CustomPopFeedbackHandlerClass.class)
      ...
      .build();

PopFeedbackHandler Interface

interface PopFeedbackHandler {
    fun notifyFeedLaunchReward(context: Context, view: View, canUseSnackbar: Boolean, reward: Int)

    fun notifyNativeAdReward(context: Context, view: View, canUseSnackbar: Boolean, reward: Int)

    fun notifyPottoDrawOneMore(context: Context, view: View, canUseSnackbar: Boolean)

    fun notifyPottoStatus(context: Context, view: View, canUseSnackbar: Boolean)
}