item images get mixed after listview scrolls down

Question

i have an activity to show user contacts list. if contact exists in my app i want to show a follow button , else i want to show a whatsapp and telegram icon to invite them.

when i open the activity every thing is fine as i want , but when i scroll down and come back up follow buttons and whats app icons get mixed for different contacts ! the users who had follow button may see whatsapp icon or the others may see follow button ! and everytime i scroll down and up again positions will change !

i should say all contacts name and mobile number are fixed and correct ! just images get mixed !

i know the problem is from my getView function but dont know how to fix it :( how can i fix it ? tnx :)

Here is all of my adapter code :

public class LazyAdapterContactsList extends BaseAdapter {

private Activity activity;
private ArrayList<HashMap<String, String>> data;
private static LayoutInflater inflater=null;

public ImageLoader profileImageLoader;
HashMap<String, String> song;
public LazyAdapterContactsList(Activity a, ArrayList<HashMap<String, String>> d) {
    activity = a;
    data=d;

    inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    profileImageLoader=new ImageLoader(activity.getApplicationContext());
}

public int getCount() {
    return data.size();
}

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

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

public View getView(int position, View convertView, ViewGroup parent) {
    View vi=convertView;
    ViewHolder holder = null;
    if(vi==null) {
        vi = inflater.inflate(R.layout.contacts_list_row, null);
        holder = new ViewHolder();


        holder.listID = (TextView) vi.findViewById(R.id.MyContactslistIDPosition);
        holder.name = (TextView) vi.findViewById(R.id.MyContactslistName); 
        holder.mobile = (TextView) vi.findViewById(R.id.MyContactslistMobileNumber);
        holder.whatsAppIcon = (ImageView) vi.findViewById(R.id.MyContactsListWhatsApp);
        holder.telegramIcon = (ImageView) vi.findViewById(R.id.MyContactsListTelegram);
        holder.followBtn = (Button) vi.findViewById(R.id.MyContactsListFollowBtn);
        holder.linearLayout = (LinearLayout) vi.findViewById(R.id.MyContactsthumbnail);

        holder.profile_thumb_image = (ImageView) vi.findViewById(R.id.MyContactslist_image_profilephoto);




        vi.setTag(holder);
    }
    else {
        holder = (ViewHolder)vi.getTag();          
    }



    song = data.get(position);

    // Setting all values in listview
    holder.listID.setText(song.get(MyContacts.KEY_ID));
    holder.name.setText(song.get(MyContacts.KEY_NAME));
    holder.mobile.setText(song.get(MyContacts.KEY_MOBILE));


if (song.get(MyContacts.KEY_USER_EXISTS).equals("1")) 
{


       if (song.get(MyContacts.KEY_THUMB_PROFILE_URL).equals("no")) {

        } else {
            profileImageLoader.DisplayImage(song.get(MyContacts.KEY_THUMB_PROFILE_URL), holder.profile_thumb_image);
        }


        }else {

            holder.linearLayout.setVisibility(View.VISIBLE);
            holder.followBtn.setVisibility(View.GONE);
        }


    return vi;
}

public static class ViewHolder {
    public TextView textView ,listID ,name,mobile;
    public ImageView whatsAppIcon ,telegramIcon;
    public Button followBtn;
    public LinearLayout linearLayout;
    public ImageView profile_thumb_image;
}
}

Answer 1

Whatever action you do with any view of ListView like HIDE or VISIBLE in condition (if), you must have to set opposite HIDE or VISIBLE in opposite condition (else).

Try this solution just change code as per below:

   if (song.get(MyContacts.KEY_USER_EXISTS).equals("1"))
    {
        holder.linearLayout.setVisibility(View.GONE);
        holder.followBtn.setVisibility(View.VISIBLE);
        if (song.get(MyContacts.KEY_THUMB_PROFILE_URL).equals("no")) {

        } else {
            profileImageLoader.DisplayImage(song.get(MyContacts.KEY_THUMB_PROFILE_URL), holder.profile_thumb_image);
        }


    }else {

        holder.linearLayout.setVisibility(View.VISIBLE);
        holder.followBtn.setVisibility(View.GONE);
    }