[Android] Floating Action Button과 BadgeDrawable

이런 느낌으로..

우리가 흔히 알고, 쓰고 있는 floating action button

오늘은 이 플로팅 액션 버튼 위에 이벤트가 있음을 알리는 배지를 달아볼 것이다.

 

 

 

BadgeDrawable

배지에 대한 모든 레이아웃 및 그리기 로직이 포함되어 있다.

Badge

- 앱에 이벤트가 있거나 할 때 알림을 알리기 위해 표시하는 것

 

 

기본적인 형태

배지를 나타내기 위한 기본적인 코드는 아래와 같다.

val badgeDrawable = BadgeDrawable.create(mContext)
badgeDrawable.isVisible = true
BadgeUtils.attachBadgeDrawable(badgeDrawable, binding.mainFab)

 

커스텀하기

badgeDrawable.number = 24
badgeDrawable.verticalOffset = 20
badgeDrawable.horizontalOffset = 50
badgeDrawable.backgroundColor = resources.getColor(R.color.purple_200, null)

• number : 배지에 나타낼 숫자를 설정
• verticalOffset : 배지를 앵커(여기서는 binding.mainFab 가 됨) 중심 쪽으로 수직으로 이동하는 정도 (픽셀) 설정
• horizentalOffset : 배지를 앵커 중심 쪽으로 수평으로 이동할 정도 설정
• backgroundColor : 배지의 배경색상 설정

offset의 경우 단위가 픽셀이므로 다른 크기의 화면에서 볼 경우 원하는 위치에 나타나지 않을 수 있음을 유의해야한다.

이외에도 다양한 속성이 있으니 자세한 것은 공식문서를 참고하면 된다!