[Android] Bottom Sheet view 커스텀 배경

Bottom Sheet

화면 하단에 나타나는 다이얼로그로 제스처를 이용해 뷰를 확장시키거나 닫을 수 있는 컴포넌트이다.

Bottom Sheet 는 다음 코드처럼 BottomSheetDialogFragment를 상속받는 것으로 구현할 수 있다. 아래 코드는 뷰 바인딩을 적용한 코드로 데이터 바인딩이나 findViewById 등을 사용해도 상관없다.

class ItemListDialogFragment : BottomSheetDialogFragment() {

    private lateinit var binding: FragmentItemListDialogListDialogBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {

        binding = FragmentItemListDialogListDialogBinding.inflate(inflater, container, false)
        return binding.root
    }
}

아래 코드는 BottomSheetDialog 에서 사용한 예시 코드로 높이가 360dp 이고 중앙에 파란색 사각형이 있는 레이아웃이다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	tools:context=".ItemListDialogFragment">

	<View
		android:layout_width="300dp"
		android:layout_height="300dp"
		android:background="@color/purple_500"
		android:layout_margin="30dp"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintTop_toTopOf="parent"
		app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Bottom Sheet 커스텀 배경

Bottom Sheet 를 구현할 때 모서리가 둥근 형태를 만들어야 할 때가 있다.
일반적으로 다음 drawable 파일을 작성해서 형태를 만들거라 생각한다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">

	<solid android:color="@color/purple_200" />

	<corners
		android:topLeftRadius="16dp"
		android:topRightRadius="16dp" />

</shape>

하지만 해당 drawable 을 Bottom Sheet 레이아웃의 background 속성으로 지정하면,
레이아웃의 형태는 변하지만 나머지 Bottom Sheet 영역은 흰색으로 표시되는 것을 볼 수 있다.

흰색으로 표시되는 부분을 없앨려면 테마와 스타일을 사용해야 한다.

Bottom Sheet 커스텀 테마 전체 적용

res/value/themes.xml 파일에 다음 내용을 작성한다.

메인 테마의 bottomSheetDialogTheme 속성은 Bottom Sheet 에서 사용할 테마를 지정할 수 있다.

그리고 Theme.MaterialComponents.Light.BottomSheetDialog 테마를 상속받는 커스텀 테마를 만들어 준다.
bottomSheetStyle 속성은 테마에서 사용할 Bottom Sheet 의 스타일을 지정할 수 있다.

마지막으로 Widget.Design.BottomSheet.Modal 스타일을 상속받는 커스텀 스타일을 만들고 android:background 속성으로 앞에서 작성한 drawable 을 지정하면 원하는 형태의 Bottom Sheet 를 만들 수 있다.

<resources xmlns:tools="http://schemas.android.com/tools">
	<style name="Theme.TestPlace" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
		...
		<!-- Customize your theme here. -->
		<item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialogTheme</item>
	</style>

	<!-- Bottom sheet dialog Style -->
	<style name="CustomBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
		<item name="bottomSheetStyle">@style/CustomRoundedBackgroundBottomSheet</item>
	</style>
	<style name="CustomRoundedBackgroundBottomSheet" parent="Widget.Design.BottomSheet.Modal">
		<item name="android:background">@drawable/dialog_rounded_background</item>
	</style>
</resources>

Bottom Sheet 커스텀 테마 개별 적용

다만 위 방법은 모든 Bottom Sheet 에 적용하는 방법으로 Bottom Sheet 마다 다른 방법을 적용하려면 Bottom Sheet 클래스에 onCreate 메서드를 오버라이드하고 setStyle 메서드를 실행해야 한다.

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