Updating a GridView triggers android.os.NetworkOnMainThreadException

Issue

I have the problem that every time I want to update my gridview in my fragment I get this error:

android.os.NetworkOnMainThreadException

What do I want to achive?

Show a loading gif in my layout until my fragment loads a list from firestore in the background and then set the data to the gridview Adapter and after that just hide the loading gif and show the gridview.

What did I try already?

I tried to fetch the data and set the Adapter in an AsynkTask and Background Thread but I still recive the same error. (Firestore itself is asynchron also)

When does the Error gets triggered?

public void updateAdapterView(JSONArray cards) {
    //Error gets triggered here   
    grid.invalidateViews();
    adapter.refresh(cards);
}

Fragment Activity:

  //Set Layout for Fragment
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    final FrameLayout view = (FrameLayout) inflater.inflate(R.layout.fragment_exchange, container, false);
    loadinglayout = view.findViewById(R.id.loadinglayout);
    gridlayout = view.findViewById(R.id.gridlayout);

    //first time setting Adapter with empty items
    adapter = new ExchangeListAdapter(getContext(), cards);
    grid = view.findViewById(R.id.grid);
    grid.setAdapter(adapter);
    grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            Intent exchangedetail = new Intent(getActivity(), ExchangeDetail.class);
            //exchangedetail.putExtra("item", cardslist[+ position]);
            getActivity().startActivity(exchangedetail);
        }
    });

    return view;
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    //get data from firestore
    ((MainActivity) getActivity()).getCardsList(new BaseAppCompatActivity.OnCardsFilledListener() {
        @Override
        public void onCardsFilled(final JSONArray cards) {
            updateAdapterView(cards);
        }

        @Override
        public void onError(Exception taskException) {

        }
    });
}

public void updateAdapterView(JSONArray cards) {
    grid.invalidateViews();
    adapter.refresh(cards);
}

GridView Adapter:

public class ExchangeListAdapter extends BaseAdapter {
private Context mContext;
private JSONArray cards;

public ExchangeListAdapter(Context c, JSONArray cards) {
    mContext = c;
    this.cards = cards;
}

@Override
public int getCount() {
    int length = 0;

    if(cards != null) {
      length = cards.length();
    }

    return length;
}

@Override
public Object getItem(int position) {
    // TODO Auto-generated method stub
    return null;
}

@Override
public long getItemId(int position) {
    // TODO Auto-generated method stub
    return 0;
}

public void refresh(JSONArray cards)
{
    this.cards = cards;
    notifyDataSetChanged();
}

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

    if (convertView == null) {
        grid = new View(mContext);
        grid = inflater.inflate(R.layout.item_exchange_list, null);
        ImageView imageView = grid.findViewById(R.id.grid_image);

        URL url = null;
        try {
            url = new URL(cards.getJSONObject(position).getString("thumbnail"));
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (JSONException e) {
            e.printStackTrace();
        }

        Bitmap bmp = null;
        try {
            bmp = BitmapFactory.decodeStream(url.openConnection().getInputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }

        imageView.setImageBitmap(bmp);
    } else {
        grid = convertView;
    }

    return grid;
}
}

Solution

You are attempting to load an image from a URL on the main application thread inside your getView() method.

Add an image-loading library, such as Glide or Picasso, to your project. Then, use that library to load the image. A library like those can:

• Handle placeholder images for a loading state
• Do the network I/O on a background thread
• Scale the image to fit your ImageView while taking up less memory
• Deal with ImageView recycling, if the user scrolls while the image is still being loaded

Answered By - CommonsWare