How to implement an endless gallery in Android?

Question

I am using a gallery layout in my application. It is working when the user moves the pictures in the gallery from left to right (it is infinite that means elements are repeated again). But when the user moves from right to left and reaches the first element, it doesn't. After then no elements are coming. But I want to repeat elements from this side also. Can you give me some suggestions?

 Gallery g = (Gallery) findViewById(R.id.gallery);
        g.setAdapter(new ImageAdapter(this));
        g.setFocusable(true);
        g.setSelection((int)(Integer.MAX_VALUE / 2) - (Integer.MAX_VALUE / 2)% mImageIds.length);        
        g.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) 
            {
                try {
                    imageid=position;
                    ((ImageView)findViewById(R.id.ImageViewlarge)).setImageResource(mImageIds[position]);
                    ((TextView)findViewById(R.id.TextViewImageName)).setText(imgNames[position]);
                     mp = MediaPlayer.create(SeaSpell.this,audioTrack[position]);

                        } catch (Exception e) {
                                // TODO Auto-generated catch block
                                e.printStackTrace();
                            }

                }
            });


        }

How can I make my gallery view circular? I am able to do it from left to right infinitely, but when I drag from right to left it is showing the end point.

Answer 1

the Adapter code for reece's explanation can be found here: android circular gallery?

just be sure to use gogothee's suggestion to move the initial selection to the mid-point of the range. (so that you can scroll left and right almost forever). For Example, I did it like this:

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.mylayout);

    //get references to UI components
    mGallery = (Gallery) findViewById(R.id.filter_gallery);

    //connect Galleries with adapters
    mGallery.setAdapter(new GalleryAdapter(this));

    //auto-select first image (position 1073741820)
    mGallery.setSelection((int)(Integer.MAX_VALUE/2) - ( (Integer.MAX_VALUE/2) % mImageBuffer.getCount() ) );
}

Answer 2

To make first element as center of available array:

your_gallery_obj.setSelection((int)( Integer.MAX_VALUE / 2 ) - ( Integer.MAX_VALUE / 2 ) % your_array_size);

To make middle element as center of available array :

your_gallery_obj.setSelection((int)(Integer.MAX_VALUE/2) + (Integer.MAX_VALUE/2) % your_array_size);

Answer 3

A shameless self plug, just wrote an Infinite Scrolling Gallery Tutorial:

http://blog.blundell-apps.com/infinite-scrolling-gallery/

I use the same modulas maths as @reece, source code can also be downloaded.

You can use images on your SD card or images in your /resources/drawable directory

Answer 4

If anyone wanted to make it also go backwards, you can implement this. All it really does it is start the gallery in the middle.

GalleryName.setSelection((int)( Integer.MAX_VALUE / 2 ) - ( Integer.MAX_VALUE / 2 ) % mImageIds.length);

Answer 5

In getView:

if(position>21){
    position=0;
}

this should be removed as it should be handled by the checkPosition function.

In checkPosition:

For the modulus operator (%), given a % b if 0 <= a < b then the result will be a. For b <= a < 2*b then the result will be a-b, so if b == a, then the result is 0. This continues for any positive integer, so the check should be:

if (position > 0)
    position = position % mImageIds.length;

Now, what you are missing from this is handling the case where position < 0.

a    a%3    a    a%3    f(a)
0    0      0    0      0
1    1     -1   -1      2
2    2     -2   -2      1
3    0     -3    0      0
4    1     -4   -1      2
5    2     -5   -2      1
6    0     -6    0      0

What we want in this case is for it to wrap back around to the end of the list -- the f(a) in the table above.

As can be seen in the table above, if a is negative then -b < a <= 0. Also, if we make f(a) = (a % b) + b we get our desired result.

This means that the logic in checkPosition becomes:

position = position % mImageIds.length;
if (position < 0)
    position = position + mImageIds.length;

which should work for all values of position irrespective of the value of mImageIds.length.