Listview items changes while scrolling in android.. How to avoid it?

Question

i have been developing an app to send and receive messages using firebase the messages appear nice and clean when all the messages are on the same side..

Adaptar:

     @Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        convertView = ((Activity) getContext()).getLayoutInflater().inflate(R.layout.item_message, parent, false);
    }
        ImageView photoImageView = (ImageView) convertView.findViewById(R.id.photoImageView);
        TextView messageTextView = (TextView) convertView.findViewById(R.id.messageTextView);
        TextView authorTextView = (TextView) convertView.findViewById(R.id.nameTextView);
        LinearLayout layout = (LinearLayout) convertView.findViewById(R.id.image_container);
        FriendlyMessage message = getItem(position);
        boolean isPhoto = message.getPhotoUrl() != null;
        if (isPhoto) {
            messageTextView.setVisibility(View.GONE);
            layout.setVisibility(View.VISIBLE);
            layout.setMinimumHeight(200);
            photoImageView.setVisibility(View.VISIBLE);
            Glide.with(photoImageView.getContext())
                    .load(message.getPhotoUrl())
                    .into(photoImageView);
        } else {
            messageTextView.setVisibility(View.VISIBLE);
            photoImageView.setVisibility(View.GONE);
            layout.setVisibility(View.GONE);
            layout.setMinimumHeight(0);
            messageTextView.setText(message.getText());
        }


        messageTextView.setText(message.getText());
        authorTextView.setText("." + message.getName());


    return convertView;

But i want to have the users own messages in right side so wrote a code which is bolded below it works fine at first and upon scroll all shifts to right side.. tried overridding getviewcounttype but cant be implemented properly ... Any solutions to change the code or to prevent shifting of items..

This Image is working fine at first

Upon Scroll all gets moved to right

This is the code for above changes

     @Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        convertView = ((Activity) getContext()).getLayoutInflater().inflate(R.layout.item_message, parent, false);
    }
        ImageView photoImageView = (ImageView) convertView.findViewById(R.id.photoImageView);
        TextView messageTextView = (TextView) convertView.findViewById(R.id.messageTextView);
        TextView authorTextView = (TextView) convertView.findViewById(R.id.nameTextView);
        LinearLayout layout = (LinearLayout) convertView.findViewById(R.id.image_container);
        FriendlyMessage message = getItem(position);
        boolean isPhoto = message.getPhotoUrl() != null;
        if (isPhoto) {
            messageTextView.setVisibility(View.GONE);
            layout.setVisibility(View.VISIBLE);
            layout.setMinimumHeight(200);
            photoImageView.setVisibility(View.VISIBLE);
            Glide.with(photoImageView.getContext())
                    .load(message.getPhotoUrl())
                    .into(photoImageView);
        } else {
            messageTextView.setVisibility(View.VISIBLE);
            photoImageView.setVisibility(View.GONE);
            layout.setVisibility(View.GONE);
            layout.setMinimumHeight(0);
            messageTextView.setText(message.getText());
        }
        //Modified part to displaying messages on right
        try {
            if (user.getDisplayName().equalsIgnoreCase(message.getName())) {
                System.out.println("At Gravity" + user.getDisplayName().toString() + message.getName());
               messageTextView.setGravity(Gravity.RIGHT);
                authorTextView.setGravity(Gravity.RIGHT);
                layout.setGravity(Gravity.RIGHT);
                messageTextView.setMaxWidth(200);
             authorTextView.setTextColor(Color.CYAN);
            }
        } catch (NullPointerException e) {
            System.out.println("Exception catched");
        }
        messageTextView.setText(message.getText());
        authorTextView.setText("." + message.getName());


    return convertView;

Any possible fix for this issue???

Answer 1

Please use setTag() and getTag() in your adapter, but the better practice is to use RecyclerView instead of ListView.

Answer 2

You need to add an else statement since the ListView reuses its itemviews. Once you set a view to the right, it has no chance of changing its alignment back to the left on its own.

if (user.getDisplayName().equalsIgnoreCase(message.getName())) {
    System.out.println("At Gravity" + user.getDisplayName().toString() + message.getName());
    messageTextView.setGravity(Gravity.RIGHT);
    authorTextView.setGravity(Gravity.RIGHT);
    layout.setGravity(Gravity.RIGHT);
    messageTextView.setMaxWidth(200);
    authorTextView.setTextColor(Color.CYAN);
}else{
    messageTextView.setGravity(Gravity.LEFT);
    authorTextView.setGravity(Gravity.LET);
    layout.setGravity(Gravity.LEFT);
    messageTextView.setMaxWidth(200);
    authorTextView.setTextColor(Color.CYAN);
}