ViewPager not showing inside NestedScrollView which contains RecyclerView below ViewPager

Question

i have a NestedScrollView which contains a ConstaintLayout and inside of it there's a Viewpager and a Recyclerview my problem is that the ViewPager isn't showing unless it has a fixed height, match_parent and wrap_content don't work

I've tried to set its height to wrap_content and measure it to be the tallest child's height but still didn't work, i kept changing fillViewport values and other views' heights,changing the parent layout from ConstaintLayout to LinearLayout and make its layout_weight="1" but still the only thing that worked is to set its height to fixed height

my layout:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinatorlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorWhite"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/apSelectedLine"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:background="@color/colorWhite">


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="250dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


                <fragment  xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/map"
                    android:name="com.google.android.gms.maps.SupportMapFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_collapseMode="parallax" />

                <android.support.v7.widget.CardView
                    android:id="@+id/cvStep2Loading"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="0dp"
                    android:background="@color/colorWhite"
                    android:backgroundTint="@color/colorWhite"
                    android:minWidth="100dp"
                    android:minHeight="40dp"
                    android:visibility="gone"
                    app:cardBackgroundColor="@color/colorWhite"
                    app:cardCornerRadius="8dp"
                    app:cardElevation="16dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <ProgressBar
                            android:id="@+id/pbStep2Loading"
                            style="?android:attr/progressBarStyleHorizontal"
                            android:layout_width="32dp"
                            android:layout_height="32dp"
                            android:layout_marginStart="8dp"
                            android:layout_marginLeft="8dp"
                            android:layout_marginTop="8dp"
                            android:layout_marginEnd="8dp"
                            android:layout_marginRight="8dp"
                            android:layout_marginBottom="8dp"
                            android:background="@drawable/circle_shape"
                            android:indeterminate="false"
                            android:max="100"
                            android:padding="4dp"
                            android:progress="0"
                            android:progressDrawable="@drawable/circular_progress" />

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginStart="8dp"
                            android:layout_marginLeft="8dp"
                            android:layout_marginTop="8dp"
                            android:layout_marginEnd="8dp"
                            android:layout_marginRight="8dp"
                            android:layout_marginBottom="8dp"
                            android:gravity="center"
                            android:text="loading.."
                            android:textColor="@color/grey" />

                    </LinearLayout>
                </android.support.v7.widget.CardView>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/nsBusesAndStops"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorWhite"
        android:fillViewport="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/llNestSelectedLine"
            android:visibility="visible">

            <me.relex.circleindicator.CircleIndicator
                android:id="@+id/indicator"
                android:layout_width="match_parent"
                android:layout_height="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp"
                android:background="@color/colorWhite"
                android:backgroundTint="@color/colorWhite"
                app:ci_drawable_unselected="@drawable/unselected_grey_circle"
                app:ci_drawable="@drawable/selected_black_circle"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintStart_toStartOf="parent"/>

            <android.support.v4.view.ViewPager
                android:id="@+id/vpSelectedLine"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/colorWhite"
                app:layout_constraintTop_toBottomOf="@id/indicator"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toTopOf="@id/rvStops"
                >
            </android.support.v4.view.ViewPager>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rvStops"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorWhite"
                android:backgroundTint="@color/colorWhite"
                android:nestedScrollingEnabled="false"
                app:layout_constraintTop_toBottomOf="@id/vpSelectedLine"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                />

        </android.support.constraint.ConstraintLayout>


    </android.support.v4.widget.NestedScrollView>



</android.support.design.widget.CoordinatorLayout>

i mustn't make it fixed height because the Viewpager contains a dynamic RecyclerView... so how to solve this without making the ViewPager height fixed?

Answer 1

try to put the ViewPager and the RecyclerView inside FitWindowsFrameLayout with layout_height="wrap_content" so your code look like this

<android.support.design.widget.CoordinatorLayout
...
 <android.support.v4.widget.NestedScrollView
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/nsBusesAndStops"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorWhite"
            android:fillViewport="false"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/llNestSelectedLine"
                android:visibility="visible">

            <me.relex.circleindicator.CircleIndicator
                    android:id="@+id/indicator"
                    android:layout_width="match_parent"
                    android:layout_height="8dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginBottom="8dp"
                    android:background="@color/colorWhite"
                    android:backgroundTint="@color/colorWhite"
                    app:ci_drawable_unselected="@drawable/unselected_grey_circle"
                    app:ci_drawable="@drawable/selected_black_circle"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintStart_toStartOf="parent"/>

            <android.support.v7.widget.FitWindowsFrameLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    tools:ignore="MissingConstraints">
                <android.support.v4.view.ViewPager
                        android:id="@+id/vpSelectedLine"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/colorWhite"
                        app:layout_constraintTop_toBottomOf="@id/indicator"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintBottom_toTopOf="@id/rvStops"
                >
                </android.support.v4.view.ViewPager>

                <android.support.v7.widget.RecyclerView
                        android:id="@+id/rvStops"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/colorWhite"
                        android:backgroundTint="@color/colorWhite"
                        android:nestedScrollingEnabled="false"
                        app:layout_constraintTop_toBottomOf="@id/vpSelectedLine"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"/>

            </android.support.v7.widget.FitWindowsFrameLayout>


        </android.support.constraint.ConstraintLayout>


    </android.support.v4.widget.NestedScrollView>



</android.support.design.widget.CoordinatorLayout>

for more info about how to use FitWindowsFrameLayout this googlesource link

Answer 2

after nearly a day trying to get around this i came up with this solution myself, i set the ViewPager height to fixed height (100dp for example) in xml initially and then when data come from the server i resize the ViewPager height to the total children height, note that i have a RecyclerView inside the ViewPager and here's the Kotlin code i used for this:

   fun resizeViewPager(busesList: MutableList<Bus>){

        childRecyclerView?.viewTreeObserver?.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener{
            override fun onGlobalLayout() {
                val firstChild = childRecyclerView?.getChildAt(0)
                val height = firstChild?.height
                if (height != null){
                    val totalHeight = height * busesList.size
                    val layoutParams = viewPager.layoutParams

                    layoutParams.height = totalHeight

                    viewPager.layoutParams = layoutParams
                    viewPager.requestLayout()
                }

                childRecyclerView?.viewTreeObserver?.removeOnGlobalLayoutListener(this)
            }
        })


    }

can anybody explain why did this problem happen in the first place? and is there a better solution?