Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android ViewPager with ScrollViews with ViewPagers inside the ScrollViews

So I have my activity which has a main ViewPager and inside of the ViewPager each page has the whole content as a ScrollView and inside of that ScrollView there is another ViewPager.

This might sound crazy but basically the outer ViewPager contains news articles, and the articles are long so there is a ScrollView, and inside the ScrollView there are multiple thumbnails/pictures that they can swipe through as well.

I've tried a few different custom ViewPagers with different touch event interception but can't seem to get it perfect. It either completely will absorb all touch events so that the vertical scrolling of the ScrollView doesn't work in that area, or it will be really touchy/difficult to get the inner one to scroll horizontally.

Anyone have a perfect solution?

like image 234
egfconnor Avatar asked Jun 11 '13 20:06

egfconnor


People also ask

What is Android viewpager or scrolling tab?

In this article you will learn about Android ViewPager or Scrolling TAB. A ViewPager in Android is just like a ListView, it takes the views and displays it one at a time and handles switching between views with the help of an adapter just like the ListView does. ViewPager is a layout manager where each child is a separate page.

How to dynamically add or delete a view from view pager?

We can dynamically add or delete a view from view pager. Here notifyDataSetChanged () is useful only when there is change in view pager data (either items in view pager is added or removed) , not to refresh contents of fragment. To add view Dynamically: To delete any page dynamically: It is as simple as adding or removing an item from List View .

How to create a view pager in Laravel?

It is a good way to create our view pager by extending PagerAdapter. Instead of creating fragments , create custom views and pass it to Pager class. Here our views are independent of lifecycle callbacks. In this way , the view pager is implemented with the static list of views. We can dynamically add or delete a view from view pager.

How do I zoom out a page in a viewpager?

zoomOutTransformation: This method helps the ViewPager to animate the view or zoom out when swiping through the pages. onCreate: In this method, we’re setting a FULL_SCREEN flag, creating a ViewPagerAdapter, setting page transformation for zoom out, and finally adding a ViewPager page change listener.


1 Answers

In case anyone wants to know my solution:

public class CustomScrollView extends ScrollView {
private GestureDetector mGestureDetector;
View.OnTouchListener mGestureListener;

public CustomScrollView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mGestureDetector = new GestureDetector(context, new YScrollDetector());
    setFadingEdgeLength(0);
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    return super.onInterceptTouchEvent(ev)
            && mGestureDetector.onTouchEvent(ev);
}

// Return false if we're scrolling in the x direction
class YScrollDetector extends SimpleOnGestureListener {
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2,
            float distanceX, float distanceY) {
        if (Math.abs(distanceY) > Math.abs(distanceX)) {
            return true;
        }
        return false;
    }
}
}

and the outer most ViewPager is:

public class NestingViewPager extends ViewPager {

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

public NestingViewPager(final Context context) {
    super(context);
}

@Override
protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) {
    if (v != this && v instanceof ViewPager) {
        return true;
    }
    return super.canScroll(v, checkV, dx, x, y);
}
}
like image 176
egfconnor Avatar answered Oct 25 '22 03:10

egfconnor