Choppy gallery in Xperia Arc

Question

I'm making an app that requires the use of a Gallery . My problem is, the Gallery is really choppy. My code is pretty much similar to the sample code that android provides, but rather than just having the ImageAdapter return an ImageView , I have it return a LinearLayout , because I need text underneath the image. Any suggestions?

Here's my code:

package org.example.gallery;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

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

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

    gallery.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v,
            int position, long id) {
        Toast.makeText(GalleryTestActivity.this, "" + position,
            Toast.LENGTH_SHORT).show();
        }
    });
    }

    public class ItemAdapter extends BaseAdapter {
    private Context mContext;

    private final Integer[] mImageIds = { R.drawable.sample_1,
        R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4,
        R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7,
        R.drawable.sample_8 };

    private final String[] mStringIds = { "1-pc. Chicken with Rice",
        "2-pc. Chicken with Rice", "Tower Burger", "Bucket", "Barrel",
        "Chicken Fillet", "Chicken burger", "Another Chicken Burger" };

    public ItemAdapter(Context c) {
        this.mContext = c;
    }

    public int getCount() {
        return mImageIds.length;
    }

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

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        LinearLayout l = new LinearLayout(this.mContext);
        l.setOrientation(LinearLayout.VERTICAL);

        ImageView iv = new ImageView(this.mContext);
        iv.setImageResource(mImageIds[position]);
        iv.setScaleType(ImageView.ScaleType.FIT_CENTER);

        TextView tv = new TextView(this.mContext);
        tv.setText(mStringIds[position]);
        tv.setTextSize(20);
        tv.setTextColor(Color.RED);
        tv.setGravity(Gravity.CENTER_HORIZONTAL);

        l.addView(iv);
        l.addView(tv);

        return l;
    }
    }
}

Answer 1

use ViewHolder(so u will not inflating/creating view in every getView call(views are recycling)) pattern like in this example:

http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/List14.html

EDIT:

       static class ViewHolder {
            TextView tv;
            ImageView iv;
        }

   public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder = null;
        if(convertView == null){

        LinearLayout l = new LinearLayout(this.mContext);
        l.setOrientation(LinearLayout.VERTICAL);

        ImageView iv = new ImageView(this.mContext);

        iv.setScaleType(ImageView.ScaleType.FIT_CENTER);

        TextView tv = new TextView(this.mContext);

        tv.setTextSize(20);
        tv.setTextColor(Color.RED);
        tv.setGravity(Gravity.CENTER_HORIZONTAL);

        l.addView(iv);
        l.addView(tv);
        convertView = l;
        holder = new ViewHolder();
        holder.tv = tv;
        holder.iv = iv;

        } else {
        holder = (ViewHolder)convertView.getTag();
    }
    holder.tv.setText(mStringIds[position]);
    holder.iv.setImageResource(mImageIds[position]);

        return convertView;
    }