How to switch from Gallery to HorizontalScrollView & ViewPager?

Question

I need simple controls to select an icon on Android 2.2 and higher.
Gallery was the best solution for me, but it is deprecated, and instead I have to use HorizontalScrollView and ViewPager .
But how easy is it to migrate? How to use these classes and controls in this case? I am trying to find a complete example for this subject, but I cannot find it.

Answer 1

This method from Dave Smith shows how to use ViewPager so that the visual results are very similar to Gallery :

Quote from my blog post about showing multiple pages at a time in ViewPager :

Its container ( com.example.pagercontainer.PagerContainer ) wraps the ViewPager and calls setClipChildren(false); by itself, so even if the ViewPager centered on one selected page, other pages that have coordinates outside the ViewPager are still visible if they fit the size of the PagerContainer . If the ViewPager smaller than the PagerContainer , the ViewPager can resize pages to that size, leaving room for other pages to view. PagerContainer , however, needs a little help with touch events, since ViewPager will only handle swipe events at its visible borders, ignoring any pages visible on the sides.

You can also sift through this stream of android developers , where someone pointed out a problem with new versions of Android. You need to disable hardware acceleration due to an error in ViewPager .

Answer 2

There are various sensory processing and hardware acceleration issues in the CommonsWare-associated workaround. A simpler and more elegant solution, in my opinion, is to specify a negative field for the ViewPager:

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

Then I specified this dimension in my dimens.xml :

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

To compensate for overlapping pages, each page view has the opposite edge:

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

Again in the dimens.xml :

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

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

We applied this in an application for the Dutch newspaper De Telegraaf Krant :