Different tab width for TabLayout

Question

I'm using TabLayout & ViewPager. I am trying to change the size of the Tab, like Whatsapp (camera icon). The size of the three Tabs is equal, but the Tab of the camera is smaller. In every attempt I make the size of the Tabs remains the same (equal across all tabs). Thanks.

Answer 1

@digger's answer is working. However, if you want the tab which has an icon only wraps its content, you can set weight to 0 and width to LinearLayout.LayoutParams.WRAP_CONTENT. It worked for me.

fun TabLayout.setTabWidthAsWrapContent(tabPosition: Int) {
    val layout = (this.getChildAt(0) as LinearLayout).getChildAt(tabPosition) as LinearLayout
    val layoutParams = layout.layoutParams as LinearLayout.LayoutParams
    layoutParams.weight = 0f
    layoutParams.width = LinearLayout.LayoutParams.WRAP_CONTENT
    layout.layoutParams = layoutParams
}

Answer 2

Here I have taken 5 tabs and made 1st tab width is 12% of screen width and rest 4 are sharing remaining width. Doing it after some delay of 400 msec after inflating the views.

DisplayMetrics displaymetrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);

    int width= displaymetrics.widthPixels;

    int widthOtherThanFirst= (int) ((float)width*(8.80f/10f));
    int allOther=widthOtherThanFirst/4;

    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            LinearLayout layout1 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(0));
            LinearLayout.LayoutParams layoutParams1 = (LinearLayout.LayoutParams) layout1.getLayoutParams();
            layoutParams1.width = width-widthOtherThanFirst; 
            layout1.setPadding(0,0,0,0);
            layout1.setLayoutParams(layoutParams1);

            LinearLayout layout2 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(1));
            LinearLayout.LayoutParams layoutParams2 = (LinearLayout.LayoutParams) layout2.getLayoutParams();
            layoutParams2.width = allOther; 
            layout2.setLayoutParams(layoutParams2);

            LinearLayout layout5 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(2));
            LinearLayout.LayoutParams layoutParams5 = (LinearLayout.LayoutParams) layout5.getLayoutParams();
            layoutParams5.width = allOther; 
            layout5.setLayoutParams(layoutParams5);

            LinearLayout layout3 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(3));
            LinearLayout.LayoutParams layoutParams3 = (LinearLayout.LayoutParams) layout3.getLayoutParams();
            layoutParams3.width = allOther;
            layout3.setLayoutParams(layoutParams3);

            LinearLayout layout4 = ((LinearLayout) ((LinearLayout)tabLayout.getChildAt(0)).getChildAt(4));
            LinearLayout.LayoutParams layoutParams4 = (LinearLayout.LayoutParams) layout4.getLayoutParams();
            layoutParams4.width = allOther; 
            layout4.setLayoutParams(layoutParams4);

            tabLayout.invalidate();

        }
    },400);

Answer 3

You need to lower the weight of the LinearLayout of the corresponding tab.

LinearLayout layout = ((LinearLayout) ((LinearLayout) tabLayout.getChildAt(0)).getChildAt(YOUR_TAB_NUMBER));
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) layout.getLayoutParams();
layoutParams.weight = YOUR_WEIGHT; // e.g. 0.5f
layout.setLayoutParams(layoutParams);

Hope that helps!