3

My App uses the following ViewPager:

Screenshot

The ViewPager has the same width as the display.

I added margins to the ViewPager in xml so that I can see the left(blue) and right(gray) page. As a result everything works fine but I can only touch onto the green area to move the pages.

I want to expand the touch area to the whole screen so that I am able to touch anywhere to move the ViewPager.

I tried to add a TouchDelegate:

binding.pagerContainer.post {
        val rect = Rect()  
        binding.touchArea.getHitRect(rect)
        binding.pagerContainer.touchDelegate = TouchDelegate(rect, binding.viewPager)
    }

And in the xml:

 <FrameLayout
        android:id="@+id/pager_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:clipChildren="false">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:layout_marginBottom="150dp"
            android:layout_marginLeft="70dp"
            android:layout_marginRight="70dp"
            android:layout_marginTop="150dp"
            android:clipChildren="false"/>

        <View
            android:id="@+id/touchArea"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha="0">
        </View>
    </FrameLayout>

The Rect has the correct size. I am posting a Runnable to be sure that the views are laid out. I read the documentation of the TouchDelegate.

I have no idea why it's not working.

3 Answers 3

3

OK. I think I have it this time. After some research here and here, I've come up with this answer. Instead of trying to expand the area of ViewPager with TouchDelegate, I've re-routed touch events from the FrameLayout to the ViewPager. 1st, make your own FrameLayout

public class MyFrameLayout extends FrameLayout {

    // make sure to include all the necessary constructors here
    // with calls to super

    // only need to override 1 method
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        ViewPager pager = null;
        int count = getChildCount();
        for(int i=0; i<count; i++) {
            if(getChildAt(i) instanceof ViewPager) {
                pager = (ViewPager)getChildAt(i);
                break;
            }
        }
        if(pager != null) {
            return pager.onTouchEvent(event);
        }
        return super.onTouchEvent(event);
    }
}

If you know that the ViewPager will always be in the same place in the FrameLayout, the onTouchEvent() can be simplified to

    ViewPager pager = (ViewPager)getChildAt(0); 
    return pager.onTouchEvent(event);

Then you use your custom FrameLayout in the layout file

 <your.package.name.MyFrameLayout
    android:id="@+id/pager_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    etc. etc.

I've tested it and this does it for me. Hope it works for you.

1
  • GENIUS! Love you :)
    – Appyx
    Jul 30, 2017 at 0:37
1

Add this lines in yourlayout.xml:

android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"

Try this block:

YOURActivityLayout.setOnTouchListener(new View.OnTouchListener() {  
        @Override
        public boolean onTouch(View arg0, MotionEvent arg1) {

            return true;//always return true 
        }
    });

Hope this will work

5
  • xml for the touchareaview?
    – Appyx
    Jul 29, 2017 at 19:41
  • Verify that in your layout @Appyx Jul 29, 2017 at 19:42
  • I added your xml in my FrameLayout. I added onTouchListener to my FrameLayout. No change.
    – Appyx
    Jul 29, 2017 at 19:46
  • By the way, I send a code block for onTouchListener , are you aware of ActivityLayout.setOnTouchListener must be YourActivityLayout.setOnTouchListener ? @Appyx Jul 29, 2017 at 19:50
  • Remove this line and try again please.android:clickable="true" @Appyx Jul 29, 2017 at 20:02
0

My viewpager had a view behind it acting as a background. I noticed that touch events sent to the inactive items to the left and right of the active item in the viewpager were sent to the background view. That gave me the idea to intercept touches there and use the viewpager's fake drag api.

I built an extension function for ViewPager2 like this:

fun ViewPager2.receiveFakeDragsFrom(view: View) {
    view.setOnTouchListener { _, event ->
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                requestDisallowInterceptTouchEvent(true)
                beginFakeDrag()
                true
            }
            MotionEvent.ACTION_MOVE -> {
                if (event.historySize > 0) {
                    fakeDragBy(
                        event.x - event.getHistoricalX(0)
                    )
                }
                true
            }
            MotionEvent.ACTION_UP -> {
                endFakeDrag()
                requestDisallowInterceptTouchEvent(false)
                performClick()
                true
            }
            else -> {
                false
            }
        }
    }
}

Then in my fragment while setting up the viewpager, I just called that function with the background view as the argument:

myViewPager.receiveFakeDragsFrom(vpBackgroundView)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.