How to migrate from Gallery to HorizontalScrollView & ViewPager?

Question

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.

Answer 1

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

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.

Answer 2

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: