Search code examples
androidkotlinlayoutandroid-viewpagerscrollview

Why does my ViewPager not show anything when i add a scrollview?


I have a frame layout that wants to fill 50% of the screen reso, then a tablayout below and a viewpager with 3 different fragment layouts based on the tabs. The tabs/viewpager works and shows the layouts when i remove scrollview, otherwise using this code it just show a blank viewpager. Can someone help me to enable a scrolling function for the viewpager without the viewpager from disappearing/not showing?

The viewpager adapters are functional but adding a scrollview to scroll the fragment layouts of the viewpager makes the whole viewpager disappear.

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/templateContainer"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/newjobcardtabLayout"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent="0.5">

            <ImageView
                android:id="@+id/templateLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/veh_cond_template" />

        </FrameLayout>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/newjobcardtabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/TabLayoutTextStyle"
            app:layout_constraintTop_toBottomOf="@id/templateContainer"/>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/newjobcardtabLayout">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/newjobcardviewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Solution

  • Could you please check the layout? It seems that the bottom constraint for the view is missing, which is why the view is not displaying correctly

     <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="0dp"     // 0dp instead of wrap
            app:layout_constraintBottom_toBottomOf="parent" //bottom constraint
            app:layout_constraintTop_toBottomOf="@id/newjobcardtabLayout">
    
            <androidx.viewpager.widget.ViewPager
                android:id="@+id/newjobcardviewPager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </androidx.core.widget.NestedScrollView>
    

    PS: Using ViewPager inside a NestedScrollView is generally not recommended because both ViewPager and NestedScrollView handle touch events and scrolling gestures