Unexpected margin in TabLayout

Question

I have TabLayout with tabGravity set to fill

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_background"
    app:tabGravity="fill"
    app:tabIndicatorHeight="0dp"
    app:tabMaxWidth="0dp"
    app:tabMode="fixed" />

and want to add a custom divider between tabs. I tried this method

View root = tabLayout.getChildAt(0);
LinearLayout linearLayout = (LinearLayout) root;
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
GradientDrawable drawable = new GradientDrawable();
drawable.setColor(Color.WHITE);
drawable.setSize(5, 0);
linearLayout.setDividerDrawable(drawable);

It works fine except beginning of the first tab. I'm using SHOW_DIVIDER_MIDDLE but the first tab has margin at the left:

If I remove dividers, margin disappears. How to get rid of the margin but keep dividers?

Here is the full test project: https://github.com/PiN73/TestDivider

score 0 · Answer 1 · answered Apr 22 '18 at 20:30

You can inflate different layouts for each tab.

For example:

private void setupTabs() {
    // Left tab inflate
    {
        LinearLayout tab = (LinearLayout) LayoutInflater.from(mContext)
                .inflate(R.layout.tab_left, null);
        TextView tvTabTitle = tab.findViewById(R.id.tvTabTitle);
        tvTabTitle.setText(getResources().getString(R.string.tab_left));
        tabLayout.getTabAt(0)
                .setCustomView(tab);
    }
    // Middle tab inflate
    {
        LinearLayout tab = (LinearLayout) LayoutInflater.from(mContext)
                .inflate(R.layout.tab_middle, null);
        TextView tvTabTitle = tab.findViewById(R.id.tvTabTitle);
        tvTabTitle.setText(getResources().getString(R.string.tab_middle));
        tabLayout.getTabAt(1)
                .setCustomView(tab);
    }

    // Right tab inflate
    {
        LinearLayout tab = (LinearLayout) LayoutInflater.from(mContext)
                .inflate(R.layout.tab_right, null);
        TextView tvTabTitle = tab.findViewById(R.id.tvTabTitle);
        tvTabTitle.setText(getResources().getString(R.string.tab_right));
        tabLayout.getTabAt(2)
                .setCustomView(tab);
    }

}

According the example above, you have 3 different layouts, R.layout.tab_left, R.layout.tab_middle and R.layout.tab_right

You can arrange these layouts as:

R.layout.tab_left : TextView + Divider
R.layout.tab_middle : TextView
R.layout.tab_right : Divider + Textview

Also you can check this Question and it's anwswers: How to set the divider between Tabs in TabLayout of design support library?

Thank you for the answer. Is it possible to use selector for custom views? I want to make active tab different color — Pavel, Apr 22 '18 at 20:55
@Pavel yes, you can also give any color or drawable selector to tab's background and text from each custom tab tayout. — Oğuzhan Döngül, Apr 22 '18 at 21:02

Unexpected margin in TabLayout

1 Answers1