🔥TIL🔥스파르타 | BottomSheetDialogFragment 뒷배경 제거하기

📖 Modal UI

모달(modal) UI는 무엇일까?
모달은 사용자의 이목을 끌기 위해 사용하는 화면 전환 기법을 의미한다.
팝업, 바텀시트, 스낵바 등 여러 가지가 존재한다.
PC에 비해 활용가능한 면적이 적기 때문에 사용자의 이목을 끌고 행동이 필요한 경우

나는 메인 화면에서 초기 화면으로 넘어갈 때나 기록을 삭제하기 위해 Modal 바텀 시트를 사용했다.

🤔 예전에도 생겼던 문제

예전에도 다이얼로그 사용했을 때 테두리가 보여서 background가 지정이 안되길래 코드에서 배경색을 투명으로 지정해서 배경색을 없앴는데 이번에 바텀 시트 다이얼로그를 사용하려고 했는데 똑같은 문제가 생겼다.

예전에 배경색 없애는 걸 해결한 코드

alertDialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

이번에도 xml에서 backgroundTint에 투명색을 지정해주고, 코드에서 배경색을 투명색으로 해줘도 뒷배경이 보여서 계속 테두리가 각져서 보였다.

📝 해결 방법

<style.xml>에 아래의 코드를 넣고

    <style name="TransparentBottomSheetDialogFragment" parent="Theme.Design.BottomSheetDialog">
        <item name="android:windowIsFloating">true</item>
        <item name="android:backgroundDimEnabled">true</item> // Scrim이 있는 Modal
        <item name="android:colorBackground">@android:color/transparent</item>
    </style>

BottomSheetDialogFragment 코드의 OnCreate 안에 setStyle 함수를 호출해주면 된다.

class RecordBottomSheetDialog : BottomSheetDialogFragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setStyle(STYLE_NORMAL, R.style.TransparentBottomSheetDialogFragment)
    }

setStyle : 프래그먼트의 스타일과 테마를 설정.
프래그먼트가 생성된 직후, 즉 onCreate 메서드 내에서 호출해야 함

• 첫 번째 매개변수
  STYLE_NORMAL은 표준 바텀 시트 스타일을 의미.
  다른 옵션으로는 STYLE_NO_TITLE, STYLE_NO_FRAME, STYLE_NO_INPUT 등이 있음
• 두 번째 매개변수
  theme은 다이얼로그에 적용할 스타일 리소스의 ID
  이 스타일은 바텀 시트 다이얼로그의 배경을 투명하게 만들거나 다른 시각적 속성을 변경하는 데 사용

아직 뒷배경이 남아있다

아직 뒷배경이 남아있다2

아직 뒷배경이 남아있다3

아직 뒷배경이 남아있다4

드디어 없어졌다.!

근데 글자에 색을 넣지 않으면 글자가 안보이는 오류가 또 발생함
왜 색을 넣어줘야 글자가 보이는지는 알아보자

windowBackground 색을 black으로 했을 때

디자인 참고 자료