뱃지 드로어블(BadgeDrawable) - Fab 버튼에 숫자 추가하기

안녕하세요? 닉네임간편입니다. 이번 시간에는 뱃지 드로어블에 Fab 버튼을 추가하는 것에 대해서 다루겠습니다.

1. 개요

상용 서비스 앱에서 알람이 오면 앱 위에 숫자가 나타나는 걸 확인할 수 있습니다.

이처럼 아이콘 위에 중첩되어 숫자 혹은 어떤 정보를 표시할 수 있도록 하는 것이 바로 BadgeDrawable입니다.

2. 사용법

저는 FloatingActionButton에 badgeDrawable을 사용했습니다. 따라서 이 경우의 사용법에 대해서 설명드리겠으며, 코드는 다음과 같습니다.

binding.specificFab.viewTreeObserver.addOnGlobalLayoutListener(object: ViewTreeObserver.OnGlobalLayoutListener {
    @SuppressLint("UnsafeOptInUsageError")
    override fun onGlobalLayout() {
        badgeDrawable = BadgeDrawable.create(this@SpecificActivity)
        badgeDrawable!!.number= 0
        badgeDrawable!!.setVisible(false)
        badgeDrawable!!.horizontalOffset= 55
        badgeDrawable!!.verticalOffset= 55
        badgeDrawable!!.backgroundColor=resources.getColor(R.color.white)
        badgeDrawable!!.badgeTextColor=resources.getColor(R.color.bamin)
        BadgeUtils.attachBadgeDrawable(badgeDrawable!!, binding.specificFab, 
																				null)
        binding.specificFab.viewTreeObserver.removeOnGlobalLayoutListener(this)
    }
})

1) viewTreeObserver, GlobalLayoutListener

리스너를 등록해서 뷰 트리에서 전역적인 변화를 감지할 수 있도록 합니다. 이때 addOnGlobalLayoutListener를 사용하면 전체 뷰가 그려졌을 때 notice를 받아서 처리할 수 있습니다. 이때는 fab 버튼이 그려졌을 때 badgeDrawable을 위에 중첩시켜서 그려야 하므로 이렇게 구현했습니다.

옵저버 리스너를 등록한 후 변경이 있을 때는 1회성을 위해 removeOnGlobalLayoutListener() 메서드로 리스너를 제거해야 합니다. 만일 제거를 하지 않는다면 무한 리스너 호출에 빠질 수 있습니다.

[참조: https://faith-developer.tistory.com/188]

2) @SuppressLint("UnsafeOptInUsageError")

Lint(린트)는 구조적 문제로 인해 앱의 안정성과 효율성에 영향을 미치거나 코드 관리에 지장을 줄 가능성이 있는 코드를 찾을 수 있도록 해줍니다.

이때 안드로이드 프로젝트에서 클래스 또는 메서드의 린트 검사를 사용 중지하려면 코드에 @SuppressLint 주석을 추가합니다. 예를 들어 @SuppressLint("NewApi")를 추가하면 NewApi 문제의 린트 검사를 중지하고 개발자가 해당 API를 사용할 수 있도록 합니다.

이 코드에서 사용하는 BadgeUtils는 @Experimental 어노테이션으로 marked되어있습니다. 이 경우 Experimental API는 현재 API 레벨에서 ERROR를 보고할 수 있기 때문에, 이것의 린트 검사를 중지해야 합니다. 따라서 이 코드를 적어줍니다.

[참조: https://stackoverflow.com/questions/67262816/kotlin-issue-when-trying-to-cast-attachbadgedrawable-this-declaration-is-opt]

3) number

뱃지 드로어블에 표시될 숫자를 설정합니다.

4) setVisible

화면에 표시될지를 설정합니다.

5) horizontalOffset, verticalOffset

각각 가로, 세로로 이 뱃지가 부착될 anchor의 가운데를 기준으로 어떻게 배치될지를 결정합니다. 뱃지는 기본적으로 우측 상단에 배치되므로, 각각의 값이 커질수록 좌측 하단으로 이동합니다.

6) BadgeUtils.attachBadgeDrawable

이 뱃지를 원하는 곳에 배치합니다. 세번째 파라미터는 customBadgeParent로, 원하는 레이아웃이 있을 때 사용합니다.

아래처럼 Fab 버튼에 뱃지 드로어블이 적용됩니다.

3. 마무리

이번 시간에는 뱃지 드로어블에 대해서 다루고, 이를 Fab 버튼에 대해서 적용했습니다.

뱃지 드로어블은 많은 서비스에서도 잘 사용되기 때문에, 이번 기회에 잘 정리하셨으면 좋겠습니다.