ListView view recycling messes up rows

Question

I have an app that shows the schedule for a basketball team. It lists the games they already played and then the upcoming games. I am altering the row layout depending on whether the game has been played. For example, if the game has been played, I am displaying a "W" or a "L" in a TextView but if the game hasn't been played, I am hiding this TextView.

My problem is that when I scroll to the bottom, where all the TextViews are hidden, and then scroll back to the top, all of the "L"s and "W"s which WERE there to begin with, are now hidden. Is there anyway to prevent this? Here is my adapter:

package com.example.sixerstrivia;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class GameAdapter extends ArrayAdapter<Game> {

    public GameAdapter(Context context, ArrayList<Game> games) {
        super(context, R.layout.game_row, games);
    }

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

        if (convertView == null) {
            convertView = LayoutInflater.from(getContext()).inflate(
                    R.layout.game_row, parent, false);
        }

        TextView tvTopTeam = (TextView) convertView
                .findViewById(R.id.tvTopTeam);
        TextView tvBottomTeam = (TextView) convertView
                .findViewById(R.id.tvBottomTeam);
        TextView tvTopScore = (TextView) convertView
                .findViewById(R.id.tvTopScore);
        TextView tvBottomScore = (TextView) convertView
                .findViewById(R.id.tvBottomScore);
        TextView tvAt = (TextView) convertView.findViewById(R.id.tvAt);
        TextView tvVs = (TextView) convertView.findViewById(R.id.tvVs);
        TextView tvWin = (TextView) convertView.findViewById(R.id.tvWin);
        TextView tvDate = (TextView) convertView.findViewById(R.id.tvDate);

        if (game.completed) {
            tvDate.setText(game.gameDate);
            if (game.win) {
                tvWin.setText("W");
                tvWin.setTextColor(Color.GREEN);
            } else {
                tvWin.setText("L");
                tvWin.setTextColor(Color.RED);
            }
        } else {
            tvDate.setText(game.gameDate + "\n" + game.gameTime + " PM");
            tvWin.setVisibility(View.GONE);
            tvTopScore.setVisibility(View.INVISIBLE);
            tvBottomScore.setVisibility(View.INVISIBLE);
        }

        if (!game.homeTeam.equals("PHI")) {
            tvTopTeam.setText(game.awayTeam);
            tvVs.setVisibility(View.GONE);
            if (game.completed) {
                tvAt.setVisibility(View.GONE);
                tvTopScore.setText(game.awayScore);
                tvBottomScore.setText(game.homeScore);
            }
            tvBottomTeam.setText(game.homeTeam);
        } else {
            tvTopTeam.setText(game.homeTeam);
            tvAt.setVisibility(View.GONE);
            if (game.completed) {
                tvVs.setVisibility(View.GONE);
                tvTopScore.setText(game.homeScore);
                tvBottomScore.setText(game.awayScore);
            }
            tvBottomTeam.setText(game.awayTeam);
        }

        return convertView;
    }
}

Answer 1

You hide them, but you don't make them visible again. Since listview reuses views, they stay hidden. Call tvWin.setVisibility(View.VISIBLE); if the match has been played. Also use a viewholder for performance.