CODEWITHSUNDEEP
androidandroid-layoutandroid-fragmentsandroid-viewpagerandroid-tablayout
Dor Natan
Dor Natan

Reputation: 161

Different tab width for TabLayout

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.

enter image description here

Upvotes: 16

Views: 15548

Answers (4)

Ganesh Pokale
Ganesh Pokale

Reputation: 1594

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

Upvotes: 0

Vikas Rathore
Vikas Rathore

Reputation: 41

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

Upvotes: 2

sembozdemir
sembozdemir

Reputation: 4267

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

Upvotes: 20

digger
digger

Reputation: 373

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!

Upvotes: 33

Related Questions