Android using ViewPager and TabLayout wrap content

Question

I have this situation:

A Fragment using ViewPager with TabLayout, that takes up the entire width of the screen. Like this:

correctly formatted tabs

So far, so good. But in some moments, the tabs stay with wrap-content and centralized, like this:

wrongly formatted tabs

It couldn't happen, and I can't figure out why it's happening. It should be match_parent, like the first image shows.

If anyone can help me, I really appreciate it. Below is the code and xml of the fragment:

public class RotativeInventorySupplyUDFragment extends AbstractNavFragment {

    private FragmentRotativeInventorySupplyBinding binder;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        binder = FragmentRotativeInventorySupplyBinding.inflate(inflater, container, false);
        return binder.getRoot();
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        binder.viewPager.setAdapter(new RotativeInventorySupplyUDFragment.PageAdapterInternal(getChildFragmentManager()));
        binder.viewPager.setOffscreenPageLimit(2);
    }

    @Override
    public void onAttach(@NonNull Context context) {
        super.onAttach(context);

        requireActivity().getOnBackPressedDispatcher().addCallback(this, new OnBackPressedCallback(true) {
            @Override
            public void handleOnBackPressed() { saveAndExit(); }
        });
    }

    public void navigateToCountFragment() {
        navigateTo(R.id.action_rotativeInventorySupplyUDFragment2_to_rotativeInventorySupplyCountFragment);
    }

    public void navigateToDetailFragment() {
        navigateTo(R.id.action_rotativeInventorySupplyUDFragment2_to_rotativeInventorySupplyDetailFragment);
    }

    private void navigateTo(int navigationId) {
        navigate(navigationId);
    }

    public void saveAndExit() {
        new LBMDialog.Builder(requireContext())
                .setTitle(translate("rotativeInventory.supply.attention"))
                .setCancelable(false)
                .setContent(translate("rotativeInventory.supply.stilUDPending") + "\n\n" + translate("rotativeInventory.supply.exitOrCount"))
                .setPrimaryFullWidthButton(new LBMDialog.LBMButtonInfo(translate("rotativeInventory.supply.continueCounting")) {
                    @Override
                    public void onClick() { }
                })
                .setSecondarySemiTransaparentButton(new LBMDialog.LBMButtonInfo(translate("rotativeInventory.supply.saveAndExit")) {
                    @Override
                    public void onClick() { navPop(); }
                })
                .setCloseIconVisibility(View.GONE)
                .swapButtons()
                .show(getChildFragmentManager());
    }

    @Override
    protected void doOnViewCreate() {}

    private class PageAdapterInternal extends FragmentStatePagerAdapter {

        public PageAdapterInternal(@NonNull FragmentManager fm) {
            super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
        }

        @NonNull
        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new IrcSupplyUDFragment(IrcSupplyUDFragment.FragmentType.PENDING);
                case 1:
                    return new IrcSupplyUDFragment(IrcSupplyUDFragment.FragmentType.COMPLETED);
                default:
                    throw new IllegalStateException("Unexpected value: " + position);
            }
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return translate("rotativeInventory.supply.pendingDUs");
                case 1:
                    return translate("rotativeInventory.supply.completedDUs");
                default:
                    return "";
            }
        }

        @Override
        public int getCount() {
            return 2;
        }
    }
}


<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:ignore="MissingConstraints">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.helper.widget.Flow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:constraint_referenced_ids="viewPager"/>

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:tabTextAppearance="@style/TabLayoutCustomTextAppearance"/>

        </androidx.viewpager.widget.ViewPager>

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Answer 1

Since you did not post your layout xml, I assumed that you are using MaterialTabLayout, you have to do the following to meet your requirements:

In your TabLayout,

1. Put android:layout_width="match_parent", so that the layout takes full width of its parent.

2. Put app:tabMode="fixed" in your TabLayout, required for the tabs to fill.

3. Put app:tabGravity="fill", this will takes up available space for each TabItem.

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill">
   
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 1" />
   
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 2" />
   
    </com.google.android.material.tabs.TabLayout>