在TabLayout下面添加一行

时间:2017-02-15 13:06:23

标签: android xml android-tablayout tabbar

我在尝试在TabLayout下添加一行时遇到了麻烦,但它必须在选择器行后面。应该是这样的:

Exemple

我已经尝试添加自定义视图,但每个标签内部都有一些边距,所以没有用完。

任何想法?

这就是我现在所得到的:

current_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);
}

2 个答案:

答案 0 :(得分:8)

在Drawable文件夹中创建一个xml

background.xml

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

    <item android:top="-10dp" android:right="-10dp" android:left="-10dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            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"/>

根据需要更改值和颜色!

输出:

enter image description here

答案 1 :(得分:3)

你可以试试这个。解决方案

<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>