Align the child views in center of the ViewPager android

Question

I need to set the child view as center of the ViewPager and also I would like to show some part of the next and previous views to the current view sides(like current screen

Answer 1

For one app I implemented similar the following way, with standard ViewPager:

• Make pages full-screen with the actual content in an inner layout. For example, make the full-screen layout a RelativeLayout with transparent background and the actual content another RelativeLayout centered in the parent. If I remember right, the reason for this was that with just the inner layout as a page, the ViewPager would not have taken all the screen width on some devices such as Galaxy Nexus.

• Use ViewPager.setPageMargin() to set up a negative page margin i.e. how much of the next/previous page you want to show. Make sure it only overlaps the transparent region of the parent full-screen layout.

• Call ViewPager.setOffscreenPageLimit() to adjust the off-screen page count to at least 2 from the default 1 to ensure smooth paging by really creating the pages off-screen. Otherwise you will see next/previous pages being drawn while already partially showing on screen.

Answer 2

Finally, I have added my solution for this question in GitHub. I have done some pretty tricks to get the workaround solution. You can get the project from the below link(Actually I have planned to create a blog with the explanation , but I dint have that much time to do).

Here is the link(https://github.com/noundla/Sunny_Projects/tree/master/CenterLockViewPager)

You have to copy the files from com.noundla.centerviewpagersample.comps package to your project. And you can see the usage of that Viewpager in MainActivity class.

Please let me know if anyone has problems with this.

Answer 3

For anyone upset that the OP didn't update his question with the solution here is a link that explains, with minimal effort, how to pull this off in XML: http://blog.neteril.org/blog/2013/10/14/android-tip-viewpager-with-protruding-children/

Basically when you declare your viewpager in XML, give it the same left and right padding and set android:clipToPadding="false". (The clipToPadding is missing in his xml sample and necessary to achieve this effect)

Answer 4

Extend HorizontalScrollView class as the parent for the scrolling view. In the onMeasure() method you can specify the width and height of each child. Little cumbersome way but the effect will be good and you can have a good hold on your child view.

Answer 5

I had to center current page in view pager with different page widths, so solution with paddings was not suitable. Also user scrolling was disabled (it was tab bar view pager, scrolled by another view pager). Here is a very simple solution to do that - just override ViewPager.ScrollTo method just like this (C# code, Xamarin):

public override void ScrollTo(int x, int y)
{
    x -= (int) (MeasuredWidth * (1 - Adapter.GetPageWidth(CurrentItem)) / 2);

    base.ScrollTo(x, y);
}

And if you calculate page width for each fragment don't forget to cache them in array.

Answer 6

You can use padding for viewPager and set clipToPadding false

Java

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

Kotlin

 viewPager.clipToPadding = false
 viewPager.setPadding(50, 0, 50, 0)