Can't load images in RecyclerView using Picasso

Question

I am using Volley and Picasso library to display an ImageView with 3 TextViews in a RecyclerView. The following is the layout design for row.xml

row.xml preview

Below is the output:

preview output

Images are not being displayed in the RecyclerView, above is the snapshots for row.xml and the output.You can compare the output with row.xml file.Any help would be appreciated,Thank you!

row.xml

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="5dp"
    app:cardBackgroundColor="#fff"
    app:cardUseCompatPadding="true"
    app:contentPadding="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/id_avatar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp">

            <TableRow>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Name :"
                    android:textSize="18dp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/tvnamehere"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="Name here..."
                    android:textSize="18dp"
                    android:textStyle="bold"/>
            </TableRow>

            <TableRow>
                <TextView
                    android:id="@+id/id_userid"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="ID :"
                    android:textSize="18dp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/tvidhere"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="id here..."
                    android:textSize="18dp"
                    android:textStyle="bold" />
            </TableRow>

            <TableRow>
                <TextView
                    android:id="@+id/id_url"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Url :"
                    android:textSize="18dp"
                    android:textStyle="bold"/>

                <TextView
                    android:id="@+id/tvurlhere"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="url here..."
                    android:textSize="18dp"
                    android:textStyle="bold" />
            </TableRow>
        </TableLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

MainActivity.java

public class MainActivity extends AppCompatActivity
{
    public static final String URL = "https://api.myjson.com/bins/hm03k";
    RecyclerView recyclerView;
    MyAdapter mAdapter;
    ArrayList<Model> models = new ArrayList<>();

    @Override
    public void onResume()
    {
        super.onResume();
        retrieveData();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.id_recyclerView);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
    }

    public void retrieveData()
    {
        final ProgressDialog progressDialog = new ProgressDialog(this);
        progressDialog.setMessage("Loading...");
        progressDialog.show();

        StringRequest request = new StringRequest(URL, new Response.Listener<String>() {
            @Override
            public void onResponse(String response)
            {
                progressDialog.dismiss();
                try {
                    JSONArray jsonArray = new JSONArray(response);
                    for (int i = 0; i<jsonArray.length(); i++)
                    {
                        JSONObject object = jsonArray.getJSONObject(i);
                        Model model = new Model(object.getString("login"),
                                object.getString("id"),
                                object.getString("avatar_url"),
                                object.getString("url"));
                        models.add(model);
                    }
                    recyclerView.setAdapter(mAdapter);
                    mAdapter = new MyAdapter(models,getApplicationContext());
                }
                catch (JSONException e) {
                    e.printStackTrace();
                }

            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Toast.makeText(MainActivity.this, "Error!", Toast.LENGTH_SHORT).show();
            }
        });

        RequestQueue queue = Volley.newRequestQueue(this);
        queue.add(request);
    }
}

Model.java (POJO class)

public class Model
{
    String username,userid,userprofileurl,userimage;

    public Model(String username, String userid, String userprofileurl, String userimage) {
        this.username = username;
        this.userid = userid;
        this.userprofileurl = userprofileurl;
        this.userimage = userimage;
    }


    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getUserid() {
        return userid;
    }

    public void setUserid(String userid) {
        this.userid = userid;
    }

    public String getUserprofileurl() {
        return userprofileurl;
    }

    public void setUserprofileurl(String userprofileurl) {
        this.userprofileurl = userprofileurl;
    }

    public String getUserimage() {
        return userimage;
    }

    public void setUserimage(String userimage) {
        this.userimage = userimage;
    }
}

MyAdapter.class

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>
{
    private Context context;
    private ArrayList<Model> models;

    public MyAdapter(ArrayList<Model> models, Context applicationContext)
    {
        this.context = context;
        this.models = models;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
    {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.row,null);
        return new MyViewHolder(v);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position)
    {
        holder.tvUsername.setText(models.get(position).getUsername());
        holder.tvUserid.setText(models.get(position).getUserid());
        holder.tvUserurl.setText(models.get(position).getUserprofileurl());

        Picasso.get()
                .load(models.get(position).getUserimage())
                .into(holder.imgAvatar);

    }

    @Override
    public int getItemCount()
    {
        return models.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder
    {
        ImageView imgAvatar;
        TextView tvUsername,tvUserid,tvUserurl;

        public MyViewHolder(View itemView)
        {
            super(itemView);
            imgAvatar = itemView.findViewById(R.id.id_avatar);
            tvUsername = itemView.findViewById(R.id.tvnamehere);
            tvUserid = itemView.findViewById(R.id.id_userid);
            tvUserurl = itemView.findViewById(R.id.id_url);
        }
    }
}

Answer 1

The moment you assign the adapter for your RecyclerView it is still null, you have to invert the order of calls:

            mAdapter = new MyAdapter(models,getApplicationContext());
            recyclerView.setAdapter(mAdapter);

so mAdapter will have value for being used at setAdapter .

Answer 2

Check your MyAdapter's Constructor

public MyAdapter(ArrayList<Model> models, Context applicationContext)
{
    this.context = context; // '= context;' should be '= applicationContext;'
    this.models = models;
}

It should be

 public MyAdapter(ArrayList<Model> models, Context applicationContext)
{
    this.context = applicationContext;
    this.models = models;
}

Answer 3

    ***Try This :***

    Dependancy : 
    implementation "com.squareup.picasso:picasso:2.4.0"

    Adapter :

          Picasso.with(context)
                    .load(new File(food.getImage()))
                    .error(R.drawable.ic_home_black_24dp)
                    .resize(50,50)
                    .placeholder(R.drawable.ic_home_black_24dp)
                    .into(holder.imageView);

load : your model class 
into : your imageview