Android - Custom tab header with broken event propagation on icon

Question

I have a custom layout as a the tab header in my TabLayout.
In the layout I have a TextView displaying an icon and another TextView displaying a text.

If I click on the icon the TabLayout will not display that tab.
If I click somewhere else on the tab, on the text for instance, the TabLayout will display that tab.

Fragment.xml

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tlTabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        app:tabIndicatorColor="@color/white"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/black" />

tab_item_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- Icon -->
    <TextView style=""@style/some_style
        android:id="@+id/tvIcon"
        android:layout_width="20sp"
        android:layout_height="20sp"
        android:layout_gravity="center"
        android:background="@color/transparent"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:text="@string/some_icon" />

    <!-- Name -->
    <TextView style="@style/Theme.SubTitle2"
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/White74"
        android:text="Name" />
</LinearLayout>

Fragment.kotlin

TabLayoutMediator(tlTabs!!, viewPager!!) { tab, position ->
    val layoutInflater = LayoutInflater.from(context)
    val view: View = layoutInflater.inflate(R.layout.tab_item_header, null)
    val tvIcon = view.findViewById(R.id.tvIcon) as TextView
    val tvName = view.findViewById(R.id.tvName) as TextView

    tvIcon.text = someMethodToGetCodeForIcon()
    tvName.text = resources.getString(fragmentList[position].second)

    tab.setCustomView(view)
}.attach()

What could be the problem?
How to fix this?
Has this something to do with event propagation for someway don't work on the icon TextView?

score 0 · Answer 1 · answered Nov 17 '22 at 12:38

I found the solution!

android:duplicateParentState="true"
android:clickable="false"

In the tab_item_header.xml

enter code here
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- Icon -->
    <TextView style=""@style/some_style
        android:id="@+id/tvIcon"
        android:layout_width="20sp"
        android:layout_height="20sp"
        android:layout_gravity="center"
        android:background="@color/transparent"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:text="@string/some_icon"
        android:duplicateParentState="true"
        android:clickable="false" />

    <!-- Name -->
    <TextView style="@style/Theme.SubTitle2"
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/White74"
        android:text="Name"
        android:duplicateParentState="true" />
</LinearLayout>
dsvsv

Android - Custom tab header with broken event propagation on icon

1 Answers1