Use TabAdapter for scroll horizontal and vertical

Question

Basically I already have a HorizontalAdapters which means I can only swipe left and right and in those swipes I have 3 pages.

public class HorizontalViewPager extends FragmentPagerAdapter {



    public HorizontalViewPager(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position){
            case 0:
                return ChatFragment.create();
            case 1:
                return EmptyFragment.create();
            case 2:
                return StoryFragment.create();
        }
        return null;
    }




@Override
public int getCount() {
    return 3;
}

Now I'm trying to add two more pages on top and below my EmptyFragment so when I swipe up it goes to another page and also when I swipe down.

I have my two fragments that I want to put on top and below my emptyfragment.

This is my MainActivity

public class MainActivity extends AppCompatActivity {

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

    //VerticalViewPager
    me.kaelaela.verticalviewpager.VerticalViewPager verticalViewPager = findViewById(R.id.am_scrollView);
    VerticalViewPager scrollViewAdapter = new VerticalViewPager(getSupportFragmentManager());
    verticalViewPager.setAdapter(scrollViewAdapter);
    verticalViewPager.setPageTransformer(false, new DefaultTransformer());

    //HorizontalViewPager
    View background = findViewById(R.id.am_background_view);
    ViewPager viewPager = findViewById(R.id.am_view_pager);
    HorizontalViewPager adapter = new HorizontalViewPager(getSupportFragmentManager());
    viewPager.setAdapter(adapter);
    viewPager.setCurrentItem(1);

And this is my EmptyFragment

public class EmptyFragment extends Fragment {

    public static EmptyFragment create(){
        return new EmptyFragment();


    }

If you dont under stand what I'm trying to do its basically just a page that you can swipe left,right,up,and down and it views different pages.

MainLayout File

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="c.kristofer.jax2.MainActivity">

<View
    android:id="@+id/am_background_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/green"/>
    <me.kaelaela.verticalviewpager.VerticalViewPager
        android:id="@+id/am_scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <android.support.v4.view.ViewPager
    android:id="@+id/am_view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>


</RelativeLayout>

And my two layout files that I want to put above and below my emptyfragment

    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

</LinearLayout>

And

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/yellow">

</LinearLayout>

score 0 · Answer 1 · answered Jan 07 '18 at 02:13

I answer the exact same question here. Probably you guys do the same class, so be attention with ctrl+c and ctrl+v code.

I will copy

Getting the base from here.

Create a GestureDetectorCompat object

GestureDetectorCompat gestureDetectorCompat;

and override onTouchEvent in the activity

 @Override
        public boolean onTouchEvent(MotionEvent event) {
            gestureDetectorCompat.onTouchEvent(event);
            return true;
        }

or if you want to detect on some view then you can Override onTouch

someView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                gestureDetectorCompat.onTouchEvent(motionEvent);
                return false;
            }
        });

and initialize gestureDetectorCompat as follows somewhere preferably in onCreate() and you are done.

gestureDetectorCompat = new GestureDetectorCompat(this, new GestureDetector.SimpleOnGestureListener() {
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            float angle = (float) Math.toDegrees(Math.atan2(e1.getY() - e2.getY(), e2.getX() - e1.getX()));

            if (angle > -45 && angle <= 45) {
                if(goRight != 5) mainContainer.setCurrentItem(goRight);
                return true;
            }

            if (angle >= 135 && angle < 180 || angle < -135 && angle > -180) {
                if(goLeft != 5) mainContainer.setCurrentItem(goLeft);
                return true;
            }

            if (angle < -45 && angle >= -135) {
                if(goUp != 5)mainContainer.setCurrentItem(goUp);
                return true;
            }

            if (angle > 45 && angle <= 135) {
                if(goDown != 5)mainContainer.setCurrentItem(goDown);
                return true;
            }

            return false;
        }


    });

Then you can use mainContainer.setCurrentItem(number); to go to other position/fragment.

Don't forget that the number change if you are in different number. Like this

switch(adapter.getCurrentItem()){
    case 0:
        goRight = 2;
        goLeft = 4;
        goUp = 3;
        goDown = 1;
        break;
    case 1:
        goRight = 5;
        goLeft = 5;
        goUp = 0;
        goDown = 5;
        break;
    case 2:
        goRight = 5;
        goLeft = 0;
        goUp = 5;
        goDown = 5;
        break;
    case 3:
        goRight = 5;
        goLeft = 5;
        goUp = 5;
        goDown = 0;
        break;
    case 4:
        goRight = 0;
        goLeft = 5;
        goUp = 5;
        goDown = 5;
        break;
}

