android dialog fragment transparent 처리하기

이번 글에서는 android dialog fragment의 배경을 transparent로 처리하는 방법에 대해 알아보겠습니다.

 

dialog fragment가 투명해지지 않는다?

android 앱 개발 도중 bottom sheet 를 dialog fragment 이용해 구현하던 도중 배경 부분을 투명하게 처리하기 위한 방법을 찾아보고 있었습니다. layout을 투명으로도 해보고, 구글링에서 가장 많이 나오던 방법인 아래 코드를 여러 시점에서 호출해 보았습니다.

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

뜻대로 되지 않는 BottomSheet..

Bottom Sheet의 상단 부분에 위치한 회색 바 부분과 브랜드 영역 사이의 검정색 부분 보이시나요? 저 부분이 투명하게 처리 되도록 하는 것이 목표였습니다.

 

하지만,

 

onCreate()

onCreateDialog()

onCreateView()

onViewCreated()

 

어느 시점에 위 코드를 호출해도 dialog fragment의 배경은 투명이 되지 않았습니다.

 

그래서 dialog fragment의 ViewGroup과 View의 background 색상을 transparent 에서 red 로 바꿔가며 실험해 본 결과, layout의 배경을 바꾼다고 해결되는 문제가 아니었음을 알게 되었습니다.

 

이후 dialog를 이용할 때 라이브러리가 자체적으로 그려주는 무언가가 있을 것 같다는 느낌을 갖고 열심히 구글링을 해 본 결과, 다음 정보를 얻게 되었습니다.

 

기본 다이얼로그 생성 방식 대신 이렇게!

<style name="NewDialog">
  <item name="android:windowFrame">@null</item>
  <item name="android:windowBackground">@android:color/transparent</item>
  <item name="android:windowIsFloating">true</item>
  <item name="android:windowContentOverlay">@null</item>
  <item name="android:windowTitleStyle">@null</item>
  <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
  <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
  <item name="android:background">@android:color/transparent</item>
</style>

dialog 의 window style 및 background 속성을 transparent로 설정해줌으로 인해 기본 다이얼로그 생성 스타일을 따르지 않고 생성을 할 수 있도록 해줍니다.

 

이를 적용하기 위해 dialog fragment의 onCreateDialog 함수에서 다음과 같이 dialog를 생성해주었습니다.

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
	val dialog = BottomSheetDialog(requireContext(),R.style.NewDialog)
	return dialog
}

기존 onCreateDialog의 super.onCreateDialog()를 위와 같이 바꾸어 줍니다.

위 코드는 아래와 같이 써도 됩니다.

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
     return BottomSheetDialog(requireContext(),R.style.NewDialog)
}

이후 실행을 해보면 다음과 같이 원하는 화면이 나옵니다.

중앙의 회색바와 Bottom Sheet의 브랜드 부분 사이 공간의 background가 원하는 대로 transparent 가 되었습니다!