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.

Vietnam

there are 4 ping icon ,3 png have same heights and widths.One is different like camera icon. – Inroad

I try to change the sizes, but it's impossible. They always come out in equal size – Vietnam

Answer 1

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!

Porpoise

It works like a charm. Thank you! But, is there any way to set tab width as wrap_content? – Streaming

I found it. See my answer. – Streaming

Thank you very much – Emersed

This work like champ!.. but after using this facing background color padding issue. same as @Streaming – Table

Doesn't work with Viewpager2 (get Nullpointer Exception) – Baseburner

Answer 2

@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
}

Streaming

Answer 3

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

Murdocca

Answer 4

Check this for dynamic width with wrap_content background

private fun setTabwidth(tabposition: Int, weight: Float) {
        val layout: LinearLayout = tabLayout?.getChildAt(0) as LinearLayout).getChildAt(tabpos) as LinearLayout
        val layoutParams: LinearLayout.LayoutParams = layout.getLayoutParams() as LinearLayout.LayoutParams
        layoutParams.weight = weight 
        layoutParams.width = LinearLayout.LayoutParams.WRAP_CONTENT
        layout.setLayoutParams(layoutParams)

        val tablayoutParams: ViewGroup.LayoutParams? = tabLayout?.layoutParams
        tablayoutParams?.width=ViewGroup.LayoutParams.WRAP_CONTENT
        tabLayout?.layoutParams=tablayoutParams
    }

Usage:

setTabwidth(0,0.4f) // first tab 0.4 weight
setTabwidth(1,0.6f) // second tab 0.6 weight

Table