Divider between Tabs of TabLayout Programatically LinearLayout.SHOW_DIVIDER_MIDDLE

问题

I've tried adding the divider between tabs, without using any custom layout. I have tried it programmatically using the following method:

public static void addTabsDividers(TabLayout tabLayout, @ColorRes int divColorRes,int divWidthDP,int divHeightDP){
        View root = tabLayout.getChildAt(0);
        if (root instanceof LinearLayout) {
            ((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
            GradientDrawable drawable = new GradientDrawable();
            drawable.setColor(tabLayout.getContext().getResources().getColor(divColorRes));
            drawable.setSize(divWidthDP, divHeightDP);
//            ((LinearLayout) root).setDividerPadding(10);
            ((LinearLayout) root).setDividerDrawable(drawable);
        }
    }

but this adds extra space in left side of tabs:

Notice the strange white space on left side of tabs, I want to remove that !!

Tabs xml:

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="?actionBarSize">
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/tabs"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <FrameLayout
                android:id="@+id/fl_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

        </android.support.v4.widget.NestedScrollView>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabPaddingTop="5dp"
            app:tabPaddingBottom="0dp"
            app:tabPaddingStart="0dp"
            app:tabPaddingEnd="0dp"
            app:tabTextColor="@color/md_white_1000"
            app:tabSelectedTextColor="@color/md_white_1000"
            app:tabTextAppearance="@style/TabTextStyle"
            app:tabBackground="@drawable/tab_color_selector"/>
    </RelativeLayout>

回答1:

I saw you on the same question I was using and you are using the same solution as me and I have the same issue! But I found out using a custom drawable for the divider 100% solved the problem and now I only have a divider in the middle of my two tabs. This is the drawable I was using:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <size android:width="1dp" />
        <solid android:color="@android:color/white" />
    </shape>
</item>

<item
    android:bottom="16dp"
    android:top="12dp">

    <shape android:shape="rectangle">
        <solid android:color="@color/color_gray" />
        <size android:width="1dp" />
    </shape>
</item>

let me know if this works for you.

public class MyTabLayout extends TabLayout {
public MyTabLayout(Context context) {
    super(context);
}

public MyTabLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public MyTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

/**
 * Adds vertical dividers between tabs
 */
public void addTabDivider() {
    LinearLayout linearLayout = (LinearLayout)getChildAt(0);
    linearLayout
            .setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
    Drawable drawable = MyApp.getInstance().getDrawable(R.drawable.tab_divider);
    linearLayout.setDividerDrawable(drawable);
}

来源：https://stackoverflow.com/questions/49831234/divider-between-tabs-of-tablayout-programatically-linearlayout-show-divider-midd

标签

android

android-tablayout

divider