在 TabLayout 中的选项卡之间添加空格

Question

我正在尝试在选项卡之间添加空格。

我想在选项卡之间添加间隙，我尝试过使用填充，但这会改变整个选项卡布局的填充，而不是单个选项卡。我也尝试过其他方法，例如minWidth，在寻找一个想法但无法弄清楚的时候，所以我在这里。当我创建选项卡式布局活动时，大部分项目都是默认的，这是我添加/更改的代码：

提前致谢。

标签背景

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <corners
        android:radius="18dp"/>
    <!-- TabLayout background color -->
    <solid
        android:color="@color/colorPrimaryDark"/>

</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="18dp"/>
    <!-- color of the selected tab -->
    <solid
        android:color="@color/colorWhite"/>



</shape>

tab_selector

<?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/tab_selected"
     android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"

    android:state_selected="true"/>
    <!-- drawable for unselected tab -->
    <item
        android:drawable="@drawable/tab_background"
        android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp"

        android:state_selected="false"/>

</selector>

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        >

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:gravity="top|center_horizontal"
            android:minHeight="?actionBarSize"
            android:padding="@dimen/appbar_padding"
            android:text="@string/app_name"
            android:fontFamily="@font/sofiabold"
            android:background="@color/colorPrimary"
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:tabTextColor="@color/colorWhite"
            app:tabMode="auto"
            app:tabGravity="center"
            android:layout_gravity="center"
            android:background="@color/colorPrimary"
            app:tabBackground="@drawable/tab_selector"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabPaddingStart="16dp"
            app:tabPaddingEnd="16dp"
            android:paddingBottom="20dp"
            app:tabIndicatorHeight="0dp"
            app:tabRippleColor="@null"
            app:tabTextAppearance="@style/TabTextAppearance"/>
    </com.google.android.material.appbar.AppBarLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

您应该使用专门为此目的设计的 xml drawable - Inset Drawable：http://developer.android.com/guide/topics/resources/drawable-resource.html#Inset

例如：

res/drawable/tab_selector_inset.xml：

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/tab_selector"
    android:insetRight="10dp"
    android:insetLeft="10dp" />

并在您的TabLayout 中使用它：

app:tabBackground="@drawable/tab_selector_inset"

（灵感来自Vasily Sochinsky）

Answer 2

它已经很晚了，但它可能对其他人有用。如果您有标签（选择器）的自定义背景，您只需将图层列表添加到标签背景并为它们设置边距

选择器：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/bg_selected_tab" android:state_selected="true"/>
        <item android:drawable="@drawable/bg_unselected_tab"/>
    </selector>

选中的标签：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="8dp" android:left="8dp">
        <shape>
            <stroke android:width="1dp" android:color="@color/Green"/>
            <corners android:radius="@dimen/cardCornerRedius"/>
        </shape>
    </item>
</layer-list>

未选中的标签：

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:right="8dp" android:left="8dp">
            <shape>
                <stroke android:width="1dp" android:color="@color/Gray"/>
                <corners android:radius="@dimen/cardCornerRedius"/>
            </shape>
        </item>
    </layer-list>