ImageView shown only in the last row of listview

Question

I have an activity with a listview that contains couple of EditText and image view. When User is sign up his data (name,phone,profile image etc...) stored in firebase. I want the imageview which located in listview row to show the profile image of each user. I have the image download Uri and I use picaso to set the profile image to the image view.

The problem is: the profile image shown only in the last row of the listview..

This is how I set the profile image to the ImageView:

public void getProfileImage() {
    mDatabase.child("Users").addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                for (DataSnapshot ds : dataSnapshot.getChildren()) {
                    User user = ds.getValue(User.class);
                    if (!user.getUserImage().equals("default"))
                        Picasso.with(getContext()).load(user.getUserImage()).into(profileImage);
                }
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });
    }

Hope someone can figure out what is the problem. Thank you.

Edit: This is the listview adapter:

public class mainScreenAdapter extends ArrayAdapter<TrempData>  {

    private TextView  name ,timestamp ,uid, from,to,date,time,myextra ;
    private ImageButton phoneBtn;
    private ImageView timeline, profileImage;
    private int layoutResource;
    private FirebaseAuth firebaseAuth;
    private DatabaseReference mDatabase;



    public mainScreenAdapter(Context context, int layoutResource, ArrayList<TrempData> list) {
        super(context, layoutResource, list);
        this.layoutResource = layoutResource;
        firebaseAuth = FirebaseAuth.getInstance();
        mDatabase = FirebaseDatabase.getInstance().getReference();

    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        View view = convertView;


        if (view == null) {
            final LayoutInflater Inflater = LayoutInflater.from(getContext());
            view = Inflater.inflate(layoutResource, null);

        }

        final TrempData data = getItem(position);
        //data.setPos(position);
        //int[] androidColors = getContext().getResources().getIntArray(R.array.androidcolors);
        //int randomAndroidColor = androidColors[new Random().nextInt(androidColors.length)];


        if (data != null) {
            name = (TextView) view.findViewById(R.id.myname);
            phoneBtn = (ImageButton) view.findViewById(R.id.myphone);
            //myphonestr = (TextView)view.findViewById(R.id.myphonestr);
            timestamp = (TextView) view.findViewById(R.id.mytimestamp);
            uid = (TextView) view.findViewById(R.id.myuid);
            timeline = (ImageView)view.findViewById(R.id.timeline);
            profileImage = (ImageView)view.findViewById(R.id.mycar);
            date = (TextView) view.findViewById(R.id.mydate);
            time = (TextView) view.findViewById(R.id.mytime);
            from = (TextView) view.findViewById(R.id.myfrom);
            to = (TextView) view.findViewById(R.id.myto);
            myextra = (TextView) view.findViewById(R.id.myextra);
            name.setText(data.get_name());
            //name.setTextColor(randomAndroidColor);
            //myphonestr.setText(data.get_phone());
            timestamp.setText(data.get_timestamp());
            uid.setText(data.get_uid());
            date.setText(data.get_date());
            time.setText(data.get_time());
            to.setText(data.get_to());
            from.setText(data.get_from());
            uid.setText(data.get_uid());
            myextra.setText(data.get_extras());

            phoneBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent i = new Intent(Intent.ACTION_DIAL, Uri.parse("tel:" + data.get_phone()));
                    getContext().startActivity(i);
                }
            });

            if(firebaseAuth.getCurrentUser().getUid().equals(uid.getText())){

                phoneBtn.setVisibility(View.GONE);
                //car.setColorFilter(Color.rgb(255,164,30));

            }
            else{

                phoneBtn.setVisibility(View.VISIBLE);
                //car.setColorFilter(Color.rgb(176,176,176));

            }
        }
        getProfileImage();
        return view;

    }

    public void getProfileImage() {
        mDatabase.child("Users").addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                for (DataSnapshot ds : dataSnapshot.getChildren()) {
                    User user = ds.getValue(User.class);
                    if (!user.getUserImage().equals("default"))
                        Picasso.with(getContext()).load(user.getUserImage()).into(profileImage);
                }
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });
    }

}

Update: I did what @Danilo de Oliveira suggest me to do and it works but now I have new problem. The profile image is the same in each row although the download image Uri is different in each user in firebase

Answer 1

The problem is you call getProfileImage() every time getView() runs. This is what is actually happening:

For the row 1: loop through all dataSnapshot.getChildren() load image to profileImage

For the row 2: loop through all dataSnapshot.getChildren() load image to profileImage

For the row 3: loop through all dataSnapshot.getChildren() load image to profileImage

...

So you are always loading N photos to the profileImage, ending up with the last image is shown each row.

This should be the flow:

1. Load all your data from firebase.
2. Store them in an ArrayList<User> mUsers
3. listView.setAdapter(yourAdapter)
4. In getView()
    4a. Get your user by mUsers.get(position)
    4b. Get your imageview by view.findViewById(...)
    4c. Load your image here.

This should be working.

Also I think you should examine how list view and list adapters work.

Answer 2

"profileImage" is a class variable and you get image uri through async request, so when the image uri is loaded you have the last reference to ImageView. You could try...

// The key type Integer is an example
private HashMap<Integer, ImageView> imageMap = new HashMap<>();
private int trempDataListSize;

public mainScreenAdapter(Context context, int layoutResource, ArrayList<TrempData> list) {
    super(context, layoutResource, list);
    this.layoutResource = layoutResource;
    firebaseAuth = FirebaseAuth.getInstance();
    mDatabase = FirebaseDatabase.getInstance().getReference();
    trempDataListSize = list.size();
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    ...
    TrempData data = getItem(position);
    ...
    ImageView profileImage = (ImageView) view.findViewById(R.id.mycar);
    ...
    // Store the userId as key and imageView as value
    imageMap.put(data.getUserId(), profileImage);
    ...
    // Execute getProfileImage() once
    if (position = trempDataListSize - 1) {
        getProfileImage();
    }
}

public void getProfileImage() {
    mDatabase.child("Users").addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            for (DataSnapshot ds : dataSnapshot.getChildren()) {
                User user = ds.getValue(User.class);

                // Check if imageMap has the key (userId)
                if (!user.getUserImage().equals("default")
                      && imageMap.containsKey(user.getId()))

                    // Get the value (imageView) by userId
                    Picasso.with(getContext())
                        .load(user.getUserImage())
                        .into(imageMap.get(user.getId()));
            }
        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });
}