如何使选项卡项正确填充？

Question

我想在图像中制作像这个设计这样的自定义标签，我在这个问题上找到了那个案例的答案但是在应用它的解决方案之后我在图像中得到了我想要的结果要做的是为我使用的 tablayout 中的项目设置填充 app:tabPadding 但它没有任何区别。

这是我的实现

1-activity布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/tab_layout_bg"
        android:clipToPadding="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabBackground="@drawable/selector_tab"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/transparent"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabPadding="8dp"
        app:tabRippleColor="@null"
        app:tabSelectedTextColor="@color/black"
        app:tabTextColor="@color/black">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Order Tracking" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Order details" />
    </com.google.android.material.tabs.TabLayout>



</androidx.constraintlayout.widget.ConstraintLayout>

2 - selector_tab

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- drawable for selected tab -->
    <item
        android:drawable="@drawable/shape_tab_selected"
        android:state_selected="true"/>

    <!-- drawable for unselected tab -->
    <item
        android:drawable="@drawable/shape_tab_un_selected"
        android:state_selected="false"/>

</selector>

3 - shape_tab_selected

   <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- radius should be half of the desired TabLayout height -->
    <corners android:radius="10dp" />
    <solid android:color="@color/white"/>

</shape>

4 - shape_tab_un_selected

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- color of the selected tab -->
    <solid android:color="@android:color/transparent" />


</shape>

5 - tab_layout_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- radius should be half of the desired TabLayout height -->
    <corners android:radius="10dp" />
    <solid android:color="@color/colorGray"/>

</shape>

6 - 颜色

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="colorBlack">#F2F4F7</color>
<color name="colorGray">#F2F4F7</color>

Answer 1

我找到了解决方案，这里是

1 - 创建一个可绘制的选择器 (selector_tabs.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_tab_selected" android:state_selected="true"/>
    <item android:drawable="@color/transparent" android:state_selected="false"/>
</selector>

2 - 对于处于选定状态的可绘制对象 ic_tab_selected 创建矢量可绘制对象并使用比例和枢轴值来控制要应用的填充方式

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="174dp"
    android:height="42dp"
    android:viewportWidth="174"
    android:viewportHeight="42">
    <group
        android:scaleX="0.92"
        android:scaleY="0.90"
        android:pivotX="87"
        android:pivotY="21">
        <path
            android:pathData="M12,4L162,4A8,8 0,0 1,170 12L170,30A8,8 0,0 1,162 38L12,38A8,8 0,0 1,4 30L4,12A8,8 0,0 1,12 4z"
            android:fillColor="#ffffff"/>
    </group>

</vector>

3 - 在选项卡布局上使用

app:tabBackground="@drawable/selector_tabs"

Answer 2

如果您只是向选定的可绘制对象添加描边，也可以。

3 - shape_tab_selected

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke android:color="@color/colorGray"
    android:width="2dp"/>

    <!-- radius should be half of the desired TabLayout height -->
    <corners android:radius="10dp" />
    <solid android:color="@color/white"/>

</shape>

如何使选项卡项正确填充？

How to make tabs items padding correctly?

android

xml

material-design

android-tablayout

material-components-android