Android Tablayout样式修改_android 设置tablayout选中和未选中的样式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41650019/article/details/127115861

本文介绍了如何实现Android TabLayout的小图标指示器样式，包括选中和未选中状态的drawable绘制，颜色设置，以及通过调整属性实现紧凑的布局效果。提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android Tablayout样式修改

一、需求

在这里插入图片描述
这是TabLayout的样式需求:这个样式就类似于简单图片的指示器，特点就是比较小，不像之前写的带有文字的tablayout

二、实现

1.首先需要绘制两个drawable，用来制定drawable的形状
这个drawable是蓝色指示器—选中的形状
tab_bottom_indicator_select.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center_horizontal">
        <shape>
            <size android:width="10dp" android:height="4dp"/>
            <corners android:radius="2dp"/>
        </shape>
    </item>
</layer-list>

这个是drawable是灰色指示器—未选中的形状
tab_bottom_indicator_unselect.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center_horizontal">
        <shape>
            <size android:width="6dp" android:height="4dp"/>
            <corners android:radius="2dp"/>
            <solid android:color="#606266"/>
        </shape>
    </item>
</layer-list>

TabLayout的属性设置

选中指示器的形状设置

对于TabLayout中tabIndicator属性，drawable的颜色填充是无效的，只能用drawable的形状

app:tabIndicator="@drawable/tab_bottom_indicator_select"

未选中指示器的形状设置–即默认形状

 app:tabBackground="@drawable/tab_bottom_indicator_unselect"

2.指示器形状已经绘制好，现在需要填充颜色
选中的颜色属性

app:tabIndicatorColor="@color/blue"

这时候绘制出来的两个tab之间的间距比较大，而我们需要间距调小

  app:tabMaxWidth="12dp"

设置这个属性就好了

三、整体代码设置

<com.google.android.material.tabs.TabLayout
    android:layout_width="wrap_content"
    android:layout_height="4dp"
    app:tabBackground="@drawable/tab_bottom_indicator_unselect"
    app:tabGravity="center"
    app:tabIndicator="@drawable/tab_bottom_indicator_select"
    app:tabIndicatorColor="@color/blue"
    app:tabIndicatorGravity="top"
    app:tabIndicatorHeight="4dp"
    app:tabMaxWidth="12dp"
    app:tabMode="fixed" />

完成，撒花