tabLayoutCustomeTypeface.md

QUESTION: How to change Tab layout title to bold on selected?

ANSWER:

xml

<com.google.android.material.tabs.TabLayout
        android:id="@+id/fr_tab_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:tabIndicatorHeight="4dp"
        app:tabIndicator="@drawable/img_round_rect"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorColor="@color/main_blue"
        app:tabSelectedTextColor="@color/main_blue"
        app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fr_back_iv"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/fr_viewpager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/fr_header_divider"
        app:layout_constraintBottom_toBottomOf="parent"/>
        
  // img_round_rect
  
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/main_blue" />
    <corners
        android:bottomLeftRadius="100dp"
        android:bottomRightRadius="100dp"
        android:topLeftRadius="100dp"
        android:topRightRadius="100dp" />
</shape>

Kotlin

fr_viewpager.adapter = ReferralPagerAdapter(it, childFragmentManager)
fr_tab_layout.setupWithViewPager(fr_viewpager)
fr_tab_layout.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener {
    override fun onTabReselected(tab: TabLayout.Tab?) {
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
        ViewUtils.setRegularTypeFaceToTab(context, fr_tab_layout, tab)
    }

    override fun onTabSelected(tab: TabLayout.Tab?) {
        ViewUtils.setBoldTypeFaceToTab(context, fr_tab_layout, tab)
    }
})

// ViewUtils
class ViewUtils {
    companion object {
        fun setRegularTypeFaceToTab(context: Context?, tabLayout: TabLayout, tab: TabLayout.Tab?) {
            setTypefaceToTab(context, tabLayout, tab, R.font.avenir_next_regular)
        }

        fun setBoldTypeFaceToTab(context: Context?, tabLayout: TabLayout, tab: TabLayout.Tab?) {
            setTypefaceToTab(context, tabLayout, tab, R.font.avenir_next_bold)
        }

        private fun setTypefaceToTab(context: Context?, tabLayout: TabLayout, tab: TabLayout.Tab?, @FontRes fontID: Int) {
            if (tab != null && context != null) {
                try {
                    val layout = (tabLayout.getChildAt(0) as ViewGroup).getChildAt(tab.position) as LinearLayout
                    val tabTextView = layout.getChildAt(1) as TextView
                    tabTextView.typeface = ResourcesCompat.getFont(context, fontID)
                } catch (e: Exception) {
                    Timber.e("setTypefaceToTab: can't change font - Exception ${e.stackTrace}")
                }
            }
        }
    }
}