When you are in the fragment 4 you can only go to 0, not 2 if you swipe left-right.

And this should be your adapter

public class SwipeViewPager extends FragmentPagerAdapter {

public SwipeViewPager(FragmentManager fm) {
    super(fm);
}

@Override
public Fragment getItem(int position) {
    switch (position){
        case 0:
            return EmptyFragment.create();
        case 1:
            return StoryFragment.create();
        case 2:
            return ExtrasFragment.create();
        case 3:
            return ChatFragment.create();
        case 4:
            return SettingsFragment.create();
    }
    return null;
}


@Override
public int getCount() {
    return 5;
}

Where do I put this code mainContainer.setCurrentItem(number); — KristoferH, Jan 07 '18 at 04:39
And also if (angle > -45 && angle <= 45) { if(goRight != 5) mainContainer.setCurrentItem(goRight); return true; } goright is red and also mainContaner is also red — KristoferH, Jan 07 '18 at 04:40
Also where do I put the switch(adapter.getCurrentItem()) codes — KristoferH, Jan 07 '18 at 04:42
@KristoferH mainContainer.setCurrentItem(number); is in the right place already. inside the new GestureDetectorCompat. If something is RED is because you don't created, I'm showing how to solve, but you should understand the code and them implement, not only copy. The switch is in your activity and should be called before change the screen or after you change. — Canato, Jan 07 '18 at 13:36

Prakash S · Answer 2 · 2018-01-07T15:25:39.813

Create one more Fragment with VerticalViewPager inside it and add top, empty and bottom to view pager and set default page to empty page fragment

MainActivity layout should be as below

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="c.kristofer.jax2.MainActivity">

    <View
        android:id="@+id/am_background_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/green"/>

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

The HorizontalViewPager should be like below see VerticalScrollFragment

public class HorizontalViewPager extends FragmentPagerAdapter {


    public HorizontalViewPager(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return ChatFragment.create();
            case 1:
                return VerticalScrollFragment.create();
            case 2:
                return StoryFragment.create();
        }
        return null;
    }


    @Override
    public int getCount() {
        return 3;
    }
}

Then VerticalFragment layout vertical.xml file will be like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context="c.kristofer.jax2.MainActivity">

<me.kaelaela.verticalviewpager.VerticalViewPager
    android:id="@+id/am_scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</RelativeLayout>

Then VerticalFragment class will be like below

public class VerticalScrollFragment extends Fragment {

VerticalViewPager verticalViewPager;
VerticalViewPagerAdapter verticalPageAdapter;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.vertical, null);
    verticalViewPager = view.findViewById(R.id.am_scrollView);
    verticalPageAdapter = new VerticalViewPagerAdapter(getChildFragmentManager());
    verticalViewPager.setAdapter(verticalPageAdapter)
    return inflater.inflate(R.layout.vertical, null);
}

public class VerticalViewPagerAdapter extends FragmentPagerAdapter {


    public HorizontalViewPager(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return TopFragment.create();
            case 1:
                return EmptyFragment.create();
            case 2:
                return BottomFragment.create();
        }
        return null;
    }


    @Override
    public int getCount() {
        return 3;
    }

}

}

I meant Viewpager.setCurrentItem(1) as you want to show middle fragment as default — Prakash S, Jan 07 '18 at 03:49
Oh I already tried what you were asking for then. It doesnt work. Have you tried it before? because it might just be my layout file then. that you can help me with. — KristoferH, Jan 07 '18 at 03:55
Update your question with your main layout file and layout which contains vetticle page. Yes I have worked on same structure in my previous projects — Prakash S, Jan 07 '18 at 03:58
Please check updated answer. Note it show shows on how to implement not a working code — Prakash S, Jan 07 '18 at 15:26
public HorizontalViewPager(FragmentManager fm) { super(fm); The HorizontalViewPager is invalid also my HorizontalViewPager for my 2nd case the VerticalScrollFragment it shows that the .create is invalid — KristoferH, Jan 07 '18 at 17:53

Use TabAdapter for scroll horizontal and vertical

2 Answers2