How to make horizontal scrolling view in android?

Update: It appears as though the android.widget. Gallery layout can provide this same functionality. I’m not sure how it was missed when building this out, but if you’re interested in a custom solution, read on!

This type of view is fairly common in the mobile world, but doesn’t come out of the box with the Android SDK. Think of the home screen(s) on an Android device. You can slide between each home screen and when you lift your finger, it “snaps” to the most appropriate screen.

This is fairly simple to build yourself using the existing HorizontalScrollView (or regular ScrollView for vertical scrolling) and adding some code on top of it to handle snapping to each screen. In this post, I’ll show you how I implemented this view for a rotating article feature. If the user slowly scrolls from one screen to another, the view should snap to the screen that is showing more than 50% when the user lifts their finger.

If the user quickly swipes in one direction, the view should scroll to the next (or previous) screen even if less than 50% of the next/previous screen is showing. This allows users to quickly scroll through the features without requiring a long swipe each time. First, create your own view and extend HorizontalScrollView.

My sample below has a few constants for determining a “swipe”, as well as an array of Article items (one for each screen), a GestureDetector for detecting the swipe, and an integer value to keep track of the active feature. The next step is to create a method that adds each screen to your horizontal scroll view. In my example, I first create a LinearLayout to hold my screens (1 for each article).

Then I iterate through each article, creating a view for each and adding it to my LinearLayout. Next, we’ll handle the “slow drag and release” requirement by setting the “OnTouchListener” for the view. This listener will be triggered every time there is a touch event on our Scroll View, so we can easily trap out the relevant actions and handle them appropriately.

We want to trigger our custom logic on the “ACTION_UP” and “ACTION_CANCEL” touch actions, so the snap happens when the user either lifts their finger, or the touch action is cancelled for any reason. In the sample below I’m first checking for the fast swipe case (which will be described next) and then checking for the ACTION_UP or ACTION_CANCEL actions.