Google DFP Carousel Banner in ListView

Question

I tried to implement the Goolge DFP Carousel Banner into a ListView.

The DFP Carousel Banner is technically is a WebView with a Horizontal Banner slider in it. (adTag: /6253334/dfp_showcase/carousel)

It works, I can scroll vertically and open an Ad by clicking on it.

But when I start scrolling horizontally on the Carousel View (trough the ListView items), then the Banner is Clicked automatically (what it doesn't should). But tis only happens when I start scrolling horizontally with my finger on the carousel item, not when scrolling vertically trough the carousel items.

Is there a way to prevent sending this touch to the AdView? Strange is also that while the AD-Link opens I am able to scroll trough the listview... I tried to put the Banner into a Custom LinearView:

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {

    switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            xDistance = yDistance = 0f;
            lastX = ev.getX();
            lastY = ev.getY();

            break;
        case MotionEvent.ACTION_MOVE:
            final float curX = ev.getX();
            final float curY = ev.getY();
            xDistance += Math.abs(curX - lastX);
            yDistance += Math.abs(curY - lastY);
            lastX = curX;
            lastY = curY;
            if(yDistance > xDistance)
                return true;
    }
    return super.onInterceptTouchEvent(ev);
}

but the Banner opens the action URL immediately after the ACTION_DOWN is passed to onInterceptTouchEvent.

This is the Code used by Google Carousel

How can I solve this problem?

Answer 1

I detected the Problem. The ListView sends to the WebView a cancel Touch Event. The Code of Google handle the Cancel Event as a click.

So I changed the Javascript Code of Google to not handle the "touchcancel" Event as a click:

// If a scroll moves < snapThreshold, consider it a tap.
Carousel.prototype.onTouchEnd = function (e) {

    // If onTouchEnd was triggered by mouseout, ignore tap.
    if (e.type === 'mouseout') {
        return;
    }
    //if touch cancel was triggered, ignore tap
    if (e.type === 'touchcancel') {
        return;
    }

    if (this.scrolledOut) {
        // Prevent clicks if we've already scrolled out.
        var preventClick = function () {
            e.stopPropagation();
            e.target.removeEventListener('click', preventClick, false);
        };
        e.target.addEventListener('click', preventClick, false);
        this.scrolledOut = false;
        this.onSwipe();
    }
    ....