Android TabLayout custom indicator width

Question

I want to reduce width of indicator - for example, make it's width not whole tab width, but 1/2 of tab width.
That's all I need to do, so I don't want to download some custom library and search where I can do this.

Is it a way to do this or I should write such view by myself?

Answer 1

Try this.

public void setIndicator (TabLayout tabs,int leftDip,int rightDip){  
   Class<?> tabLayout = tabs.getClass();  
   Field tabStrip = null;  
   try {  
       tabStrip = tabLayout.getDeclaredField("mTabStrip");  
   } catch (NoSuchFieldException e) {  
       e.printStackTrace();  
   }  

   tabStrip.setAccessible(true);  
   LinearLayout llTab = null;  
   try {  
       llTab = (LinearLayout) tabStrip.get(tabs);  
   } catch (IllegalAccessException e) {  
       e.printStackTrace();  
   }  

   int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());  
   int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());  

   for (int i = 0; i < llTab.getChildCount(); i++) {  
       View child = llTab.getChildAt(i);  
       child.setPadding(0, 0, 0, 0);  
       LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);  
       params.leftMargin = left;  
       params.rightMargin = right;  
       child.setLayoutParams(params);  
       child.invalidate();  
   }  
}

And then

tab.post(new Runnable() {  
       @Override  
       public void run() {  
           setIndicator(tab,60,60);  
       }  
});  

My modification w/o reflection (custom view should be set!).

for (int i = 0; i < tabs.getTabCount(); i++) {
    TabLayout.Tab tab = tabs.getTabAt(i);
    if (tab != null) {
        View customView = tab.getCustomView();
        if (customView != null) {
            View targetViewToApplyMargin = (View) customView.getParent();
            ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) targetViewToApplyMargin.getLayoutParams();

            layoutParams.rightMargin = totalTabMargin;
                    targetViewToApplyMargin.setLayoutParams(layoutParams);
        }
    }
}

Answer 2

For anyone that ends up on this issue, I found a simple solution with vector drawables for a ~90% of the tab width indicator:

ic_tab_indicator_24dp:

<vector
android:height="24dp"
android:width="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<path
    android:strokeWidth="4"
    android:fillColor="@android:color/white"
    android:pathData="M2,0 L22,0 L22,24 L2,24 z"/>

And then set tabIndicator in the layout:

app:tabIndicator="@drawable/ic_tab_indicator_24dp"

Or in styles.xml:

<item name="tabIndicator">@drawable/ic_tab_indicator_24dp</item>

Edit: As my solution is getting attention, I'd add that you can play with the width just modifying the pathData ("M2,0 L22,0 L22,24 L2,24 z") changing 2 and 22 values. The amount added to 2 should be subtracted from 22. i.e.: "M4,0 L20,0 L20,24 L4,24 z" or "M6,0 L18,0 L18,24 L6,24 z"...

Answer 3

you could copy TabLayout, and modify the logic of calculating the width of Indicator. See updateIndicatorPosition() and animateIndicatorToPosition(). A simple demo https://github.com/xybean/CustomTabLayout