Search code examples
androidandroid-viewpagerandroid-tablayout

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?


Solution

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