[안드로이드 프로그래밍] Material3 - Bottom sheets

Bottom sheets

---

밑에서 위로 올라오는 화면

1. bottom sheet 구성

---

• res > layout 에 자유롭게 layout 구성
  • BottomSheetDragHandleView
    • view 배치하여 사용

속성 설정

• layout_behavior → bottom_sheet_behavior
  - 최상위 layout에 설정
  
• style
  • 최상위 layout에 설정 → Widget.Material3.BottomSheet
    

📍 bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottomSheet"
    style="@style/Widget.Material3.BottomSheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <view
        android:id="@+id/view"
        class="com.google.android.material.bottomsheet.BottomSheetDragHandleView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/buttonBottom1"
        style="@style/Widget.Material3.Button.TextButton.Icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:textAlignment="viewStart"
        app:icon="@drawable/add_24px" />

    <Button
        android:id="@+id/buttonBottom2"
        style="@style/Widget.Material3.Button.TextButton.Icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:textAlignment="viewStart"
        app:icon="@drawable/search_24px" />

    <Button
        android:id="@+id/buttonBottom3"
        style="@style/Widget.Material3.Button.TextButton.Icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:textAlignment="viewStart"
        app:icon="@drawable/settings_24px" />
</LinearLayout>

2. activity 화면 구성

---

• CoordinatorLayout 배치
  • bottom sheet 배치
    • include 배치하여 layout = bottom_sheet.xml 사용
      

속성 설정

• layout_behavior → bottom_sheet_behavior
  - 최상위 layout에 설정
  
• style
  • 최상위 layout에 설정 → Widget.Material3.BottomSheet
    
• behavior_peekHeight : 뷰가 접힌 상태의 높이
  • 설정하지 않은 경우 auto로 설정

📍 activity.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Large" />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="ShowBottomSheet" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="HideBottomSheet" />

    </LinearLayout>

    <include
        android:id="@+id/include"
        layout="@layout/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.Material3.BottomSheet"
        app:layout_behavior="@string/bottom_sheet_behavior"
        app:behavior_peekHeight="50dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. activity 기능 구현

---

• BottomSheet 행동 관리 객체

val sheetBehavior = BottomSheetBehavior.from(include.bottomSheet)

• BottomSheet 없애기

sheetBehavior.isHideable = true
sheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN

• BottomSheet 접기

sheetBehavior.isHideable = false
sheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED

• BottomSheet isHideable 값에 따라 접거나 없애기

if(sheetBehavior.isHideable){
	sheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN
} else {
	sheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
}

• BottomSheet 나타나기

sheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED

• BottomSheet 항목을 선택한 경우 BottomSheet 내리기

buttonBottom1.setOnClickListener {

	// BottomSheet 항목을 누른 경우 수행할 기능 코드 작성
    
	if(sheetBehavior.isHideable){
		sheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN
	} else {
		sheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
	}
}

🎞️ 실행 영상

---