[Android] Snackbar / 스낵바 사용해보기

 

 

 

이번 포스팅에서는 Snackbar에 대해 알아보고 직접 사용해본다.

 

 

 

---

 

 

 

✅ Snackbar ?

 

출처 : Snackbar 공식 문서

 

 

화면 하단에 표시되는 간단한 알림 역할의 위젯이다.

사용자 환경을 중단하지 않고 새로운 작업을 제공할 수 있다.

 

 

 

Toast와 상당히 유사하지만, 차이점 또한 존재한다.

- Snackbar에 포함된 액션 버튼을 통해 상호작용을 할 수 있다.
- Material Design을 기반으로 하여 비교적 깔끔한 사용자 경험을 제공할 수 있다.
- Service 등 UI가 존재하지 않는 환경에서는 사용할 수 없다.

 

 

 

공식 문서에서는 다음과 같은 사례에서 스낵바를 사용할 것을 권장한다.

- 작업 확인: 사용자가 실행한 어떠한 작업 직후에 '실행 취소'를 제공하는 스낵바 표시
- 네트워크 상태: 인터넷 연결이 끊어지면 현재 네트워크 상태가 오프라인임을 표시
- 데이터 제출: 양식을 제출하거나 설정을 업데이트하면 변경사항이 저장되었다는 알림을 표시

 

 

 

일반적인 Toast 위젯으로도 위 기능을 충분히 커버할 수 있다고 생각할 수 있지만,

공식문서에서도 Toast 보다 Snackbar 사용을 권장하고 있는 추세다.

 

Toast 공식 문서에서조차 Snackbar를 권장하는 모습

 

 

이제 Snackbar를 직접 사용해보자.

 

 

 

 

 

 

✅ 실습

 

Toast 사용법과 굉장히 유사하여 어렵지 않게 구현할 수 있다.

기본적인 문법은 다음과 같다.

Snackbar.make(bind.root, "스낵바 등장", Snackbar.LENGTH_SHORT)
  .setAction("확인") {
    Toast.makeText(this, "스낵바 액션", Toast.LENGTH_SHORT).show()
  }
  .show()

 

● make(View, Message, Duration)

- View : 스낵바를 표시할 기준이 되는 View를 입력해준다.

위 처럼 루트 뷰를 전달해도 되고, 버튼 클릭 이후 동작한다면 해당 버튼을 전달해도 무방하다.

- Message : 스낵바에 표시할 메세지를 입력해준다.

- Duration : 스낵바의 지속시간이다. Toast와 마찬가지로 Long, Short 선택해주면 된다.

 

● setAction(Message)

스낵바에 표시되는 액션 버튼의 메세지를 입력해주고,

람다 표현식으로 클릭 이벤트를 작성해주면 된다.

위 예제에서는 간단히 Toast 메세지를 표시해주었다.

 

 

 

 

 

 

✅ 결과

 

버튼 클릭 시 스낵바를 표시하도록 구현했다.

 

 

Material Design이 적용된 UI를 자랑하는 스낵바가 표시되었다.

 

 

 

확인 버튼을 누르면

 

 

setAction()에 정의한 이벤트가 발생되는 것을 확인할 수 있다.

 

 

 

 

 

 

🎈 번외 1 - 애니메이션

 

직접 구현해봤다면 느끼겠지만, 스낵바에는 애니메이션 효과가 적용되어 있다.

 

 

점점 커지는 Scale, 투명도가 높아지는 Alpha가 적용된 것으로 보인다.

 

Toast에는 Alpha 애니메이션만 적용되어 있는데,

스낵바에는 Scale까지 적용되어 있어서 훨씬 부드럽게 등장한다고 느껴진다.

 

 

 

 

 

 

🎈 번외 2 - 문구 최대 길이 ?

 

스낵바에 몇 글자의 텍스트까지 입력할 수 있는지 궁금하여 테스트를 진행해보았다.

 

 

최대 2줄로 제한되어 있으며,

2줄이 넘어가면 말줄임(...) 처리가 자동으로 적용되는 모습이다.

 

 

 

 

 

 

🎈 번외 3 - 커스텀

 

UI 관련 위젯이다보니, 간단한 커스텀은 지원한다.

 

Snackbar
  ...
  .setBackgroundTint(ContextCompat.getColor(this, R.color.blue))
  .setTextColor(Color.WHITE)
  .show()

 

 

위 처럼 배경 색상과 텍스트 색상 등을 변경해 줄 수 있다.

 

 

 

 

 

 

✅ 정리

 

	Snackbar	Toast
상호 작용 여부	액션 버튼 지원	불가능
디자인	Material Design	기본
수명	연결된 View가 사라지면 함께 소멸	독립적으로 사용 가능
용도	포그라운드 환경에 적합	백그라운드 환경에 적합

 

 

---

 

 

 

 

그 동안 팝업 메세지는 항상 Toast를 이용해왔다.

이제부터는 각 팝업 메세지를 상황에 맞게 사용할 것 같다.