Bottom Sheet

1. 배경 덮개

뒤쪽 화면을 가려 바텀시트의 주목도를 높일 때 사용합니다.
배경 덮개가 나타난 뒤쪽 화면은 바텀시트가 사라지기 전까지 조작할 수 없습니다.

2. 컨테이너

배경 덮개를 제외한 바텀시트의 모든 구성 요소를 담은 영역입니다.
컨테이너 영역을 위 혹은 아래로 밀어 바텀시트를 펼치거나 접을 수 있습니다. 컨테이너 바깥 영역을 누르면 바텀시트가 빠르게 사라집니다. 

3. 핸들

바텀시트를 빠르게 제어하기 위해 누르거나 스와이프할 수 있는 영역입니다.
바텀시트가 펼칠 수 있을 때는 위 방향 ∧ 아이콘을, 접거나 완전히 닫을 수 있을 때는 아래 방향 ∨ 아이콘을 표시합니다.

조작할 수 있는 방향이 명확하지 않은 손잡이 사용

4. 타이틀

바텀시트에 담긴 콘텐츠의 목적이나 기능을 글로 안내합니다.

5. 닫기 버튼

바텀시트를 빠르게 닫을 수 있는 버튼입니다. 타이틀 오른쪽 끝에 배치됩니다. 단, 바텀시트에 핸들이 있을 때는 닫기 버튼을 노출하지 않습니다.

핸들과 닫기 버튼을 동시에 노출

또한, 바텀시트로 고객이 꼭 진행해야 하는 중요한 작업이나 바텀시트를 닫으면  다시 실행하기 어려운 작업을 안내할 때는 닫기 버튼을 생략할 수 있습니다.

다음 단계로 넘어가기 위해 반드시 확인해야 하는 내용을 핸들이나 닫기 버튼이 없는 바텀시트로 노출

6. 디바이더

본문 영역이 길어져 스크롤해야 할 때 타이틀과 본문의 경계를 시각적으로 구분하기 위해 활용할 수 있습니다.
본문이 길지 않거나 타이틀과 본문이 명확히 구분되어 보일 때는 가급적 디바이더를 쓰지 않습니다.

7. 버튼

바텀시트 내용과 관련된 주요 행동을 유도합니다.

1. 고정형 바텀시트

컨테이너의 세로 길이가 고정된 바텀시트입니다. 바텀시트를 펼칠 수 없으므로 콘텐츠가 가급적 화면 아래로 넘어가지 않게 구성합니다.
단, 드롭다운 리스트와 같이 지정된 높이 안에서 많은 양의 콘텐츠를 제공할 때는 컨테이너 영역을 스크롤이 가능하도록 만들 수 있습니다.

2. 확장형 바텀시트

고객의 조작에 따라 세로 길이가 변하는 바텀시트입니다. 지정된 높이 혹은 시스템 상태바를 제외한 전체 화면을 덮는 높이까지 펼쳐질 수 있습니다. 주로 제공하는 콘텐츠의 양이 많을 때 사용합니다.

나타나기와 사라지기

모든 바텀시트는 나타날 때 화면 아래쪽 바깥에서 위로 올라오며, 사라질 때는 화면 아래쪽 바깥으로 내려갑니다.

바텀시트는 다음과 같은 동작이 이루어질 때 사라집니다.

• 고정형 바텀시트의 핸들을 누를 때
• 닫기 버튼을 누를 때
• 바텀시트를 화면 아래쪽 끝까지 스와이프할 때
• 바텀시트 바깥 영역을 누를 때
• 진행 중인 작업이 끝났을 때
• 안드로이드 기기의 뒤로가기(Back)버튼을 누를 때

고정형 바텀시트의 핸들을 누를 때

바텀시트의 닫기 버튼을 누를 때

바텀시트를 화면 아래쪽 끝까지 스와이프 할 때

바텀시트 바깥 영역을 누를 때

펼치기와 접기

고객이 확장형 바텀시트의 핸들을 누르거나 위로 스와이프하면 지정한 높이만큼 펼쳐집니다.
펼쳐진 바텀시트의 핸들을 누르거나 아래로 스와이프하면 다시 접힙니다.