Chris Biscardi

moon indicating dark mode
sun indicating light mode

Handling Taps on List/Grid Items with ViewPagers (GestureDetector)

When placing a ViewPager inside of a GridView recently I ran into the issue of the ViewPager stealing the GridView Items’ click event. I had lost my click event, but the ViewPager was still scrolling fine.

With the following GridView:

<?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">
<GridView
android:id="@+id/bar_gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
android:stretchMode="columnWidth"
android:numColumns="1" />
</FrameLayout>

and a grid item view with a ViewPager (reduced for simplicity):

<com.christopherbiscardi.grid.MyGridItemFrame xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/grid_item_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.christopherbiscardi.grid.MyViewPager
android:id="@+id/my_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.christopherbiscardi.grid.MyGridItemFrame>

We can intercept the touch event on MyGridItemFrame, which sits between the GridView and the ViewPager by extending GestureDetector.SimpleOnGestureListener and overriding onInterceptTouchEvent. In this case all we care about is handling the tap (onSingleTapUp) and we will let the scroll pass through to the ViewPager.

package com.christopherbiscardi.grid;
public class MyGridItemFrame extends FrameLayout {
final GestureDetector mGestureDetector = new GestureDetector(new MyGestureListener());
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return mGestureDetector.onTouchEvent(event);
}
class MyGestureListener extends GestureDetector.SimpleOnGestureListener {
@Override
public boolean onSingleTapUp(MotionEvent event) {
Toast.makeText(getContext(), "clicked Grid Item", Toast.LENGTH_SHORT).show();
return true;
}
}
}