如何修改TabLayout中选中TabItem的高度？

当然可以实现！你要的选中Tab突出顶部的效果，不需要复杂的自定义View，通过自定义Tab背景Selector配合TabLayout的几个属性设置就能搞定，核心思路是让选中Tab的背景突破TabLayout的顶部边界，具体步骤如下：

1. 修改TabLayout布局属性 #

首先给TabLayout添加允许子View超出边界的属性，同时保留你原有的基础配置：

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorHeight="0dp"
    <!-- 关键属性：允许Tab的背景超出TabLayout边界 -->
    android:clipChildren="false"
    android:clipToPadding="false"
    <!-- 替换为我们自定义的背景Selector -->
    app:tabBackground="@drawable/tab_selected_background" />

2. 自定义Tab背景Selector #

在drawable文件夹下创建tab_selected_background.xml，通过layer-list实现选中Tab的顶部突出效果：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态：顶部额外延伸一段高度 -->
    <item android:state_selected="true">
        <layer-list>
            <!-- 顶部突出的矩形，高度设为你想要的额外高度（比如10dp），top设为负数让它超出TabLayout -->
            <item android:top="-10dp" android:left="0dp" android:right="0dp">
                <shape android:shape="rectangle">
                    <!-- 颜色和TabLayout背景一致，保证视觉统一 -->
                    <solid android:color="?attr/colorPrimary" />
                </shape>
            </item>
            <!-- Tab主体背景，选中时的颜色 -->
            <item android:top="0dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/selected_tab_color" />
                </shape>
            </item>
        </layer-list>
    </item>

    <!-- 未选中状态：和TabLayout背景保持一致 -->
    <item android:state_selected="false">
        <shape android:shape="rectangle">
            <solid android:color="?attr/colorPrimary" />
        </shape>
    </item>
</selector>

3. 优化文字对齐（可选） #

为了让Tab内的文字和突出部分更协调，可以给Selector的选中/未选中项添加padding，调整文字位置：

<!-- 修改选中状态的item，添加paddingTop -->
<item android:state_selected="true" android:paddingTop="0dp">
    <!-- 内部layer-list不变 -->
</item>

<!-- 修改未选中状态的item，添加paddingTop -->
<item android:state_selected="false" android:paddingTop="10dp">
    <!-- 内部shape不变 -->
</item>

原理说明 #

• clipChildren="false"：关闭TabLayout的子View边界裁剪，让选中Tab的背景可以向上超出TabLayout的范围
• 选中状态的layer-list通过负数top值，让顶部矩形延伸到TabLayout外部，视觉上就形成了选中Tab更高的效果
• 颜色统一：突出部分的颜色和TabLayout背景一致，避免突兀感

如果你的项目已经迁移到AndroidX，记得把android.support.design.widget.TabLayout替换为com.google.android.material.tabs.TabLayout，其他逻辑完全一致。

内容的提问来源于stack exchange，提问作者lucas.mdo