Infinite Scrolling Gallery View with text description

Question

I have infinite gallery based on this example :

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

It runs nicely, now I want to have the Gallery still scroll through the images and under each image there should be a text caption.

I searched net with no result, would you please help me in coding that, just beginner in development.

==================================================================================

NEW Update :

upload photo explane what i need exactly which i get it with normal gallery (applied text to each image and able to customize text too as shown down image ,and each image has diffrenet text than others , but still not succeed to do it with infinite gallery :

PLEASE ANY HELP AND ADVICE .

THANKS ALOT.

Answer 1

I went through Blundell's tutorial and thanks to him I know how to make an Infinitelyscrolling gallery :)

To answer the question, about how to add a text caption below each of the images , I made same small changes to Blundell's nice tut and used some of his suggestions in the above answer and I think I got a nice way of doing the task.

The code below doesnt inflate or use gallery_item.xml at all, so it will increase the performance significantly compared to the way when you are inflating it every time.

Trimmed down code of classes from Blundell's tutorial ( because in the question, you are using only resources and not sdcard).

public class InfiniteScrollingGalleryActivity extends Activity {

public class GalleryItem{
      int imageId;
      String caption;
       public int getImageId() {
        return imageId;     }

    public String getCaption() {
        return caption;
    }
        public GalleryItem(int i,String s) {
        imageId=i;
        caption=s;  }   
}

int[] resourceImages = {R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher,
        R.drawable.ic_launcher,R.drawable.ic_launcher,R.drawable.ic_launcher};

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
     GalleryItem[] item = new GalleryItem[6];
        //initialising all items, change member variables according to needs
    for(int i=0;i<6;i++){
        item[i] = new GalleryItem(resourceImages[i], "pic no" +(i+1));          }                
    setContentView(R.layout.activity_main);
     InfiniteGallery galleryOne = (InfiniteGallery) findViewById(R.id.galleryOne);
    galleryOne.setResourceGallery(item);
     }  }

Here I have added the GalleryItem class array and passed it.

Also added the below code in InfiniteGalley class.

public void setResourceGallery(GalleryItem[] item) {
        setAdapter(new InfiniteGalleryResourceAdapter(getContext(), item));
        setSelection((getCount() / 2));
    }

below code's getView() is where the good things happen :

 public class InfiniteGalleryResourceAdapter extends BaseAdapter {

    /** The context your gallery is running in (usually the activity) */
    private Context mContext;   
 GalleryItem[] myItems; 

    public InfiniteGalleryResourceAdapter(Context context, GalleryItem[] item) {
        this.mContext = context;
            myItems=item;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // convertView is always null in android.widget.Gallery
        TextView t = new TextView(mContext);
        try {           
            int itemPos = (position % myItems.length);
            t.setText(myItems[itemPos].getCaption());
            Drawable d = mContext.getResources().getDrawable(myItems[itemPos].getImageId());
            ((BitmapDrawable) d).setAntiAlias(true); // Make sure we set anti-aliasing otherwise we get jaggies (non-smooth lines)

            //d.setBounds(0,0,60,60); //use this to change dimens of drawable,if needed
            t.setCompoundDrawablesWithIntrinsicBounds(null, d, null, null);

        } catch (OutOfMemoryError e) {
            // a 'just in case' scenario
            Log.e("InfiniteGalleryResourceAdapter", "Out of memory creating imageview. Using empty view.", e);
        }

        return t;
    }

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

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }
    /** The width of each child image */
    private static final int G_ITEM_WIDTH = 120;
    /** The height of each child image */
    private static final int G_ITEM_HEIGHT = 80;
    private int imageWidth;
    private int imageHeight;
}

In getView(), I am just creating a textView and assigning the drawable to it using the handy t.setCompoundDrawablesWithIntrinsicBounds(null, d, null, null); . So it excludes the need of inflating layouts which is a heavy operation.

Below is the output image:

Answer 2

In the adapter you can see the method: getView, you can see this method returns an ImageView, so now you want the getView method to return an imageview and textview...

U can do this in a few ways, here how you can do it with a LayoutInflater

View v = getLayoutInflater().inflate(R.layout.gallery_item, null);
((ImageView) v.findViewById(R.id.img)).setImageResource(imageIds[position]);
((TextView) v.findViewById(R.id.caption)).setText(captions[position]);

So in your res/layout folder you should have an 'gallery_item' layout that contains an ImageView (img) and a TextView (caption)

i.e.

gallery_item.xml

 <LinearLayout>
      <ImageView ... />
      <TextView ... />
 </LinearLayout>

Hope this was helpfull!

EDIT

so as the above example shows you would need two arrays, one of imageIds and one of textCaptions. To keep your Adapter nice and clean it's screaming for you to make an object.

 public class GalleryItem {
       int imageId;
       String caption

       // Constructor

       // getters and setters

 }

You could then pass an Array or List of your GalleryItems to the Adapter (replacing the setAdapter method). i.e:

 GalleryItem[] items = new GalleryItem[];

Then in your getView method as outlined above you would extract each object:

 GalleryItem item = items[position];
 View v = getLayoutInflater().inflate(R.layout.gallery_item, null);

((ImageView) v.findViewById(R.id.img)).setImageResource(item.getImageId());
((TextView) v.findViewById(R.id.caption)).setText(item.getCaption());

Hope thats clear