Align The Child Views In Center Of The Viewpager Android

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 below 1

Solution 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.

Solution 2:

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)

Solution 3:

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.

Solution 4:

I found solution in this post, below the code i used:

// Offset between sibling pages in dpint pageOffset = 20;

// Visible part of sibling pages at the edges in dpint sidePageVisibleWidth = 10;

// Horizontal padding will beint horPadding = pageOffset + sidePageVisibleWidth;

// Apply parameters
viewPager.setClipToPadding(false);
viewPager.setPageMargin(UIUtil.dpToPx(pageOffset, getContext()));
viewPager.setPadding(UIUtil.dpToPx(horPadding, getContext()), 0, UIUtil.dpToPx(horPadding, getContext()), 0);

dpToPx code:

publicstaticintdpToPx(int dp, Context context){
        float density = context.getResources().getDisplayMetrics().density;
        return Math.round((float) dp * density);
    }

This is all you need

Solution 5:

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)