Gridview - Items repeating randomly

Question

I’m having a problem in grid view. This grid contains n products that are displayed on the screen, thus the grid of some users have scroll.

When there is no scroll the products are normally displayed, however when there begin to repeat themselves in random form. From what I researched it happens by the view to recycle.

The grid view is inflated by xml:

<TextView
    android:id="@+id/item_TextNome"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:textSize="25sp"
    android:gravity="center_vertical"
    android:textAlignment="center"
    android:textAllCaps="true">
</TextView>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
  <ImageView
      android:id="@+id/grid_item_image"
      android:layout_width="50dp"
      android:layout_height="50dp"
      android:layout_marginLeft="20dp"
      android:src="@drawable/ic_ticket_primary600_48dp" >
  </ImageView>
  <TextView
      android:id="@+id/item_textPreco"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingTop="5dp"
      android:textSize="19sp"
      android:gravity="center_vertical"
      android:textAlignment="center">
  </TextView>
</FrameLayout>

And the getview of Basedapter

public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    View gridView;

    if (convertView == null) {

        gridView = new View(context);

        // get layout from row_grid.xml
        gridView = inflater.inflate(R.layout.row_grid, null);

        // set value into textview
        TextView nomeProduto = (TextView) gridView.findViewById(R.id.item_TextNome);
        TextView precoProduto = (TextView) gridView.findViewById(R.id.item_textPreco);


        Produto produto = produtos.get(position);
        nomeProduto.setText(produto.getNome());
        precoProduto.setText("R$" + String.format("%.2f",produto.getPreco()).replace(".",","));

        //Bold
        nomeProduto.setTypeface(null, Typeface.BOLD);

        // set image based on selected text
        ImageView imageView = (ImageView) gridView.findViewById(R.id.grid_item_image);
        String mobile = categorias.get(position);

        if (mobile.equals("Bebida")) {
            imageView.setImageResource(R.drawable.ic_beer_primary600_48dp);
        } else if (mobile.equals("Doce")) {
            imageView.setImageResource(R.drawable.ic_cupcake_icon_primary_614x460);
        } else if (mobile.equals("Comida")) {
            imageView.setImageResource(R.drawable.ic_restaurant_menu_black_48dp);
        } else if (mobile.equals("Lanche")) {
            imageView.setImageResource(R.drawable.ic_hamburguer_primary600_48dp);
        } else {
            imageView.setImageResource(R.drawable.ic_ticket_primary600_48dp);
        }

    } else {
        gridView = (View) convertView;
    }
}

Answer 1

Yes, you’re right. This is because views (line layout) are repurposed.

The problem with your code is that you are only assigning values to views when the layout is null(if (convertView == null)).

Change the method getView() so that values are assigned to the views either convertView is void or not:

public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    //View gridView;

    if (convertView == null) {

        //gridView = new View(context);

        // get layout from row_grid.xml
        convertView = inflater.inflate(R.layout.row_grid, null);

        // set value into textview
        TextView nomeProduto = (TextView) convertView.findViewById(R.id.item_TextNome);
        TextView precoProduto = (TextView) convertView.findViewById(R.id.item_textPreco);
        ImageView imageView = (ImageView) convertView.findViewById(R.id.grid_item_image);


    } 
    Produto produto = produtos.get(position);
    nomeProduto.setText(produto.getNome());
    precoProduto.setText("R$" + String.format("%.2f",produto.getPreco()).replace(".",","));

    //Bold
    nomeProduto.setTypeface(null, Typeface.BOLD);

    // set image based on selected text

    String mobile = categorias.get(position);

    if (mobile.equals("Bebida")) {
        imageView.setImageResource(R.drawable.ic_beer_primary600_48dp);
    } else if (mobile.equals("Doce")) {
        imageView.setImageResource(R.drawable.ic_cupcake_icon_primary_614x460);
    } else if (mobile.equals("Comida")) {
        imageView.setImageResource(R.drawable.ic_restaurant_menu_black_48dp);
    } else if (mobile.equals("Lanche")) {
        imageView.setImageResource(R.drawable.ic_hamburguer_primary600_48dp);
    } else {
        imageView.setImageResource(R.drawable.ic_ticket_primary600_48dp);
    }
    return convertView;
}

Note: No need to use a new variable(View gridView;) use convertView.