Dynamic height viewpager with recyclerview and tablayout

Question

I have a viewpager with 3 pages and each of the pages may or may not contain a recyclerview. The count of items in recyclerview vary from users to users. I have made a custom view pager following this question: How to wrap the height of a ViewPager to the height of its current Fragment?.
The issues that I face now are 2 things:

1. While switching tabs, requestLayout() is called for each of the fragments. So when recyclerview contains a lot of items, there is a lag while switching because It is measuring the tabs again and again. And the items in the recyclerview are dynamic meaning it has a load more item on scroll behavior.

2. When the recyclerview have no items, a textview is shown to indicate the absence of items. Because the viewpager wraps the content, It seems that I cannot center the textview in the fragment. So when there are no recyclerview, I need the viewpager to fill the whole height.

Here is my CustomViewPager code:

public class CustomViewPager extends ViewPager {

    private int currentPagePosition = 0;
    Context context;

    public CustomViewPager(@NonNull Context context) {
        super(context);
        this.context = context;
    }

    public CustomViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        View child = getChildAt(currentPagePosition);
        if(child != null) {
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY);
        }
        if(heightMeasureSpec != 0) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

    public void measureCurrentView(int position) {
        currentPagePosition = position;
        requestLayout();
    }


    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return false;
    }
}

Here is my viewpager layout file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="250dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:background="#F8F8F8"
            android:id="@+id/header"/>

        <com.google.android.material.tabs.TabLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/header"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:id="@+id/tabs">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1ST"
                />
            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2ND"
                />
            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3RD"
                />


        </com.google.android.material.tabs.TabLayout>

        <com.example.smilee.adapters.CustomViewPager
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/items"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tabs"

            />
        
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.core.widget.NestedScrollView> 

And this is the layout for each of the fragments:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/white">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerview"
        android:nestedScrollingEnabled="false"
        android:visibility="gone"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="No items to show."
        android:fontFamily="@font/medium"
        android:textColor="#777"
        android:textSize="15dp"
        android:gravity="center"
        android:id="@+id/noItemText"
        android:includeFontPadding="false"
        android:visibility="visible"/>


</androidx.constraintlayout.widget.ConstraintLayout>

How to achieve this?
How can I switch between tabs so fast irrespective of count of items in recyclerview and How can I center the textview by filling the whole height if the recyclerview is not available? Hope you can help. Regards.

Answer 1

Your main problem is nesting a RecyclerView inside a ScrollView. This can easily cause performance issues since the RecyclerView doesn't know which part of itself is currently on screen, so it loads all items at once. Add a print log inonBindViewHolder to confirm this. Also it means the RecyclerView height (and thus the viewpager height) is now arbitrary and not limited to the size of the screen, which will make it impossible to centre your text.

To achieve the layout you want, I would replace NestedScrollView with a CoordinatorLayout. I've done this successfully in my app for what I think is the exact same situation. Then you would no longer need a custom ViewPager.

Here is a tested working example using your layout:

 <?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">

            <RelativeLayout
                android:id="@+id/header"
                android:layout_width="0dp"
                android:layout_height="250dp"
                android:background="#F8F8F8"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/header">

            </com.google.android.material.tabs.TabLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/items"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_anchor="@id/app_layout"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Note that you must remove this line from RecyclerView: android:nestedScrollingEnabled="false"