Slide finger vertically to open fragments

Question

I would like to achieve fragments navigation like this:

When I slide finger down somewhere on fragment A, fragment C will be opened (as slide movement), to go back to A slide finger up from C and so on...

I thought about custom ViewPager with vertical swipe direction but I have problem with "Open .." triangles, it should be shared between fragments end rotated during slide movement to change from for example "Open C" to "Open A". Any suggestions ? :)

"I thought about custom ViewPager with vertical swipe direction but I have problem with "Open .." triangles" - this would have have been a better question, seeing as this is a actual coding issue, I'm sure that most people would suggest a `ViewPager`, as "out-of-the-box" it has callbacks for scrolling, and is designed for flipping through Fragments .. — Mark, Sep 25 '18 at 19:15
A combination of both comments should work: `ViewPager2` (forget the old `ViewPager`) to achieve stable vertical paging. And `PageTransformer` to put the `Open` Views in between the fragments. Vertical paging with the old `ViewPager` is not working propery, because the private `slope` parameter is not well-set for different screen sizes (it's only good for hotizontal swipes). This is fixed with `ViewPager2` (amongst other issues). — muetzenflo, Aug 30 '21 at 07:32

score 2 · Answer 1 · answered Aug 31 '21 at 23:23

Create anim folder in res folder. Create file named in_up

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="-100%"
        android:toXDelta="0%"
        android:fromYDelta="0%"
        android:toYDelta="0%"
        android:duration="700"/>

Create another file named out_down

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:toXDelta="0%"
        android:fromYDelta="-100%"
        android:toYDelta="0%"
        android:duration="700"/>

To detect swipe left and right you can use this code.

Create variables

private float y1,y2;
static final int MIN_DISTANCE = 150;

And override onTouchEvent().

  @Override
public boolean onTouchEvent(MotionEvent event)
{
  
    switch(event.getAction())
    {
        case MotionEvent.ACTION_DOWN:
            y1 = event.getY();
            break;
        case MotionEvent.ACTION_UP:
            y2 = event.getY();
            float deltaY = y2 - y1;
            if (Math.abs(deltaY) > MIN_DISTANCE)
            {
                 MyFragment myFragment = new MyFragment();
                 myFragment.show(this.getSupportFragmentManager(), "my fragment");
                 overridePendingTransition(R.anim.in_up, R.anim.out_down);
            }
            break;
    }
    return super.onTouchEvent(event);
}

it's working! but can you tell me how to do that for left to right swiping — Vishal Beep, Sep 01 '21 at 09:12
you can see this link https://stackoverflow.com/a/22091163/14837619 — Yechiel babani, Sep 01 '21 at 20:21

score 0 · Answer 2 · answered Aug 30 '21 at 21:28

This is what I would do:

Use this to listen to swipes

Make some adjustments to this , like enter_from_left would become enter_from_top and code inside changes from:

    android:fromXDelta="-100%" android:toXDelta="0%"
    android:fromYDelta="0%" android:toYDelta="0%"
    android:duration="700"/>

to

   android:fromXDelta="0%" android:toXDelta="0%"
   android:fromYDelta="-100%" android:toYDelta="0%"
   android:duration="700"/>

And make similar changes to other transition xml files.

Check which page I am on and accordingly call replaceFragmentWithAnimation when a swipe is detected.

score 0 · Answer 3 · answered Aug 30 '21 at 22:16

i recommend to simply use Viewpager2 instead of the legacy ViewPager as ViewPager2 uses the recyclerview implementation under the hood so it supports vertical and horizontal swiping. check the documentation to understand how to migrate from ViewPager to ViewPager2

Slide finger vertically to open fragments

3 Answers3