Parent fragment and child fragment both have viewpager2 , so the scrolling of child fragment viewpager2 does not work correctly

Question

Parent fragment contains Viewpager2 and a child fragment contains viewpager2 , when this particular child fragment inflate then child fragment Viewpager2 scroll did not work properly.

i have a Main Activity .On which i have 8 fragments to be inflating. One of the fragment is basemomentfragment. This basemomentFragment have a viewpager2 ,along with tab layout, and a adapter for the viewpager2 extending FragmentStateAdapter. This adapter inflates 3 child fragments inside the viewpager2. One of the child fragment name videoFragment have another viewpager2 in its whole view. now when this videofragment gets to the screen , the viewpager2 in the videofragment doesnot scroll properly.But the parent basemomentfragment viewpager2 works fine. THE ISSUE IS HOW TO RUN BOTH THE VIEWPAGER SIMULTANEOUSLY. parent viewpager2 is horizontal. child viewpager is vertical.

I have tried keeping parent viewpager2 set to binding.viewPagerParent.setUserInputEnabled(false); but then parent stop scrolling and to enable the user input it should change position , but postion cant be change cause no it is not taking user input.

IT ACTUALLY WORKS WITH KEEPING PARENT VIEWPAGER2 AS VIEWPAGER(OLD), BUT I WANT TO USE VIEWPAGER2.AND ALSO WANT TO KNOW THE SOLUTION FOR THIS PROBLEM .

Answer 1

after R and D for this issue. I have the solution for my use case. I created a customFrameLayout extending FrameLayout. added it in the child fragment layout XML. Inside Custom Framelayout, I added viewpager2.

            <com.zeeplive.app.gallery.ui.detail.adapter.CustomFrameLayout
            android:id="@+id/custom_fl_child"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/vp_detail_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0" />
        </com.zeeplive.app.gallery.ui.detail.adapter.CustomFrameLayout>

Here is the code for the CustomFramLayout.

public class CustomFrameLayout extends FrameLayout {

private float initialX = 0;
private float initialY = 0;
private boolean isUserInputEnabled = true;
private OnSwipeDirectionChangeListener onSwipeDirectionChangeListener;

public interface OnSwipeDirectionChangeListener {
    void onSwipeDirectionChange(boolean isHorizontalSwipe);
}

public CustomFrameLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public void setOnSwipeDirectionChangeListener(OnSwipeDirectionChangeListener listener) {
    onSwipeDirectionChangeListener = listener;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            initialX = event.getX();
            initialY = event.getY();
            isUserInputEnabled = true; // Assume user input is initially enabled
            break;
        case MotionEvent.ACTION_MOVE:
            float deltaX = Math.abs(event.getX() - initialX);
            float deltaY = Math.abs(event.getY() - initialY);
            Log.e("test211", "deltaX :"+deltaX*0.15+" deltaY :"+deltaY);
            boolean isVerticalSwipe = deltaY > deltaX * 0.15; //  0.15 set it as per your sensitivty. test and try for you effective threshold value.
            if (onSwipeDirectionChangeListener != null) {
                onSwipeDirectionChangeListener.onSwipeDirectionChange(isVerticalSwipe);
            }

            if (!isVerticalSwipe) {
                // Horizontal swipe detected, disable user input
                isUserInputEnabled = false;
            }
            break;
    }
    // Return true to intercept events when user input is disabled
    return !isUserInputEnabled;
}

}

Here is how I have implemented it in my child fragment.

 binding.customFlChild.setOnSwipeDirectionChangeListener(new CustomFrameLayout.OnSwipeDirectionChangeListener() {
        @Override
        public void onSwipeDirectionChange(boolean isHorizontalSwipe) {
            Log.e("test211","innnnnnnn : "+isHorizontalSwipe);
            binding.vpDetailPager.setUserInputEnabled(isHorizontalSwipe);

            if(parentFragment!=null){
                ViewPager2 viewPager2 = parentFragment.getViewPager2();
                if(viewPager2!=null){
                    Log.e("test211","outttttttttt : "+!isHorizontalSwipe);
                    viewPager2.setUserInputEnabled(!isHorizontalSwipe);
                }
            }
            
        }
    });

Viewpager2 is the parent fragments Viewpager. This is how you can control a vertical swiping in the child fragment viewpager2 that is being inflated on a parent fragment viewpager2 which has a horizontal swipe. Works for me.