어떻게 해야 위아래로 swipe가 가능한 modal bottom sheet dialog fragment를 만들 수 있을까요?

Question

     

 

위 첫번째 사진에서 찜하기 버튼을 클릭하면 2번째 사진 처럼 modal bottom sheet가 나오고, 위 아래로 swipe가 가능하도록 하여, full screen 영역을 차지할 수도 있고 dismiss도 가능하도록 만들고 싶습니다.

그래서 저는 BottomSheetDialogFragment를 상속한 OnStoreBtmFragment를 만들고, 메인 Fragment에서 찜하기를 클릭했을 때, 

val onStoreBtmFragment = OnStoreBtmFragment()

onStoreBtmFragment.show(fragment.fragmentManager!!, "showing stored folders")

위 코드처럼 bottom sheet dialog fragment를 실행시켰습니다.

근데 아래 사진처럼 Fragment에 연결된 xml의 contents 높이만큼만 dialog가 나올뿐, 무슨 짓을 해도 그 dialog가 위로 swipe 되질 않습니다.. 아래로 swipe해서 dismiss 시키는 건 가능하구요ㅠㅠ

 

어떻게 해야 사진과 같은 2번째 사진과 같은 bottom sheet를 만들 수 있을까요??

간단한 조언이라도 해주시면 정말 도움이 많이 될 것 같습니다!ㅠㅠ

아래 코드는 BottomSheetDialogFragment의 xml 코드입니다.

?

<androidx.coordinatorlayout.widget.CoordinatorLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_height="match_parent"     android:layout_width="match_parent"     android:background="@color/transparentForBackground">   <LinearLayout app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:background="@color/whiteForBackground"     android:paddingHorizontal="16dp">       <LinearLayout         android:layout_width="match_parent"         android:layout_height="4dp"         android:orientation="horizontal"         android:gravity="center"         android:weightSum="1"         android:layout_marginVertical="8dp">           <View             android:layout_width="0dp"             android:layout_height="match_parent"             android:layout_weight="0.13"             android:background="@drawable/modal_line" />     </LinearLayout>       <RelativeLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:paddingVertical="8dp">           <androidx.appcompat.widget.AppCompatImageView             android:id="@+id/on_store_btn_close"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:padding="4dp"             android:layout_alignTop="@id/on_store_title"             android:layout_alignBottom="@id/on_store_title"             android:layout_alignParentStart="true"             android:adjustViewBounds="true"             android:src="@drawable/close_btn_img_black"             android:scaleType="centerInside"             android:tint="@color/black"/>           <TextView             android:id="@+id/on_store_title"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_centerInParent="true"             android:text="목록에 저장하기"             android:textSize="14sp"             android:textColor="@color/black"/>     </RelativeLayout>         <View         android:layout_width="match_parent"         android:layout_height="1dp"         android:layout_marginTop="16dp"         android:background="@drawable/modal_line"         android:layout_marginBottom="24dp"/>       <androidx.recyclerview.widget.RecyclerView         android:id="@+id/on_store_recycler_view"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:clipToPadding="false"         tools:listitem="@layout/recycler_view_on_store_item"/> </LinearLayout> </androidx.coordinatorlayout.widget.CoordinatorLayout>

 

Comments

BottomSheetBehaviour를 조정하면 될 것 같네요.

https://material.io/components/sheets-bottom/android#usage

위 페이지의 UsageSection에 가셔서 제일 비슷한 걸 사용해 보세요,.

---

behavior를 사용하는게 맞는 것 같아요.

다만 제가 다이얼로그를 show() 했을 때 childFragmentManager가 아닌 일반 프래그먼트 매니저를 사용했는데,
그것 때문인건지, behavior를 expanded로 설정해봐도 다이얼로그가 full screen을  차지하질 못하네요.

아직 해결중에 있는데 왠지 곧 해결할 수 있을 것 같습니다.

답변 감사합니다!

Answer 1

1. BottomSheetDialogFragment를 사용해서 modal bottom sheet을 구현하는 경우 layout xml에서 view에 layout_behavior 를 따로 지정할 필요는 없습니다. BottomSheetDialog 내부에서 알아서 처리합니다. 필요하면 BottomSheetDialog의 getBehavior로 가져와서 설정하면되구요. Behavior 상태의 기본값이 버전마다 약간 달랐던것 같은데 기본적으로 expanded일겁니다.

2. 일단 dismiss가 되는 것으로봐서 BottomSheetDialog가 정상적으로 뜬것 같습니다. 정상적으로 뜬 경우 behavior 상태값이 뭐든간에 drag했을때 펼쳐지는게 정상입니다. 펼쳐지는 공간은 설정한 content view의 height 만큼입니다. 그렇다면 layout xml의 height 처리에서 문제가 되는 것이 아닐까 싶습니다. 이 문제가 맞는지 확인하기 위해서 상단 layout의 크기를 고정 값으로 600dp 정도로 주고 600dp만큼 표시되는지 확인하면 됩니다. 문제가 확인된다면 layout만 잘 처리해주면 되겠지요. 대충 봤을때 match_parent만 다 써서는 정상적으로 처리 안되지 싶네요.

Comments

답변 감사합니다ㅠㅠ

오늘에야 해결했습니다..
내부적으로 framLayout안에 제 xml을 넣어서 다이얼로그를 띄우는 것 같더라구요. 그래서 다이얼로그의 parent를 참조해서 frameLayout의 크기를 코드상에서 match parent로 바꿔주니깐 full screen으로 swipe가 가능했어요.
진짜 고생 많이 했는데,, 처음부터 관련 공식 레퍼런스를 정독했으면 쉽게 해결할 수 있었을까 생각도 드네요.

말씀처럼 bottom sheet xml의 view에 behavior를 지정하니까 bottom sheet 안에서 따로 움직이길래 그부분은 삭제했습니다.

답변 다시 한번 감사드립니다!