Angry Birds like scrolling menu

Question

When you start Angry Birds and hit play you are shown a horizontally scrolling menu with a centered line of images that once clicked on you can start the game and what not. I was wondering how to make a menu simular to this in that it scrolls sideways (horizontally) and shows tappable images? Thanks in advance!

Answer 1

I would think that you can accomplish this with HorizontalScrollView. The child of your HorizontalScrollView will be a LinearLayout with orientation:horizontal. It will contain ImageViews or ImageButtons. In order to achieve the 'snap to' effect that the one in Angry Birds has you'd have to set an onTouchListener() for your scroll view, and inside the ACTION_UP section you'd check hScrlView.getScrollX() to see which image you are closest to, then call hScrlView.scrollTo(x,y) and make the x parameter the layout x value of the image that you are closest to.

Edit: I have not ever personally used a GalleryView but based on this tutorial it seems like you could probably get it to work that way. And it might handle the 'snap to' mechanic for you so you wouldn't have to make your own touch listener to do that. Im not sure if you can set space between the images(the pictures in Angry Birds are spread out quite a bit) in a gallery though, which I know for sure that you can if you use a HorizontalScrollView and a Linear or Relative Layout.

Answer 2

You can do that using an Gallery, and in your adapter you add the TouchListeners to the ImageViews from each item. This is the best way, cause the Gallery will give support to each image get centered when you are scrolling. With HorizontalScrollView you got only scroll with fling, and the items of your menu will not be centralized.