Dialog 를 사용할 때, 다이어로그 내에서도 프래그먼트 전환을 해야하는 경우가 있습니다. (예를 들면 튜토리얼, 회원가입 등 단계별 UI를 구현해야 할 때)

일반적으로 프래그먼트를 전환하기 위한 코드를 작성하게 됩니다.

childFragmentManager.beginTransaction().replace(R.id.container, fragment).commit()

BottomSheetDialogFragment 내에서 위 코드 처럼 작성한다면, 아래 사진 처럼 의도하지 않은 위치에 Fragment가 배치됩니다.

해결 방법은 간단합니다. Fragment가 위치하고자 하는 container의 ID를 “container” 이외의 것으로 교체하면 됩니다.

childFragmentManager.beginTransaction().replace(R.id.fragment_container, fragment).commit()

다음과 같이 올바르게 프래그먼트가 배치되는 것을 볼 수 있습니다.

원인은 바로 해당 라이브러리에서 이미 저 “container” 라는 ID를 사용중이기 때문입니다. 아무리 검색해봐도 같은 문제를 겪는 사람을 보지 못해서 BottomSheetDialogFragment 구현부를 뒤져보았습니다.

그렇게 찾아낸 라이브러리 내부의 design_bottom_sheet_dialog.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

  <androidx.coordinatorlayout.widget.CoordinatorLayout
      android:id="@+id/coordinator"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="true">

    <View
        android:id="@+id/touch_outside"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:focusable="false"
        android:importantForAccessibility="no"
        android:soundEffectsEnabled="false"
        tools:ignore="UnusedAttribute"/>

    <FrameLayout
        android:id="@+id/design_bottom_sheet"
        style="?attr/bottomSheetStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|top"
        app:layout_behavior="@string/bottom_sheet_behavior"/>

  </androidx.coordinatorlayout.widget.CoordinatorLayout>

</FrameLayout>

최상위에 위치한 FrameLayout의 id가 “container”인 것을 볼 수 있습니다. 😃

혹시라도 같은 문제를 겪고 계시다면 도움이 되셨길 바랍니다.