Android Viewpager with next and previous visible pages

In this blog, I will show you a small technique to make the Viewpager attractive.

By the implementation of  a PagerAdapter, we make the views which allows the user to flip left and right through pages of data.

ViewPager is most often used in conjunction with Fragment, which is a useful way to supply and manage the lifecycle of each page.

Let’s start,

Create a simple Viewpager

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

1 2 3 4

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

I gave the name of the viewpager to banner_pager.

Create an adapter to set the data to Viewpager

I have created an adapter named HomeImagePagerAdapter.

public class HomeImagePagerAdapter extends PagerAdapter { private List<Banner> images; Context mContext; public HomeImagePagerAdapter(Context context, List<Banner> images) { this.images = images; mContext = context; } @Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView((View) object); } @Override public int getCount() { return images.size(); } @Override public Object instantiateItem(ViewGroup view, final int position) { LayoutInflater inflater = LayoutInflater.from(mContext); HomeViewPagerBannerBinding bannerBinding = DataBindingUtil.bind(inflater.inflate(R.layout.home_view_pager_banner, view, false));//HomeViewPagerBannerBinding.bind(view); bannerBinding.setData(images.get(position)); bannerBinding.executePendingBindings(); return bannerBinding.getRoot(); } @Override public boolean isViewFromObject(View view, Object object) { return view.equals(object); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

public class HomeImagePagerAdapter extends PagerAdapter {       private List<Banner> images;     Context mContext;     public HomeImagePagerAdapter(Context context, List<Banner> images) {         this.images = images;         mContext = context;     }       @Override     public void destroyItem(View container, int position, Object object) {         ((ViewPager) container).removeView((View) object);     }       @Override     public int getCount() {         return images.size();     }       @Override     public Object instantiateItem(ViewGroup view, final int position) {         LayoutInflater inflater = LayoutInflater.from(mContext);         HomeViewPagerBannerBinding bannerBinding = DataBindingUtil.bind(inflater.inflate(R.layout.home_view_pager_banner, view, false));//HomeViewPagerBannerBinding.bind(view);         bannerBinding.setData(images.get(position));         bannerBinding.executePendingBindings();         return bannerBinding.getRoot();     }       @Override     public boolean isViewFromObject(View view, Object object) {         return view.equals(object);     } }

Set the adapter to the Viewpager

mainBinding.bannerPager.setAdapter(new HomeImagePagerAdapter(mContext, mainData.getBanner()));

1	mainBinding.bannerPager.setAdapter(new HomeImagePagerAdapter(mContext, mainData.getBanner()));

I have passed an array of banners to this adapter.

At this point, the Viewpager is done and working fine.

So make it more attractive.

Make previous and next pages visible in Viewpager

mainBinding.bannerPager.setClipToPadding(false); mainBinding.bannerPager.setPadding(48, 0, 48, 0); mainBinding.bannerPager.setPageMargin(24);

1 2 3

mainBinding.bannerPager.setClipToPadding(false); mainBinding.bannerPager.setPadding(48, 0, 48, 0); mainBinding.bannerPager.setPageMargin(24);

These above lines make your view pager attractive. You can also add the Viewpager transition to make it more attractive.

You can follow this GitHub link to add a transition in the Viewpager. Or you can create it by your self.

This is the link: https://github.com/geftimov/android-viewpager-transformers.

If you have any issue or doubt please comment below. And keep update and stay super.