12

I need simple control for icon choosing on Android 2.2 and higher.
Gallery was a better solution for me, but it is deprecated and I have to use HorizontalScrollView and ViewPager instead.
But how to migrate easy? How to use this classes and controls in this case? I've try to find complete example for this subject, but I can't find it.

Xharze
  • 2,703
  • 2
  • 17
  • 30
BArtWell
  • 4,176
  • 10
  • 63
  • 106
  • @CommonsWare, can you look at this one: http://stackoverflow.com/questions/13086991/display-of-multiple-pages-in-viewpager-incorrect-position – burakk Oct 27 '12 at 12:04

2 Answers2

28

This gist from Dave Smith shows a way to use ViewPager to have visual results very similar to a Gallery:

Gallery-style ViewPager

Quoting my blog post on the topic of showing multiple pages at a time in a ViewPager:

His container (com.example.pagercontainer.PagerContainer) wraps the ViewPager and calls setClipChildren(false); on itself, so even though the ViewPager is focused on one selected page, other pages that have coordinates beyond the ViewPager bounds are still visible, so long as they fit within the PagerContainer. By sizing the ViewPager to be smaller than the PagerContainer, the ViewPager can size its pages to that size, leaving room for other pages to be seen. PagerContainer, though, needs to help out a bit with touch events, as ViewPager will only handle swipe events on its own visible bounds, ignoring any pages visible to the sides.

You might also want to sift through this android-developers thread, where somebody pointed out an issue with this on newer Android versions. You need to disable hardware acceleration due to a bug in ViewPager.

CommonsWare
  • 986,068
  • 189
  • 2,389
  • 2,491
  • Thank you for answer! But this example from Dave Smith require API version 11, and I need 8... – BArtWell Sep 03 '12 at 08:01
  • @BArtWell: What makes you say that it requires API Level 11? `ViewPager` works back to API Level 4 AFAIK. – CommonsWare Sep 03 '12 at 10:36
  • "Call requires API level 11 (current min is 8): android.widget.FrameLayout#setLayerType" in setLayerType(View.LAYER_TYPE_SOFTWARE, null); – BArtWell Sep 03 '12 at 16:45
  • @BArtWell: You do not need to call that on older versions of Android. Simply call that only on API Level 11, by checking the version using `android.os.Build.VERSION.SDK_INT`. – CommonsWare Sep 03 '12 at 16:58
  • yes, it help, thank's! Now I see that Dave Smith's solution is works, but it show only one picture at the moment (Gallery was show 3 and central is selected). P.S. Why Gallery is deprecated? :( It was so easy and so handy... – BArtWell Sep 03 '12 at 21:52
  • @BArtWell: That is the bug -- if you disable hardware acceleration as described in the android-developers thread, it works. – CommonsWare Sep 03 '12 at 21:54
  • Ok, I understand, thank's. May be I can stay on Gallery? It is so easy-to-use... Or this is totally inadmissible? – BArtWell Sep 03 '12 at 21:57
  • @BArtWell: "Deprecated" in Android means "this is no longer recommended, but we will continue to support it as long as possible". If you want to go with `Gallery` for the short term, that's fine, but I would look to try to do something else within, say, a year. Since `ViewPager` is in the Android Support package, the hardware acceleration related bug could be fixed in the next few months. – CommonsWare Sep 03 '12 at 22:01
  • @CommonsWare:I am displaying three view in a screen.How to get positions of left and right view when click on a view. I am always getting right side view position even i clock on left side view – koti Feb 07 '13 at 11:17
  • hi. i tried the PagerContainer and all the hints about hardware acceleration, but i don't get it working. neither on nexus 7, 4 or emulator. i can only see the center image, but not prev/next. i use a custom ViewPager witch measures childs heigths and a relative layout with two imageviews inside. maybe someone have more suggestions ? – Romain Scherfflein Jul 10 '13 at 21:28
  • 1
    Hi @CommonsWare. I've got a couple of questions. 1) Does this solution includes any recycling mechanism? 2) How do handle **selection events**? Does it consider **selection events** at all? – Axel Mar 15 '15 at 18:38
  • @Axel: "Does this solution includes any recycling mechanism?" -- no. "How do handle selection events? Does it consider selection events at all?" -- being the current page in the `ViewPager` would correspond to being selected in a `Gallery`. – CommonsWare Mar 15 '15 at 18:42
  • I see. @CommonsWare please do you think you could take a quick look at this question http://goo.gl/Z9UzQv ? It's related to this one. I know you're a busy man, but just a comment or perhaps some hints you could give me, I'm sure they would point me in the right direction. Thanks. – Axel Mar 15 '15 at 18:51
4

There are various problems with touch handling and hardware acceleration in CommonsWare's linked workaround. A simpler and more elegant solution, in my opinion, is to specify a negative margin for the ViewPager:

ViewPager.setPageMargin(
    getResources().getDimensionPixelOffset(R.dimen.viewpager_margin));

I then specified this dimension in my dimens.xml:

<dimen name="viewpager_margin">-64dp</dimen>

To compensate for overlapping pages, each page's content view has the opposite margin:

android:layout_marginLeft="@dimen/viewpager_margin_fix"
android:layout_marginRight="@dimen/viewpager_margin_fix"

Again in dimens.xml:

<dimen name="viewpager_margin_fix">32dp</dimen>

(Note that the viewpager_margin_fix dimension is half that of the absolute viewpager_margin dimension.)

We implemented this in the Dutch newspaper app De Telegraaf Krant:

Phone example in De Telegraaf KrantTablet example

Paul Lammertsma
  • 37,593
  • 16
  • 136
  • 187
  • Your approach seems pretty nice, can you show the whole source code? I can't see if you handle the first element with a specific treatment. I can't reproduce the behaviour entirely. Thanks for share anyway! – raultm Jan 20 '14 at 16:20
  • Yes, the primary problem with this approach is that you have to specify the overlap as a dimension manually. This doesn't scale well for different device classes, so in my own implementations I've subclassed ViewPager to compute it dynamically in `onLayout()`. I've frequently been asked to open source it; I will when I have a moment to spare. In the meantime, see also the remarks on [my answer to a related question](http://stackoverflow.com/questions/9468581/can-viewpager-have-multiple-views-in-per-page/15006910#15006910). – Paul Lammertsma Jan 20 '14 at 16:26
  • I appreciate the redirect. I'll see if I can make work it out. – raultm Jan 20 '14 at 16:59
  • Ok, I think I got it. I need to work more on it but looks like it's the path. – raultm Jan 20 '14 at 18:00