[Android/Kotlin] Custom BottomSheetDialogFragment : 상단 라운드 뷰, interface를 이용한 동적 이벤트 처리, navigation bar color 문제

 

여러 상황에서 동일한 형태의 바텀시트가 사용되는데,

내용이 다르다고 매번 새로 만들지 않도록 재사용이 가능한 커스텀 바텀시트를 만들었다.

디자인은 위와 같이 상단은 라운드로 들어가고

내부에 이름과 클릭 이벤트가 다른 두개의 텍스트뷰 영역이 있다.

 

이 부분을 컴포넌트로 만들어서 여러 화면에서 

타이틀과 이벤트를 설정할 수 있도록 코드를 작성했다.

아래 컴포넌트를 만드는 과정에서 생긴 귀여운 문제와 전체 코드가 있다.

 

 

[문제]

짜잔! 하고 만들었는데 아니이게 뭐야,,,,

아래 네비게이션바가 요상방구한 색상이 됐다.  

 

정상으로 돌려주기 위해 style 값에 아래 코드를 추가해주면 배경색에 맞게 변경된다!

<item name="android:windowIsFloating">false</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">?android:colorBackground</item>

 

잘 반영된걸 볼 수 있다! 

 

[ 전체 코드]

style.xml

<style name="RoundCornerBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/RoundCornerModalStyle</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">?android:colorBackground</item>
    </style>

    <style name="RoundCornerModalStyle" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/back_white_round_top_16dp</item>
    </style>

 

ModalBottomSheetDialog.kt

class ModalBottomSheetDialog(private var menu : List<String>) : BottomSheetDialogFragment() {

    private lateinit var binding : LayoutBottomSheetDialogBinding
    private lateinit var dialogInterface: ModalBottomSheetDialogInterface

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        super.onCreateView(inflater, container, savedInstanceState)
        binding = LayoutBottomSheetDialogBinding.inflate(inflater, container, false)
        return binding.root
    }

    companion object {
        const val TAG = "ModalBottomSheet"
    }

    interface ModalBottomSheetDialogInterface {
        fun onFirstClickListener()
        fun onSecondClickListener()
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.firstBtn.text = menu[0]
        binding.secondBtn.text = menu[1]

        binding.firstBtn.setOnClickListener {
            dialogInterface.onFirstClickListener()
        }

        binding.secondBtn.setOnClickListener {
            dialogInterface.onSecondClickListener()
        }
    }

    fun setDialogInterface(dialogInterface: ModalBottomSheetDialogInterface) {
        this.dialogInterface = dialogInterface
    }
}