Search code examples
androidandroid-layoutandroid-tablayout

Android Tab layout: Wrap tab indicator width with respect to tab title


Is there any way to wrap tab indicator width with respect to tab title ?

Current

Required


Solution

  • Yes, it's possible to wrap tab indicator as title setting padding to 0

     public void wrapTabIndicatorToTitle(TabLayout tabLayout, int externalMargin, int internalMargin) {
            View tabStrip = tabLayout.getChildAt(0);
            if (tabStrip instanceof ViewGroup) {
                ViewGroup tabStripGroup = (ViewGroup) tabStrip;
                int childCount = ((ViewGroup) tabStrip).getChildCount();
                for (int i = 0; i < childCount; i++) {
                    View tabView = tabStripGroup.getChildAt(i);
                    //set minimum width to 0 for instead for small texts, indicator is not wrapped as expected
                    tabView.setMinimumWidth(0);
                    // set padding to 0 for wrapping indicator as title
                    tabView.setPadding(0, tabView.getPaddingTop(), 0, tabView.getPaddingBottom());
                    // setting custom margin between tabs
                    if (tabView.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
                        ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) tabView.getLayoutParams();
                        if (i == 0) {
                            // left
                            settingMargin(layoutParams, externalMargin, internalMargin);
                        } else if (i == childCount - 1) {
                            // right
                            settingMargin(layoutParams, internalMargin, externalMargin);
                        } else {
                            // internal
                            settingMargin(layoutParams, internalMargin, internalMargin);
                        }
                    }
                }
    
                tabLayout.requestLayout();
            }
    }
    
    private void settingMargin(ViewGroup.MarginLayoutParams layoutParams, int start, int end) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            layoutParams.setMarginStart(start);
            layoutParams.setMarginEnd(end);
            layoutParams.leftMargin = start;
            layoutParams.rightMargin = end;
        } else {
            layoutParams.leftMargin = start;
            layoutParams.rightMargin = end;
        }
    }
    

    Result

    EDIT: As of com.android.support:design:28.0.0, you can adjust the indicator as label easily now setting:

    app:tabIndicatorFullWidth="false"

    EDIT July 2019: Use the material dependency com.google.android.material:material:x.x.x