在TabLayout下面添加一条线

Question

我尝试在TabLayout下方添加一条线，但它必须位于选择器线后面。应该是这样的：

我已经尝试添加一个自定义视图，但每个选项卡内都有一些边距，所以没有成功。

有什么想法吗？

这是我现在得到的：

这是我在XML中添加它的方式：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    app:tabBackground="@color/white"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabTextColor="@color/white"/>

以下是我通过代码实现的内容：

private void configureTabLayout() {
    TabLayout.Tab tabHome = mTabLayout.newTab().setIcon(R.drawable.ic_home_cinza);
    TabLayout.Tab tabEmprestimos = mTabLayout.newTab().setIcon(R.drawable.ic_emprestimos_cinza);
    TabLayout.Tab tabPersonal = mTabLayout.newTab().setIcon(R.drawable.ic_usuario_cinza);

    View root = mTabLayout.getChildAt(0);
    if (root instanceof LinearLayout) {
        ((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        GradientDrawable drawable = new GradientDrawable();
        drawable.setColor(getResources().getColor(R.color.silver));
        drawable.setSize(2, 1);
        ((LinearLayout) root).setDividerPadding(10);
        ((LinearLayout) root).setDividerDrawable(drawable);
    }

    mTabLayout.addTab(tabHome);
    mTabLayout.addTab(tabEmprestimos);
    mTabLayout.addTab(tabPersonal);
    mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
}

- Felipe Castilhos

---

但每个选项卡内部都有一些边距，您想将该行添加到选项卡内部还是仅在选项卡按钮下方？ - Charuක

应该与上面的图像完全相同。我真的很苦恼。 - Felipe Castilhos

仍然不明白 xoxo。我看到下面的绿色选择器，但是没有任何东西：[ - Charuක

你知道绿线旁边的灰线吗？那就是我需要的。绿线应该在它上面移动。如果我表达不清楚，对不起。 - Felipe Castilhos

嗨，我只需要底部的水平线，不需要垂直分隔线。而且我正在使用透明背景。我该如何实现底部线的效果？ - Kanagalingam

Answer 1

在您的Drawable文件夹中创建一个名为"background.xml"的xml文件。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:top="-10dp" android:right="-10dp" android:left="-10dp">
        <shape 
            android:shape="rectangle">
            <solid android:color="#1bd4f6" />
            <stroke
                android:width="2dp"
                android:color="#0288D1" />
        </shape>
    </item>

</layer-list>

将此设置为您的TabLayout

  <android.support.design.widget.TabLayout
        android:background="@drawable/background"
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabTextColor="@color/white"/>

根据需要更改数值和颜色！

输出：

- Charuක

---

@Felipe Castilhos 你有检查过这个吗？ - Charuක

显然，我错了，试图在选项卡上设置背景而不是选项卡布局本身。 - Felipe Castilhos

@Felipe Castilhos，我很高兴能帮上忙 :) 如果你想要其他边缘，可以删除负值！祝你好运。 - Charuක

Answer 2

你可以尝试这个。解决方案如下：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TabLayout
       android:id="@+id/tabs"
       android:layout_width="match_parent"
       android:layout_height="60dp"
       app:tabBackground="@color/white"
       app:tabIndicatorColor="@color/colorAccent"
       app:tabIndicatorHeight="2.5dp"
       app:tabTextColor="@color/white"/>

    <View
       android:layout_width="match_parent"
       android:layout_height="2.5dp"
       android:layout_gravity="bottom"
       android:background="#c6c6c6" />

</FrameLayout>

- Tiko

---

我已经做到了，将在TabLayoutSelector上显示灰色线条。但还是谢谢你的回复。 - Felipe Castilhos

我需要一个具有固定宽度和底部边框的选项卡布局选择器。为了实现这一点，您可以将<View设置为FrameLayout中的顶部子项，并设置选项卡布局的背景为透明。 - Levon Petrosyan

Answer 3

在您的Drawable文件夹中创建一个XML文件。

background_line.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:top="-6dp"
        android:right="-2dp"
        android:left="-2dp"

        >
        <shape
            android:shape="rectangle">
            <solid android:color="#fff" />
            <stroke
                android:width="1dp"
                android:color="#fff" />
            <corners android:radius="@dimen/_15sdp"/>
        </shape>

    </item>

</layer-list>

将此设置为您的TabLayout

<com.google.android.material.tabs.TabLayout
             android:id="@+id/tabs"
             android:layout_width="match_parent"
             android:layout_height="@dimen/_40ssp"
             app:tabTextColor="@color/gray"

            app:tabIndicator="@drawable/background_line"
            app:tabIndicatorColor="@color/white"

            app:tabIndicatorGravity="bottom"
            app:tabSelectedTextColor="@color/white"
            app:tabBackground="@color/bg_app"
            app:tabGravity="fill"
            />

输出 >>>

- Mark Nashat