Android TabLayout with custom view tabs - icon click doesn't switch the tab

Question

I have a tabsLayout with three tabs, each containing a custom view with an ImageView and a TextView. When I want to switch tabs and I click one of them, if I click outside the icon, they switch properly. However, when I click the icon, they don't switch. How can I fix this?

I tried with focusable=false, but it didn't work for me.

My custom view:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/customButton"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:clickable="false"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:alpha="0.5"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_height="0dp"
        android:layout_weight="4"
        android:clickable="false"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:background="@android:color/transparent"
        android:onClick="airspacesButtonOnClick"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        android:tint="@color/colorIcons"/>

    <TextView
        android:id="@+id/string"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:clickable="false"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:textAlignment="center"
        android:textSize="12sp" />
</LinearLayout>

My TabLayout:

<android.support.design.widget.TabLayout
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      android:layout_height="80dp"
      app:tabIndicatorColor="@color/colorButton"
      app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
      app:tabMode="fixed"
      app:tabGravity="fill"/>
<android.support.v4.view.ViewPager
      android:id="@+id/viewpager"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_behavior="@string/appbar_scrolling_view_behavior" />

And finally my java code:

int[] iconIds = {R.drawable.ic_profile, R.drawable.ic_plane, R.drawable.ic_document};
int[] labelIds = {R.string.menu, R.string.menu, R.string.menu};
View customView;
for (int i = 0; i < tabLayout.getTabCount(); i++) {
customView = getActivity().getLayoutInflater().inflate(R.layout.custom_icon, null);
customView.findViewById(R.id.icon).setBackgroundResource(iconIds[i]);

((TextView) customView.findViewById(R.id.string)).setText(labelIds[i]);
tabLayout.getTabAt(i).setCustomView(customView);

Answer 1

You try to make your ImageView unclickable by setting clickable to false but using onClick overrides it and your ImageView becomes clickable again. That's why a click on ImageView is consumed by the ImageView itself and not propagated to its parent. So this line in ImageView of your custom tab layout should be removed:

android:onClick="airspacesButtonOnClick"

Except this line, it worked for me with the given code and layouts.