[Android, Kotlin] Bottom Sheet Dialog 구현

by

Bottom Sheet Dialog

Bottom Sheet Dialog는 하단에서 슬라이드 애니메이션으로 나타나는 다이얼로그다.

버튼을 선택시 BottomSheetDialog가 출력되고 BottomSheetDialog에서 Dismiss를 선택하면 다이얼로그가 사라지는 프로그램을 구현한다.

구현

themes.xml

Bottom Sheet Dialog 뒤 액티비티를 반투명 처리하는 테마를 사용하기 위해 아래 코드를 추가한다.

<style name="BottomSheetDialogTheme" parent="Theme.Design.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/BottomSheetStyle</item>
</style>

<style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="background">@android:color/transparent</item>

bottom_sheet_background.xml

Dialog의 색, 모양 등을 정한다.

Radius로 모서리를 라운딩처리한다.

<?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="10dp"
        android:topRightRadius="10dp"/>
</shape>

layout_bottom_sheet.xml

위에서 만든 bottom_sheet_background.xml을 배경으로 적용한다.

Dialog에 텍스트뷰와 버튼을 추가한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	...
    android:background="@drawable/bottom_sheet_background">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Hello World"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Dismiss"/>

</LinearLayout>

activity_main.xml

Dialog를 출력하기 위한 버튼을 추가한다.

...
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
...

MainActivity.kt

버튼을 선택했을 때 다이얼로그를 출력한다.

button.setOnClickListener{
    // bottomSheetDialog 객체 생성
    val bottomSheetDialog = BottomSheetDialog(
        this@MainActivity, R.style.BottomSheetDialogTheme
    )
    // layout_bottom_sheet를 뷰 객체로 생성
    val bottomSheetView = LayoutInflater.from(applicationContext).inflate(
        R.layout.layout_bottom_sheet,
        findViewById(R.id.bottomSheet) as LinearLayout?
    )
    // bottomSheetDialog의 dismiss 버튼 선택시 dialog disappear
    bottomSheetView.findViewById<View>(R.id.button).setOnClickListener {
        bottomSheetDialog.dismiss()
    }
    // bottomSheetDialog 뷰 생성
    bottomSheetDialog.setContentView(bottomSheetView)
    // bottomSheetDialog 호출
    bottomSheetDialog.show()
}

build.gradle

만약 아래 라인이 없을 시 추가

dependencies {
...
    implementation 'com.google.android.material:material:1.6.1'
...
}

전체 코드

https://github.com/HydroponicGlass/2021_Example_Android/tree/main/BottomSheetDialog

Leave a Comment