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 ?

image link ( http://i53.tinypic.com/1z5st50.png )

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. :(

Sorry folks, I don't have enough rep to insert the image :(

Answer 1

You should go through this tutorial, http://developer.android.com/resources/tutorials/views/hello-gallery.html, it is where your screen shot came from.

Answer 2

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 3

Thanks pengwang, but the first element of the circular gallery start on the center. I want to start image in the left.

Answer 4

Hi,
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

Answer 5

Hi, Pengwang

I have a question. The statement "return Integer.MAX_VALUE" inside getCount() will not cause any memory problem? Because in this case you are creating gallery of 2147483647 cells.