Goltsev Eugene Goltsev Eugene - 5 months ago 122
Android Question

Android TabLayout custom indicator width

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 Source

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