Recycling views shows same item multiple times

Question

I have a gridview which shows all apps installed on the device.

Whenever I try to recycle items (Using convertView == null etc.) the same icon and Text shows up multiple times in my grid.

This is my code:

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    ImageView imageView;
    TextView txtName;
    FrameLayout layout;
//        if (convertView == null) {
        imageView = new ImageView(myContext);
        imageView.setLayoutParams(new GridView.LayoutParams(230, 230));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setPadding(4, 4, 4, 4);

        txtName = new TextView(myContext);
        RelativeLayout.LayoutParams relativeParams = new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,
                LayoutParams.FILL_PARENT);
        relativeParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        txtName.setLayoutParams(relativeParams);
        txtName.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);
        // txtName.setPadding(8, 8, 8, 8);

        layout = new FrameLayout(myContext);
        // FrameLayout.LayoutParams layoutparams = new
        // FrameLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,
        // ViewGroup.LayoutParams.FILL_PARENT, Gravity.CENTER_HORIZONTAL |
        // Gravity.CENTER_VERTICAL);
        // layout.setLayoutParams(layoutparams);

        RelativeLayout layout2 = new RelativeLayout(myContext);

        layout.addView(imageView);
        layout.addView(layout2);
        layout2.addView(txtName);

        ResolveInfo resolveInfo = MyAppList.get(position);
        imageView.setImageDrawable(resolveInfo.loadIcon(myPackageManager));
        txtName.setText(resolveInfo.loadLabel(myPackageManager));

//        } else {
//            layout = (FrameLayout) convertView;
//        }

    return layout;

}

If I don't recycle them, their shown correctly but the gridview is very slow.

And my second question is: How can I put the text UNDER the icon inside my gridview? Like in the native Android launcher?

This is my GridActivity:

public class AppListActivity extends Activity {

PackageManager myPackageManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    myPackageManager = getPackageManager();

    Intent intent = new Intent(Intent.ACTION_MAIN, null);
    intent.addCategory(Intent.CATEGORY_LAUNCHER);
    List<ResolveInfo> appIntentList = getPackageManager()
            .queryIntentActivities(intent, 0);

    GridView gridview = new GridView(this);
    gridview.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);
    gridview.setNumColumns(4);
    gridview.setHorizontalSpacing(30);
    gridview.setVerticalSpacing(30);
    gridview.setBackgroundColor(getResources().getColor(android.R.color.black));
    gridview.setGravity(Gravity.CENTER);
    gridview.setColumnWidth(60);
    gridview.setPadding(10, 10, 10, 10);

    gridview.setAdapter(new MyAdapter(this, appIntentList));

    gridview.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {
            ResolveInfo cleckedResolveInfo = (ResolveInfo) parent
                    .getItemAtPosition(position);
            ActivityInfo clickedActivityInfo = cleckedResolveInfo.activityInfo;

            Intent intent = new Intent(Intent.ACTION_MAIN);
            intent.addCategory(Intent.CATEGORY_LAUNCHER);
            intent.setClassName(
                    clickedActivityInfo.applicationInfo.packageName,
                    clickedActivityInfo.name);
            intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK
                    | Intent.FLAG_ACTIVITY_RESET_TASK_IF_NEEDED);
            startActivity(intent);
        }

    });

    setContentView(gridview);
}
}

Answer 1

Well, you need to move the data fill of your list item outside of list item setup. Something like:

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    ImageView imageView;
    TextView txtName;
    RelativeLayout layout;
    if (convertView == null) {
        imageView = new ImageView(myContext);
        imageView.setLayoutParams(new GridView.LayoutParams(230, 230));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setPadding(4, 4, 4, 4);
        generateAndSetViewId(imageView);

        txtName = new TextView(myContext);
        RelativeLayout.LayoutParams relativeParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        relativeParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        relativeParams.addRule(RelativeLayout.BELOW, imageView.getId());
        txtName.setLayoutParams(relativeParams);
        txtName.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);
        // txtName.setPadding(8, 8, 8, 8);

        layout = new RelativeLayout(myContext);
        // FrameLayout.LayoutParams layoutparams = new
        // FrameLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,
        // ViewGroup.LayoutParams.FILL_PARENT, Gravity.CENTER_HORIZONTAL |
        // Gravity.CENTER_VERTICAL);
        // layout.setLayoutParams(layoutparams);

        layout.addView(imageView);
        layout.addView(txtName);

    } else {
        layout = (RelativeLayout) convertView;
        imageView = (ImageView) layout.getChildAt(0);
        txtName = (TextView) layout.getChildAt(1);
    }

    ResolveInfo resolveInfo = MyAppList.get(position);
    imageView.setImageDrawable(resolveInfo.loadIcon(myPackageManager));
    txtName.setText(resolveInfo.loadLabel(myPackageManager));

    return layout;

}

private static final AtomicInteger sNextGeneratedId = new AtomicInteger(1);

@SuppressLint("NewApi")
public static int generateAndSetViewId(View view) {
    int viewID = -1;
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
        viewID = View.generateViewId();
    } else {
        while (true) {
            final int result = sNextGeneratedId.get();
            // aapt-generated IDs have the high byte nonzero; clamp to the range under that.
            int newValue = result + 1;
            if (newValue > 0x00FFFFFF) {
                newValue = 1; // Roll over to 1, not 0.
            }
            if (sNextGeneratedId.compareAndSet(result, newValue)) {
                viewID = result;
                break;
            }
        }
    }
    view.setId(viewID);
    return viewID;
}

Above code can be simplified a lot if you inflate the views from an XML instead of creating them dynamically.