How to reverse View Binding from custom tab layout in Android?

Question

I made a custom tab item for my tab layout and initialized it using view binding as follows:

val tabView = CustomTabBinding.inflate(LayoutInflater.from(mContext), null, false)
        tabView.tvCustomTabTitle.text = it.title
        tabView.tvCustomTabCount.visibility = View.GONE

Now when the user selects/unselects the tab I want to change the appearance of this custom view. Usually I achieved this using kotlin synthetics as follows:

fun setOnSelectView(tabLayout: TabLayout, position: Int = 0) {
    val tab = tabLayout.getTabAt(position)
    val selected = tab?.customView
    if (selected != null)
        selected.tv_custom_tab_title?.apply {
            setTextColor(mContext.getColorCompat(R.color.colorAccent))
            typeface = setFont(true)
        }
    selected?.tv_custom_tab_count?.apply {
        setBackgroundResource(R.drawable.bullet_accent)
        mContext.getColorCompat(android.R.color.white)
    }
}

But now how do I achieve this using view binding?

I am using the method of findViewById():

fun Context.setOnSelectView(tabLayout: TabLayout, position: Int = 0) {
val tab = tabLayout.getTabAt(position)
val selected = tab?.customView
if (selected != null){
    val title = selected.findViewById<TextView>(R.id.tv_custom_tab_title)
    val count = selected.findViewById<TextView>(R.id.tv_custom_tab_count)
    title.apply {
        setTextColor(getColorCompat(R.color.colorAccent))
        typeface = setFont(true)
    }
    count.apply {
        setBackgroundResource(R.drawable.bullet_accent)
        getColorCompat(android.R.color.white)  
    }
}
}

but I am hoping there is a better way to do this. If yes, then please do help me out.

score 1 · Answer 1 · answered Apr 24 '22 at 08:54

Late reply but this is how I used view binding for custom tab layout, hope it helps

custom_tab.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

  <TextView
    android:id="@+id/tv_custom_tab_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

  <TextView
    android:id="@+id/tv_custom_tab_count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

</LinearLayout>

your activity/fragment:

val tab = binding.tabLayout.getTabAt(position)
tab.setCustomView(R.layout.custom_tab)
val tabBinding = tab.customView?.let {
        CustomTabBinding.bind(it)
    }
tabBinding?.tvCustomTabTitle?.text = "your title here"

How to reverse View Binding from custom tab layout in Android?

1 Answers1