Question

I have a listview which includes 2 textviews and 1 imageview. Now, the image in imageview will be set on certain conditions otherwise it should be left blank with no image.

The problem is the images are not coming in proper rows. Say, for eg the image should be displayed at row 3 but its displayed at row 4. And, in some cases each row will have the same image.

Has someone faced this kind of an issue? I am really clueless about the reason behind this. Can anyone point out the problem?

---

private static class VilleAdapter extends BaseAdapter {
    private LayoutInflater mInflater = null;

    // private Context context = null;

    public VilleAdapter(Context context) {
        // Cache the LayoutInflate to avoid asking for a new one each time.
        mInflater = LayoutInflater.from(context);
    }

    /**
     * The number of items in the list is determined by the number of
     * speeches in our array.
     * 
     * @see android.widget.ListAdapter#getCount()
     */
    public int getCount() {
        // return BabbleMainListParse.getNumOfBabbles();
        return VilleMainListParse.getVilleCount();
    }

    /**
     * Since the data comes from an array, just returning the index is
     * sufficent to get at the data. If we were using a more complex data
     * structure, we would return whatever object represents one row in the
     * list.
     * 
     * @see android.widget.ListAdapter#getItem(int)
     */
    public Object getItem(int position) {
        return position;
    }

    /**
     * Use the array index as a unique id.
     * 
     * @see android.widget.ListAdapter#getItemId(int)
     */
    public long getItemId(int position) {
        return position;
    }

    /**
     * Make a view to hold each row.
     * 
     * @see android.widget.ListAdapter#getView(int, android.view.View,
     *      android.view.ViewGroup)
     */
    public View getView(int position, View convertView, ViewGroup parent) 
    {
        // A ViewHolder keeps references to children views to avoid
        // unneccessary calls
        // to findViewById() on each row.
        ViewHolder holder;

        // When convertView is not null, we can reuse it directly, there is
        // no need
        // to reinflate it. We only inflate a new View when the convertView
        // supplied
        // by ListView is null.
        if (convertView == null) 
        {
            convertView = mInflater.inflate(R.layout.villerow, parent,false);

            // Creates a ViewHolder and store references to the two children
            // views
            // we want to bind data to.
            holder = new ViewHolder();
            holder.txtVilleListTitle = (TextView) convertView.findViewById(R.id.txtVilleListTitle);
            holder.txtVilleDescription = (TextView) convertView.findViewById(R.id.txtVilleDescription);
            holder.imgvillepwd = (ImageView) convertView.findViewById(R.id.imgvillepwd);

            convertView.setTag(holder);
        }
        else 
        {
            // Get the ViewHolder back to get fast access to the TextView
            holder = (ViewHolder) convertView.getTag();
        }

        // Bind the data efficiently with the holder.
        holder.txtVilleListTitle.setText(VilleMainListParse.getMsgTitle(position));

        if(VilleMainListParse.getMsgDesc(position).length() > 30)
        {
            String temp = VilleMainListParse.getMsgDesc(position).substring(0, 30);
            temp = temp +".....";
            holder.txtVilleDescription.setText(temp);
        }
        else
            holder.txtVilleDescription.setText(VilleMainListParse.getMsgDesc(position));

        if(!VilleMainListParse.getPwd(position).equals(""))
        {
            if(VilleMainListParse.getUnlock(position))
            {
                holder.imgvillepwd.setBackgroundResource(R.drawable.lock);
            }   
            else if(!VilleMainListParse.getUnlock(position))
            {
                holder.imgvillepwd.setBackgroundResource(R.drawable.lock_open);
            }
        }

        return convertView;
    }

    static class ViewHolder
    {
        TextView txtVilleListTitle;
        TextView txtVilleDescription;
        ImageView imgvillepwd;
    }
}

The above code is only of the Adapter. There is a login screen initially when the login button is clicked the data is loaded from the internet and then this listview is loaded with this data. This data is loaded properly initially.

Can someone let me know what is the problem with this code?

Answer 1

As you’re reusing the same views you should clear the image if it shouldn’t be displayed. Otherwise the previous picture will be displayed there. So I suggest the following fix:

if(!VilleMainListParse.getPwd(position).equals(""))
{
    if(VilleMainListParse.getUnlock(position))
    {
        holder.imgvillepwd.setBackgroundResource(R.drawable.lock);
    }   
    else if(!VilleMainListParse.getUnlock(position))
    {
        holder.imgvillepwd.setBackgroundResource(R.drawable.lock_open);
    }
}
else
    holder.imgvillepwd.setBackgroundDrawable(null);