[안드로이드] TabLayout.Tab 레이아웃에 커스텀뷰 세팅 + 뷰 추가하기

배경

TabLayout의 특정 탭에만 api에서 받아온 이미지를 노출시키면서

기존에는 tab.customView를 세팅해서 탭 뷰를 통째로 새로 그렸다.

val tabDataList : List<TabData> // tab data

//..

with (binding) {
    tabs.setupWithViewPager(viewPager)
    
    for (i in 0 until tabs.tabCount) {
        val tab = tabs.getTabAt(i)
        val tabData = tabDataList[i]
        
        if (!tabData.imgPath.isNullOrEmpty()) {
            // 이미지 정보가 있을 때만 커스텀뷰로 노출
            val imageCustomBinding =
            ViewGnbImageCustomBinding.inflate(layoutInflater, tab?.view, false)
            imageCustomBinding.image.updateLayoutParams<ConstraintLayout.LayoutParams> {
                dimensionRatio = "${tabData.imgWidthRatio}:1"
            }
            Glide.with(this@MainActivity)
                .load(tabData.imgPath)
                .into(imageCustomBinding.image)
                
            tab?.customView = imageCustomBinding.root
        }
    }
}

UI가 수정되면서 텍스트 우측에 new 불렛 이미지만 노출시키면 되도록 바뀌었다.

그래서 TabLayout.Tab의 레이아웃에 코드로 생성한 뷰를 추가하는 코드를 넣었다.

MainActivity.kt

val tabDataList : List<TabData> // tab data

//..

with (binding) {
    tabs.setupWithViewPager(viewPager)
    
    for (i in 0 until tabs.tabCount) {
        val tab = tabs.getTabAt(i)
        val tabData = tabDataList[i]
        
        if (tabData.scheme == TabScheme.NEW) {
            // 카드뷰로 간단하게 만든 불렛 UI
            val bulletView = CardView(ContextThemeWrapper(this@MainActivity, R.style.BulletDotCardView), null, 0).apply {
                layoutParams = LinearLayout.LayoutParams(4.toPx, 4.toPx).apply {
                    bottomMargin = 8.toPx
                    leftMargin = 1.toPx
                    // 디자인가이드의 dp값 반영
                }
            }
            // TabLayout.Tab 뷰는 Vertical LinearLayout 으로 되어있다
            (tab?.view as? LinearLayout)?.let {
                // 불렛을 우측에 붙이기 위해 orientation 수정
                it.orientation = LinearLayout.HORIZONTAL
                it.addView(bulletView)
            }
        }
    }
}

inline val Int.toPx: Int
    get() = (this * Resources.getSystem().displayMetrics.density).toInt()

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="BulletDotCardView" parent="CardView">
        <item name="android:elevation">0dp</item>
        <item name="cardElevation">0dp</item>
        <item name="android:backgroundTint">#FF0000</item>
        <item name="android:radius">4dp</item>
    </style>
</resources>

style 태그 안에 margin 을 적용하면 반영되지 않는다.