Android ViewPager2: Not being able to make ViewPager2 width adjust to its content

Question

This is my main -non scrolling- content:

<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

    </data>

    <RelativeLayout
        android:id="@+id/llMainMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:gravity="center">

            <include
                android:id="@+id/logo"
                layout="@layout/testme_logo" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/llSummary"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginTop="110dp"
            android:paddingTop="130dp"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tvSummaryText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:gravity="center_horizontal"
                android:textStyle="bold"
                android:textSize="24sp" />

            <LinearLayout
                android:id="@+id/llLoadingSummary"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tvLoadingSummary"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="14sp"
                    android:textColor="#000000"
                    android:clickable="false"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:textIsSelectable="false"
                    android:text="@string/activitymain_textview_loadingsummary" />

            </LinearLayout>

            <TextView
                android:id="@+id/tvNoTests"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:paddingStart="60dp"
                android:paddingEnd="60dp"
                android:paddingTop="10dp"
                android:paddingBottom="10dp"
                android:textSize="14sp"
                android:gravity="center"
                android:visibility="gone"
                android:textIsSelectable="false"
                android:text="@string/activitymain_textview_notests" />

            <Button
                android:id="@+id/btnDownloadTests"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:visibility="gone"
                android:text="@string/mainmenu_button_downloadtests" />

            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/pager"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="invisible"
                android:background="#ffffff" />

            <ImageView
                android:contentDescription="@string/pref_category_animations"
                android:id="@+id/ivAnimated"
                android:layout_marginTop="-350px"
                android:layout_gravity="center"
                android:layout_width="100dp"
                android:layout_height="100dp" />

        </LinearLayout>

        <include
            android:id="@+id/footermenu"
            layout="@layout/footermenu" />

    </RelativeLayout>
</layout>

And this is the scrolling area -pager-:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

            <androidx.cardview.widget.CardView
                android:id="@+id/cardViewTests"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp"
                app:cardElevation="10dp"
                android:theme="@style/Theme.MaterialComponents.Light">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingBottom="10dp"
                    android:layout_gravity="center_horizontal"
                    android:gravity="center_horizontal"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/tvFinishedTestsText"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_marginBottom="10dp"
                        android:gravity="center"
                        android:textStyle="bold"
                        android:textSize="20sp" />

                    <Button
                        android:id="@+id/tvFinishedTestsValue"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:textAlignment="center"
                        android:layout_gravity="center"
                        android:textColor="#fff"
                        android:textSize="20sp"
                        android:textStyle="bold"
                        android:background="@drawable/circle" />
                </LinearLayout>

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:id="@+id/cardViewScore"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                app:cardCornerRadius="5dp"
                app:cardElevation="10dp"
                android:theme="@style/Theme.MaterialComponents.Light">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingBottom="10dp"
                    android:layout_gravity="center_horizontal"
                    android:gravity="center_horizontal"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/tvScoreText"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_marginBottom="10dp"
                        android:gravity="center"
                        android:textStyle="bold"
                        android:textSize="20sp" />

                    <Button
                        android:id="@+id/tvScoreValue"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:textAlignment="center"
                        android:layout_gravity="center"
                        android:textColor="#fff"
                        android:textSize="20sp"
                        android:textStyle="bold"
                        android:background="@drawable/circle" />
                </LinearLayout>

            </androidx.cardview.widget.CardView>

        </LinearLayout>

        <TextView
            android:id="@+id/tvTestText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textStyle="bold"
            android:textSize="20sp" />

    </LinearLayout>

</layout>

What I expect is when swiping left -or right- the boxes won't move to the beginning (or end) of the screen, but to a limited area.

I'm attaching two screenshots so you can see what I'm talking about. In the second I've set a color background on purpose, so you can notice how the ViewPager2 is not adjusting to it's content (wrap_content) when every view is set to wrap_content.

What I'd expect:

Answer 1

After struggling my head for days, I was finally able to do it programmatically:

mViewPager.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        mViewPager.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        int viewPagerWidth = (mViewPager.findViewById(R.id.cardViewContainer)).getWidth();
        int screenWidth = TMScreen.getScreenWidth(MainActivity.this);
        int viewPagerMargin = TMScreen.dp2px(10);
        int viewPagerPadding = (screenWidth - viewPagerWidth - viewPagerMargin) / 2;
        mViewPager.setPadding(viewPagerPadding, 0, viewPagerPadding, 0);
    }
});