Loading images in gridView sometimes mixes up

Question

I am having a problem with my GridView wherein the images loads in different places when scrolling. I know this has something to do with recycling but as I am new to Android, I have no idea about this.

  public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
            final Listing listing = getItem(position);
            if (convertView == null) {
                convertView = LayoutInflater.from(getContext()).inflate(R.layout.listing_items, parent, false);
            }
            final ImageView imageView = (ImageView) convertView.findViewById(R.id.imageView);


            FirebaseStorage.getInstance().getReference().child(listing.authorUid).child(listing.adId).child(listing.images.get(0)).getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                @Override
                public void onSuccess(Uri uri) {
                    try {

                        GlideApp.with(getContext())
                                .load(new URL(uri.toString()))
                                .into(imageView);
                    } catch(Exception e) {
                        e.printStackTrace();
                    }
                }
            });

            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent(getContext(), ItemInfoActivity.class);
                    intent.putExtra("title", listing.title);
                    intent.putExtra("location", listing.city);
                    intent.putExtra("price", listing.price);
                    intent.putExtra("desc", listing.description);
                    intent.putExtra("category", listing.category);
                    intent.putExtra("author", listing.authorUid);
                    intent.putExtra("adId", listing.adId);
                    intent.putExtra("authorId", listing.authorUid);
                    startActivity(intent);
                }
            });

            TextView price = (TextView)convertView.findViewById(R.id.price_txt);
            TextView title = (TextView)convertView.findViewById(R.id.title_txt);

            title.setText(listing.title);
            price.setText(listing.price +"DH");
            return convertView;
        }

Please advise on what to do.

I think the problem to answer [here](https://stackoverflow.com/questions/7545915/gridview-rows-overlapping-how-to-make-row-height-fit-the-tallest-item/47414349#47414349) — opalfire, Feb 28 '19 at 13:22
Add these method to your above line.. i think you are using list view... `public int getItemViewType(int position) { return position; } public int getViewTypeCount() { return item.size(); }` — opalfire, Mar 01 '19 at 08:48

score 0 · Answer 1 · answered Feb 28 '19 at 13:13

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class CustomAdapter extends RecyclerView.Adapter {
    ArrayList personNames;
    ArrayList personImages;
    Context context;
    public CustomAdapter(Context context, ArrayList personNames, ArrayList personImages) {
        this.context = context;
        this.personNames = personNames;
        this.personImages = personImages;
    }
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // infalte the item Layout
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.rowlayout, parent, false);
        // set the view's size, margins, paddings and layout parameters
        MyViewHolder vh = new MyViewHolder(v); // pass the view to View Holder
        return vh;
    }
    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        // set the data in items
        holder.name.setText(personNames.get(position));
        holder.image.setImageResource(personImages.get(position));
        // implement setOnClickListener event on item view.
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // open another activity on item click
                Intent intent = new Intent(context, SecondActivity.class);
                intent.putExtra("image", personImages.get(position)); // put image data in Intent
                context.startActivity(intent); // start Intent
            }
        });
    }
    @Override
    public int getItemCount() {
        return personNames.size();
    }
    public class MyViewHolder extends RecyclerView.ViewHolder {
        // init the item view's
        TextView name;
        ImageView image;
        public MyViewHolder(View itemView) {
            super(itemView);
            // get the reference of item view's
            name = (TextView) itemView.findViewById(R.id.name);
            image = (ImageView) itemView.findViewById(R.id.image);
        }
    }
}


Use this adapter structure.

score 0 · Answer 2 · answered Feb 28 '19 at 13:38

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class CustomAdapter extends RecyclerView.Adapter {
    ArrayList personNames;
    ArrayList personImages;
    Context context;
    public CustomAdapter(Context context, ArrayList personNames, ArrayList personImages) {
        this.context = context;
        this.personNames = personNames;
        this.personImages = personImages;
    }
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // infalte the item Layout
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.rowlayout, parent, false);
        // set the view's size, margins, paddings and layout parameters
        MyViewHolder vh = new MyViewHolder(v); // pass the view to View Holder
        return vh;
    }
    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        // set the data in items
        holder.name.setText(personNames.get(position));
        holder.image.setImageResource(personImages.get(position));

// add your firebase code here

        // implement setOnClickListener event on item view.
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // open another activity on item click
                Intent intent = new Intent(context, SecondActivity.class);
                intent.putExtra("image", personImages.get(position)); // put image data in Intent
                context.startActivity(intent); // start Intent
            }
        });
    }
    @Override
    public int getItemCount() {
        return personNames.size();
    }
    public class MyViewHolder extends RecyclerView.ViewHolder {
        // init the item view's
        TextView name;
        ImageView image;
        public MyViewHolder(View itemView) {
            super(itemView);
            // get the reference of item view's
            name = (TextView) itemView.findViewById(R.id.name);
            image = (ImageView) itemView.findViewById(R.id.image);
        }
    }
}


Here is the updated answer of above answer.

if you are using recyclerview you can not override getView() method. i would suggest you to use recyclerview.

Loading images in gridView sometimes mixes up

2 Answers2