Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ViewPager nested in ViewPager

I'm really newbie in android and I would appreciate any help for my course work.

I need to do:

1) two ViewPagers (not nested) in one Activity

2) two ViewPagers (one ViewPager is nested in another ViewPager)

I found similar question, but I could not use it.ViewPager inside ViewPager

I add first ViewPager and do not know what to do next

LayoutInflater inflater = LayoutInflater.from(this); //this - context of my activity
List<View> pages = new ArrayList<View>();
View page = inflater.inflate(R.layout.activity_main, null);
//next I adding some buttons on page
pages.add(page);

page = inflater.inflate(R.layout.activity_main2, null);  //my second page
//some buttons
pages.add(page);

page = inflater.inflate(R.layout.activity_main3, null);  //my third page
//some buttons
pages.add(page);

SamplePagerAdapter pagerAdapter = new SamplePagerAdapter(pages);
ViewPager viewPager = new ViewPager(this);
viewPager.setAdapter(pagerAdapter);
viewPager.setCurrentItem(0);          
setContentView(viewPager);

If I add ViewPager2 and say setContentView(viewPager2), I lost my viewPager1. I spent a lot of time for this two questions, please, some help...

//This is my sketch what I need to do. Sorry, I can't attach my scetches...

like image 257
macloving Avatar asked Mar 12 '13 15:03

macloving


People also ask

How does ViewPager work?

ViewPager - How It Works The basic idea is that ViewPager keeps track of what page should be visible on the screen and then asks the PagerAdapter to get the View hierarchy that needs to be displayed.

What is a ViewPager?

ViewPager is a layout manager that allows the user to flip left and right through pages of data. It is mostly found in apps like Youtube, Snapchat where the user shifts right – left to switch to a screen. Instead of using activities fragments are used.

Why use ViewPager?

ViewPager in Android is a class that allows the user to flip left and right through pages of data. This class provides the functionality to flip pages in app. It is a widget found in the support library. To use it you'll have to put the element inside your XML layout file that'll contain multiple child views.

How do I stop ViewPager from scrolling?

A simple solution is to create your own subclass of ViewPager that has a private boolean flag, isPagingEnabled . Then override the onTouchEvent and onInterceptTouchEvent methods. If isPagingEnabled equals true invoke the super method, otherwise return .


3 Answers

I added an OnTouchListener to the interior ViewPager:

private OnTouchListener mSuppressInterceptListener = new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(
                event.getAction() == MotionEvent.ACTION_DOWN &&
                v instanceof ViewGroup
        ) {
                ((ViewGroup) v).requestDisallowInterceptTouchEvent(true);
        }
        return false;
    }
};

This just detects ACTION_DOWN touch events on the inner ViewPager and prevents the outer one from intercepting it. Because it returns false, only the ACTION_DOWN event should be hit; all the other events will be ignored. You can add this listener to every element you want to "protect" from the outer ViewPager's scrolling, though obviously if you want to pick up any other touch behaviour on those elements you'll need to deal with them inside the touch listener and possibly implement a better listener.

like image 96
Andrew Wyld Avatar answered Oct 10 '22 06:10

Andrew Wyld


I think you should reconsider having a viewpager inside another viewpager. You will have a lot of problems with the touch events plus the user experience might be confusing/tricky, I suggest you to rethink that one.

Now for question 1:

Declare both viewpagers in the xml file of the activity (/layout/activity.xml), for example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
            android:id="@+id/viewpager1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    <android.support.v4.view.ViewPager
            android:id="@+id/viewpager2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

</LinearLayout>

Then inflate the xml on the onCreate method of your activity and wire both of the viewpagers:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity);

    mViewpager1 = (ViewPager) findViewById(R.id.viewpager1);
    mViewpager2 = (ViewPager) findViewById(R.id.viewpager2);
}

Don't forget to declare those two variables private ViewPager mViewpager1, mViewpager2;

Then you can do whatever you want with mViewpager1 and mViewpager2. One more tip, i suggest you to use adapters to set the pages instead of adding them manually one by one to each viewpager, it will be much cleaner and better to operate with.

like image 39
Javier Mendonça Avatar answered Oct 10 '22 05:10

Javier Mendonça


A solution about having a nested Viewpager and disabling the nested Viewpager swiping (if you want to set the selected pages with buttons in the nested)

For the nested You SubClass ViewPager and you add these:

 public boolean onInterceptTouchEvent(MotionEvent event) {
        //if you want to send the Touches to this Viewpager (the nested) //change true to false
      return true;    
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // Never allow swiping to switch between pages on this inner 

        //send swipe to father instead of child
        if (this.getParent()!=null &&  this.getParent() instanceof ViewPager) {
            ((ViewPager) this.getParent()).onTouchEvent(event);
        }
        return false;
    }

In the Layouts you put this:

<com.mypackage.mycustomapp.myviews.MyViewPager
            android:id="@+id/myNestedviewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
like image 36
aimiliano Avatar answered Oct 10 '22 07:10

aimiliano