[Android] BottomSheetDialog

WW 앱의 업데이트 상태를 알리기 위한 방법으로 바텀 시트 다이얼로그를 선택했다.

이전에는 기본 다이얼로그를 커스텀해 사용하는 방식을 많이 선택했는데

요즘 앱들을 살펴보면 바텀 시트 다이얼로그로 상호작용을 많이 하는 것 같아 한번 구현해보기로 했다.

 

예시 : 무신사 앱

바텀 시트 다이얼로그에도 종류가 있는데,

자세한 것은 아래의 링크에 잘 설명이 되어 있으니 참고하면 좋다.

오늘 구현해 볼 것은 Modal bottom sheet이다.

Bottom Sheet Dialog 예제 : Modal, Persistent, 모서리 둥글게 등

 

1. 디자인 만들기

xml로 다이얼로그 레이아웃을 구성해준다.

 

그런데 위의 예시도 그렇듯, 대부분의 바텀 시트 다이얼로그는 모서리가 둥글다.

그것도 같이 구현해보자.

1) 모서리가 둥근 drawable 만들기

bg_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="@color/white"/>
    <corners android:topRightRadius="20dp"
        android:topLeftRadius="20dp"/>
</shape>

2) style 선언하기

<style name="DialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/DialogStyle</item>
</style>
<style name="DialogStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@drawable/bg_dialog</item>
</style>

3) style 지정하기

setStyle(DialogFragment.STYLE_NORMAL, R.style.DialogTheme)

2. 화면에 띄우기

BottomSheetDialogFragment 클래스를 상속한 클래스를 만든다.

class BottomConfirmDialog : BottomSheetDialogFragment() {
	...
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.layout_bottom_sheet_dialog, container, false)
    }
    ...
}

 

다이얼로그를 띄울 곳에서 show 함수를 호출하면 된다.

BottomConfirmDialog().show(supportFragmentManager, TAG)

 

이렇게하면 다이얼로그는 화면에 잘 뜬다.

그런데 이런 다이얼로그는 특정 화면, 특정 상황에서만 쓰이는 것이 아니라

재사용 가능하도록 만들고 싶었다.

전체적인 틀은 위처럼 구성하고,

내용과 버튼을 클릭했을 때의 행위를 동적으로 결정할 수 있도록 구현했다.

   fun showDialog(
        context: Context,
        content: String,
        supportFragmentManager: FragmentManager,
        dialogAction: DialogAction
    ) {
        val inflater = LayoutInflater.from(context)
        binding = LayoutBottomSheetDialogBinding.inflate(inflater)
        binding.content.text = content
        binding.buttonYes.setOnClickListener {
            dialogAction.setPositiveAction()
            dismissDialog()
        }
        binding.buttonNo.setOnClickListener {
            dialogAction.setNegativeAction()
            dismissDialog()
        }
        isCancelable = false
        setStyle(DialogFragment.STYLE_NORMAL, R.style.DialogTheme)
        show(supportFragmentManager, TAG)
    }

 

다이얼로그를 화면에 띄우려면 아래와 같이 함수를 호출하면 된다.

BottomConfirmDialog.instance.showDialog(
    context = this@MainActivity,
    supportFragmentManager = supportFragmentManager,
    content = "앱의 원활한 사용을 위해 업데이트를 권장합니다.\n업데이트 하시겠습니까?",
    dialogAction = object : BottomConfirmDialog.DialogAction{
        override fun setPositiveAction() {
            appUpdateViewModel.moveToPlayStore(this@MainActivity)
        }

        override fun setNegativeAction() {
            Unit
        }
    }
)

 

다른 곳에서도 동일한 다이얼로그를 띄운다.

private val shareBtnClickListener = View.OnClickListener {
    BottomConfirmDialog.instance.showDialog(
        context = mContext,
        supportFragmentManager = requireActivity().supportFragmentManager,
        content = "오늘 입으면 좋을 옷을 공유해보세요!",
        dialogAction = object : BottomConfirmDialog.DialogAction {
            override fun setPositiveAction() {
                createDynamicLink()
            }

            override fun setNegativeAction() {
                Unit
            }
        }
    )
}

 

결과

---

공부하며 작성된 글이라 잘못된 정보가 있을 수 있습니다.

말씀해주시면 수정하겠습니다. 감사합니다.

References

아래 글을 참고하여 작성 되었습니다.

Bottom Sheet Dialog 예제 : Modal, Persistent, 모서리 둥글게 등