android circular gallery?

Question

I am a newbie to android development.Now i would like to do gallery view as circular like image as below.The things is that i want to enlarge the center image when user scroll from left to right and right to left. Is there any tutorials for that ?

what I want is the image that's been swiped need to be enlarged while it's at the center. I thought I could do it with Gallery. but the example from the android developer is not the one I want. :(

Answer 1

youcan try:

public class TestGallery extends Activity {
/** Called when the activity is first created. */
private Integer[] mImageIds = { R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4 }; 

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Gallery g = (Gallery) findViewById(R.id.gallery); 
    g.setAdapter(new ImageAdapter(this)); 

    g.setOnItemClickListener(new OnItemClickListener() { 
        public void onItemClick(AdapterView parent, View v, int position, long id) { 
            if (position >= mImageIds.length) { 
                position = position % mImageIds.length; 
            } 
            Toast.makeText(TestGallery.this, "" + position, Toast.LENGTH_SHORT).show(); 
        } 
    }); 

}

public class ImageAdapter extends BaseAdapter { 
    int mGalleryItemBackground; 
    private Context mContext; 

    public ImageAdapter(Context c) { 
        mContext = c; 
        TypedArray a = obtainStyledAttributes(R.styleable.Gallery1); 
        mGalleryItemBackground = a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 0); 

        a.recycle(); 
    } 

    public int getCount() { 
        return Integer.MAX_VALUE; 
    } 

    public Object getItem(int position) { 
        if (position >= mImageIds.length) { 
            position = position % mImageIds.length; 
        } 
        return position; 
    } 

    public long getItemId(int position) { 
        if (position >= mImageIds.length) { 
            position = position % mImageIds.length; 
        } 
        return position; 
    } 

    public View getView(int position, View convertView, ViewGroup parent) { 
        ImageView i = new ImageView(mContext); 
        if (position >= mImageIds.length) { 
            position = position % mImageIds.length; 
        } 
        i.setImageResource(mImageIds[position]); 
        i.setLayoutParams(new Gallery.LayoutParams(80, 80)); 
        i.setScaleType(ImageView.ScaleType.FIT_XY); 
        i.setBackgroundResource(mGalleryItemBackground); 
        return i; 
    } 

    public int checkPosition(int position) { 
        if (position >= mImageIds.length) { 
            position = position % mImageIds.length; 
        } 
        return position; 
    } 
}}

Answer 2

I created my own tutorial for this: http://evgeni-shafran.blogspot.com/2011/08/tutorial-custom-gallery-circular-and.html

For it to be circular you need to make it think that it have A LOT of items, a lot more then you really have.

And then by making position= position % items.length you create something like (I will show it for 3 items) : 1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3 And then go to the middle so even if the scroll a lot he wont come near to the end. 1,2,3,1,2,3,1,2,3,->1<-,2,3,1,2,3,1,2,3,1,2,3

For it to be selected: you need to override setOnItemSelectedListener and manipulate the size. dont forget to save a reference to your last view so when you get to the next one you can make it look regular, not enlarged.

I implemented both of this in my tutorial listed above

Answer 3

If you want to enlarge the center selected image there is one possible way. On your onItemSelected method, just call an animation to zoom the object. The property of gallery is that it is always center-locked. So the center element will be always selected. Hope that will work..

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false"
    android:fillAfter="true"
>
<scale 
       android:fromXScale="1.0"
       android:toXScale="1.50"
       android:fromYScale="1.0"
       android:toYScale="1.50"
       android:duration="600"
       android:pivotX="50%"
       android:pivotY="50%"
       android:fillAfter="true"/>

</set>

Do remember that you will have to store the previous view as when the element is move away from center it should be put to the normal size.

So you can have two views - prevView and currView.
Do the animation on the currView.

Thanks,
Sen