Bottom Sheet Dialog 구현하기

안드로이드에서 Bottom Sheet Dialog를 구현해보도록 하자. Bottom Sheet Dialog는 Bottom Sheet과는 다른 형식이다. 이름에서 알고 있듯이 마치 dialog를 띄우는 방식이다.

레이아웃 정의하기

우선 원하는 bottom sheet layout xml 파일부터 만든다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottomSheetDashBoardLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:behavior_hideable="true"
    app:behavior_draggable="true"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="400dp"
        android:text="bottomSheet Dialog"
        android:gravity="center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

예시에서는 간단한 텍스트파일을 띄우기로 해보자. 그리고 해당 라인을 추가한다.

app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"

• app:behavior_peekHeight을 통해 기본 높이를 설정할 수 있습니다.
• app:behavior_hideable는 dialog를 화면에 고정할지 안할지 정하는 조건이다.
  * 항상 표시하는 경우는 peekHeight만큼 높이를 갖는다.
• app:behavior_draggable는 사용자가 dialog의 높이를 손가락으로 조절할 수 있게 해주는 조건이다.

Activity 또는 Fragment 정의하기

다음과 같이 정의해주면 된다. 정의가 되면 show()를 통해 bottomSheetDialog를 띄울수있다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val bottomSheetView = layoutInflater.inflate(R.layout.bottom_sheet_layout, null)
        val bottomSheetDialog = BottomSheetDialog(this)
        bottomSheetDialog.setContentView(bottomSheetView)

        findViewById<Button>(R.id.button).setOnClickListener {
            bottomSheetDialog.show()
        }
    }
}

또한 setState를 통해 BottomSheet의 State을 변경할 수 있습니다. 명령어는 다음과 같다:
bottomSheetDialog.behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED

State 변경은 다음과 같다:

• STATE_COLLAPSED : height 만큼 보이게 됩니다.
• STATE_EXPANDED : 가득 차게 처리합니다.
• STATE_HIDDEN : 숨김 처리됩니다.

BottomSheet corner 변경하기

bottom sheet의 style를 변경하면 위와 같이 corner를 변경할 수 있다.

우선 원하는 모양을 정의해주고 drawable에 저장해준다. 여기서는 bottom_sheet_background로 정의해주도록 하겠다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white"/>
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />
    
</shape>

다음으로 style 또는 theme를 변경해주면 된다.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
		...
        <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
    </style>

    <style name="AppBottomSheetDialogTheme"
        parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/AppModalStyle</item>
    </style>

    <style name="AppModalStyle"
        parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/bottom_sheet_background</item>
    </style>
</resources>