...

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

[Pop Feed] Custom

...

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>

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

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

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

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

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

[Pop Feed] Custom Feedback (Snackbar, Toast)

...