35

I am currently building a horizontal gallery of videos.

I'd like to make something like that with only one video centered and part of previous and next videos: enter image description here

I first opted for a Gallery but its limitations made me look for something else. I'd like to show a page indicator and it is quite difficult to implement using a Gallery.

The second option was to go for a ViewPager from Android Compatibility library. I found a way to implement a page indicator over it. But now, how to partly show left and right pages?

Romain Piel
  • 11,017
  • 15
  • 71
  • 106
  • see this. i had similar problem and this helps me.http://stackoverflow.com/questions/13194666/how-to-set-viewpager-size?answertab=votes#tab-top – user1974235 Apr 04 '13 at 16:32

2 Answers2

47

I used a negative page margin to partly show the next and the previous pages. The fading edge property can be used to make previous/next page fade:

ViewPager examplePager = (ViewPager) findViewById(R.id.exampleView);
examplePager.setPageMargin(-50);
examplePager.setHorizontalFadingEdgeEnabled(true);
examplePager.setFadingEdgeLength(30);

The lastest support package (revision 4, October 2011) is also required for this to work

Konrad
  • 1,285
  • 21
  • 28
  • This causes the pages to have a white gradient on the left, but the left screen still isn't visible, on an Android 2.2 using android-support-v4-r7. On which device did you test this? – marmor May 09 '12 at 07:21
  • @marmor I tested it on a lot of devices, most of them running Android 2.3.3, some Android 2.2 and even some Android 2.1 devices. I had no problem on any of the devices. Does a positive page margin work like expected? Perhaps your views don't have a transparent background so the current view may overlap the adjacent views? – Konrad May 15 '12 at 13:31
  • I tested this on an HTC hero running 2.2, I have a pretty non-standard layout where the left fragment acts as a hidden action bar, so maybe this solution didn't work just in my case. I ended up solving this by applying a padding to the right fragment, thanks! – marmor May 15 '12 at 14:19
  • @Konrad: Thanks for this answer, the negative margin will changes based on the devices, I set the page margin as (-65) and i tested in two devices, HTC one and Xperia Z, in Z its looking good but in htc on the two pages are merged. how can i set this as globally? – Aerrow May 09 '14 at 13:00
  • setPageMargin takes in pixels, you probably want to use dp, there are methods for converting them here: http://stackoverflow.com/questions/8309354/formula-px-to-dp-dp-to-px-android – Daniel Jonker Jun 19 '14 at 03:57
  • First time while scrolling to right it cuts next item.But after scrolling to left it takes given effect.Please help. – Umesh Feb 24 '15 at 13:37
0

enter image description here

Use this code in recyclerview and use snap helper

recyclerView.setAdapter(mAdapter);
LinearLayoutManager layoutManager = new 
LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, 
false);

recyclerView.setLayoutManager(layoutManager);
    new LinearSnapHelper().attachToRecyclerView(recyclerView);

 recyclerView.setScrollingTouchSlop(  recyclerView.TOUCH_SLOP_PAGING);

more info about snaphelper layout

emad pirayesh
  • 654
  • 7
  • 12