[JAVA][Android] CoordinatorLayout에서 BottomSheet 사용하기

안녕하세요.

오늘은 CoordinatorLayout을 이용해서 BottomSheet를 사용하는 방법에 대해 알아보겠습니다.

 

이전 글에서 BottomSheetDialogFragment를 사용하는 방법도 다루었으니, 관련된 내용은 아래 링크를 참고해주세요.

2024.07.15 - [안드로이드 자바] - [JAVA][Android] BottomSheetDialog 사용하기

[JAVA][Android] BottomSheetDialog 사용하기

 

1. 메인 레이아웃 작성하기

우선 coordinatorLayout를 루트뷰로 두고 레이아웃을 다음과 같이 작성합니다.

이때 중요한 것은, 본문에 해당하는 부분과 바텀 시트에 해당하는 부분을 서로 다른 레이아웃으로 감싸고, 바텀시트에 해당하는 부분에  BottomSheetBehavior를 설정해야 합니다.

또, 이 예제에서는 닫기 버튼을 눌렀을 때, 바텀시트가 완전히 사라지도록 할 것이기 때문에, app:behavior_hideable="true" 설정도 추가했습니다.

layout_main.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"
    tools:context=".MainActivity">

    <!-- 메인 컨텐츠 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <!-- 버튼을 누르면 Bottom Sheet가 나타납니다 -->
        <Button
            android:id="@+id/btn_open"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="50dp"
            android:text="바텀 시트 열기" />
    </LinearLayout>

    <!-- Bottom Sheet 레이아웃 -->
    <LinearLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="vertical"
        android:padding="16dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        app:behavior_hideable="true">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="바텀 시트 입니다."
            android:textSize="18sp" />

        <Button
            android:id="@+id/btn_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="20dp"
            android:text="바텀 시트 닫기" />
    </LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

 

2. 메인 액티비티 작성하기

 

이제 버튼을 클릭하면, 바텀시트가 사라졌다가 다시 생겨나도록 클릭리스너를 설정해줍니다.

\import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.bottomsheet.BottomSheetBehavior;

public class MainActivity extends AppCompatActivity {

    private BottomSheetBehavior<View> bottomSheetBehavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Bottom Sheet 설정
        View bottomSheet = findViewById(R.id.bottom_sheet);
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);

        // 열기 버튼 클릭 리스너 설정
        Button btnOpen = findViewById(R.id.btn_open);
        btnOpen.setOnClickListener(v -> {
            if (bottomSheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });

        // 닫기 버튼 클릭 리스너 설정
        Button btnClose = findViewById(R.id.btn_close);
        btnClose.setOnClickListener(v -> {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
        });
    }
}

 

 

(참고) BottomSheetBehavior의 설정과 관련된 자세한 내용은 아래 링크를 참고하세요.

https://github.com/material-components/material-components-android/blob/master/docs/components/BottomSheet.md

material-components-android/docs/components/BottomSheet.md at master · material-components/material-components-android

 

 

3. 시연영상