Bottom Sheet dragging issue when View Pager with full screen is used

Question

I am using View Pager with full screen image view inside a bottom bottom sheet and because of the dragging the bottom sheet down is not working, removing the view pager makes it work again but that is not what I want here

I tried overriding ViewPager class and manually intercept touch events but it did not work either and it somehow disabled the dragging up to expanded even as well

public class CustomViewPager extends ViewPager {
    public CustomViewPager(@NonNull Context context) {
        super(context);
    }
    
    public CustomViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_DOWN || ev.getAction() == MotionEvent.ACTION_UP) {
            getParent().requestDisallowInterceptTouchEvent(false);
        }
        else {
            getParent().requestDisallowInterceptTouchEvent(true);
        }
        return true;
    }
    
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_DOWN || ev.getAction() == MotionEvent.ACTION_UP) {
            getParent().requestDisallowInterceptTouchEvent(false);
        }
        else {
            getParent().requestDisallowInterceptTouchEvent(true);
        }
        return true;
    }
}

Bottom Sheet Layout which contains two framelayouts out of which one is a fragment container that include the viewpager

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/design_bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:background="?attr/nowPlayerBackground"
    android:clickable="true"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:elevation="10dp"
    android:focusable="true"
    android:orientation="horizontal"
    app:behavior_peekHeight="0dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <include layout="@layout/now_player_mini" />

    <!-- This is a container of fragments containing view pager -->
    <FrameLayout
        android:id="@+id/now_player_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0" />

</FrameLayout>

Fragment's layout that contains the view pager

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:nestedScrollingEnabled="true"
    android:orientation="vertical">


    <!-- This is where the problem is happening -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/album_art_slider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:nestedScrollingEnabled="true" />

    <TextView
        android:id="@+id/song_category"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:fontFamily="@font/light"
        android:marqueeRepeatLimit="marquee_forever"
        android:scrollHorizontally="true"
        android:singleLine="true"
        android:textAlignment="center"
        android:textColor="?attr/fullNowPlayerTextPrimary"
        android:textSize="12pt" />

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/fg_now_player_gradient" />

<!-- Some other layout like buttons and seekbar goes here -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

and view pager layout, it only contains a full screen image view

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/album_art_pages_iv"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

These booleans are already specified for the viewpager

albumArtViewPager.requestDisallowInterceptTouchEvent(true);
albumArtViewPager.setNestedScrollingEnabled(true);

This is pretty much everything for bottom sheet in MainActivity

nowPlaying = findViewById(R.id.now_playing);
FrameLayout frameLayoutBottomSheet = findViewById(R.id.design_bottom_sheet);
bottomSheetBehavior = BottomSheetBehavior.from(frameLayoutBottomSheet);
PEEK_HEIGHT = nowPlaying.getLayoutParams().height;
bottomSheetBehavior.setPeekHeight(PEEK_HEIGHT, true);

And my activity_main layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/mainBackground">

    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:translationZ="2dp">

        <include layout="@layout/now_player" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <View
        android:id="@+id/status_bar_background"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_gravity="top"
        android:background="?attr/colorStatusBarBackground" />

</FrameLayout>

This is the problem and I want the panel to go down when swiped down and switch pages when view is swiped left or right

GIF

Answer 1

I found the source of the problem, it was caused by the View layout, setting the clickable and focusable to false fixes the problem

    <!-- The problem was here because the View is intercepting all the touch events and preventing the bottom sheet from going down-->
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        <!-- Setting clickable and focusable to false fixes the problem -->
        android:clickable="false"
        android:focusable="false"

        android:background="@drawable/fg_now_player_gradient" />