Choppy gallery in Xperia Arc - android-layout

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;
}