View in the view pager overlap between previous and next view

Question

I am using ViewPager for sliding effect in my app.

I have pager.setPageMargin() to make next and previous views visibility, unfortunately my next view is over lapping with current view.

Below is my code

pager = (ViewPager) findViewById(R.id.myviewpager);

    adapter = new MyPagerAdapter(this, this.getSupportFragmentManager());
    pager.setAdapter(adapter);
    pager.setOnPageChangeListener(adapter);



    // Set current item to the middle page so we can fling to both
    // directions left and right
    pager.setCurrentItem(FIRST_PAGE);

    // Necessary or the pager will only have one extra page to show
    // make this at least however many pages you can see
    pager.setOffscreenPageLimit(10);

    // Set margin for pages as a negative number, so a part of next and 
    // previous pages will be showed

    //
    pager.setPageMargin(-450);

I am using fragment in the pager. I am getting output as attached with this thread, but need views being place properly with out over lapping

part marked in above picture should go behind the centre card.

Answer 1

since you are setting pager.setPageMargin(-450); you also need to give 240 padding to the ViewPage's child fragment and pager.setClipToPadding(false); for smooth animation.

if someone still looking for solution, I had customized the ViewPage to achieve it without using negative margin, find a sample project here https://github.com/44kksharma/Android-ViewPager-Carousel-UI it should work in most cases but you can still define page margin with mPager.setPageMargin(margin in pixel);

Answer 2

Try this:

    pager.setClipToPadding(false);
    pager.setPadding(50, 0, 50, 0);

instead of:

    pager.setPageMargin(-450);

Answer 3

Actually i brought the required view to the front

view.bringToFront();

Note: Want to identify the correct Layout which is in centre of view pager's current displaying page

Answer 4

pager.setPadding(0, 0, 0, 0);
pager.setPageMargin(0, 0, 0, 0);

You just use match_parent for height and width of viewpaper tks. hope it useful for you

Answer 5

I’ve find a solution for post-KitKat version. Basically what I did is increase the elevation of the current center view. (I'm still working for pre-Lollipop solution)

Here's my code, Set an OnPageChangeListener to your viewpager and, in OnPageSelected Method

     @Override public void onPageSelected(int position) {

      //Counter for loop
      int count = 0;
      int PAGER_LOOP_THRESHOLD = 2;
      if (position >= PAGER_LOOP_THRESHOLD) {
        count = position - PAGER_LOOP_THRESHOLD;
      }
      do {
        Fragment fragment = (Fragment) adapter.instantiateItem(pager, count);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP
            && fragment.getView() != null) {

          //If it's current center position, increase view's elevation. Otherwise, we reduce elevation
          if (count == position) {
            fragment.getView().setElevation(8.0f);
          }
          else {
            fragment.getView().setElevation(0.0f);
          }
        }
        count++;
      } while (count < position + PAGER_LOOP_THRESHOLD);
    }

Answer 6

First, the viewpager items are stacked like a stack. so when it gives a margin value, only a space is added in between. For this, you should use transformer and set the translationZ value for these features.

There are usually 3 views and you have to set the position for each.

position < 0 -> {
  alpha = 1f
  translationX = -width * MAX_SCALE * position
  ViewCompat.setTranslationZ(this, position)
  val scaleFactor = (MIN_SCALE
                       + (1 - MIN_SCALE) * (1 - abs(position)))
  scaleX = scaleFactor
  scaleY = scaleFactor
}

Also you can define 0.75f max and min scale. For all code:

override fun transformPage(view: View, position: Float) {
        with(view) {
            when {
                position < -1 -> {
                    alpha = 1f
                }
                position < 0 -> {
                    alpha = 1f
                    translationX = -width * MAX_SCALE * position
                    ViewCompat.setTranslationZ(this, position)
                    val scaleFactor = (MIN_SCALE
                            + (1 - MIN_SCALE) * (1 - abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                position == 0f -> {
                    alpha = 1f
                    scaleX = 1f
                    scaleY = 1f
                    translationX = 0f
                    ViewCompat.setTranslationZ(this, 0f)
                }
                position <= 1 -> {
                    alpha = 1f
                    translationX = width * MAX_SCALE * -position
                    ViewCompat.setTranslationZ(this, -position)
                    val scaleFactor = (MIN_SCALE
                            + (1 - MIN_SCALE) * (1 - abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                else -> {
                    alpha = 1f
                }
            }
        }
    }

You should apply it to the class you created

class OverlapPageTransformer : ViewPager2.PageTransformer {
     override fun transformPage(view: View, position: Float) {}
}

Last;

 yourPager.apply {
     setPageTransformer(OverlapPageTransformer())
 }