How to use Recylerview & Picasso to use api and fetch into list

tech

How to use Recylerview & Picasso to use api and fetch into list

written on 2021-01-26 by SAURABH JADHAV | tech

```java Dependency/Gradle:

//recyclerview

implementation 'androidx.recyclerview:recyclerview:1.1.0'

//Image Library

implementation 'com.squareup.picasso:picasso:2.71828'

//for calling api

implementation 'com.android.volley:volley:1.1.0'

Add Permission in Manifest.xml

```

For api call we will need internet

Steps:

Add recycler view in activitymain.xml

```xml

​ xmlns:app="http://schemas.android.com/apk/res-auto"

​ xmlns:tools="http://schemas.android.com/tools"

​ android:layoutwidth="matchparent"

​ android:layoutheight="matchparent"

​ tools:context=".MainActivity">

​ android:id="@+id/recyclerview"

​ android:layout_width="409dp"

​ android:layout_height="729dp"

​ app:layoutconstraintStarttoStartOf="parent"

​ app:layoutconstraintToptoTopOf="parent" />

Create item view : itemfeed.xml

​ xmlns:app="http://schemas.android.com/apk/res-auto"

​ xmlns:tools="http://schemas.android.com/tools"

​ android:layoutwidth="matchparent"

​ android:layoutheight="wrapcontent"

​ android:background="#FFFFFF">

​ android:layoutwidth="matchparent"

​ android:layoutheight="wrapcontent"

​ android:layout_marginStart="4dp"

​ android:layout_marginLeft="4dp"

​ android:layout_marginTop="4dp"

​ android:layout_marginEnd="4dp"

​ android:layout_marginRight="4dp"

​ android:layout_marginBottom="4dp"

​ android:background="#F4EFEF"

​ app:layoutconstraintBottomtoBottomOf="parent"

​ app:layoutconstraintEndtoEndOf="parent"

​ app:layoutconstraintStarttoStartOf="parent"

​ app:layoutconstraintToptoTopOf="parent">

​ android:id="@+id/profile"

​ android:layout_width="60dp"

​ android:layout_height="59dp"

​ android:layout_marginStart="4dp"

​ android:layout_marginLeft="4dp"

​ android:layout_marginTop="16dp"

​ app:layoutconstraintStarttoStartOf="parent"

​ app:layoutconstraintToptoTopOf="parent"

​ tools:srcCompat="@tools:sample/avatars" />

​ android:id="@+id/title"

​ android:layoutwidth="wrapcontent"

​ android:layoutheight="wrapcontent"

​ android:layout_marginStart="24dp"

​ android:layout_marginLeft="24dp"

​ android:layout_marginTop="16dp"

​ android:text="Title"

​ android:textColor="#000000"

​ android:textSize="24dp"

​ app:layoutconstraintStarttoEndOf="@+id/profile"

​ app:layoutconstraintToptoTopOf="parent" />

​ android:id="@+id/status"

​ android:layoutwidth="wrapcontent"

​ android:layoutheight="wrapcontent"

​ android:layout_marginStart="2dp"

​ android:layout_marginLeft="2dp"

​ android:layout_marginTop="24dp"

​ android:layout_marginEnd="2dp"

​ android:layout_marginRight="2dp"

​ android:paddingLeft="4dp"

​ android:paddingRight="4dp"

​ android:text="lorem posem lorem posemlorem posem lorem posemlorem pose posem"

​ android:textSize="22dp"

​ app:layoutconstraintEndtoEndOf="parent"

​ app:layoutconstraintStarttoStartOf="parent"

​ app:layoutconstraintToptoBottomOf="@+id/profile" />

​ android:id="@+id/image"

​ android:layoutwidth="matchparent"

​ android:layout_height="200dp"

​ android:layout_marginTop="8dp"

​ app:layoutconstraintEndtoEndOf="parent"

​ app:layoutconstraintHorizontalbias="0.0"

​ app:layoutconstraintStarttoStartOf="parent"

​ app:layoutconstraintToptoBottomOf="@+id/status"

​ tools:srcCompat="@tools:sample/backgrounds/scenic" />

​ android:id="@+id/time"

​ android:layoutwidth="wrapcontent"

​ android:layoutheight="wrapcontent"

​ android:layout_marginStart="28dp"

​ android:layout_marginLeft="28dp"

​ android:layout_marginTop="10dp"

​ android:text="TextView"

​ app:layoutconstraintStarttoEndOf="@+id/profile"

​ app:layoutconstraintToptoBottomOf="@+id/title" />

```

Based On data Create Model class :

Here we have used api ,to parse so according to data it is the modelclass.java

```java package com.saurabhjadhav.quantsapp_task;

public class model_class {

​ private String title;

​ private String profilepic;

​ private String image;

​ private String status;

​ private String time;

​ public model_class(String title, String profilepic, String image, String status, String time) {

​ this.title = title;

​ this.profilepic = profilepic;

​ this.image = image;

​ this.status = status;

​ this.time = time;

​ }

​ public String getTitle() {

​ return title;

​ }

​ public void setTitle(String title) {

​ this.title = title;

​ }

​ public String getProfilepic() {

​ return profilepic;

​ }

​ public void setProfilepic(String profilepic) {

​ this.profilepic = profilepic;

​ }

​ public String getImage() {

​ return image;

​ }

​ public void setImage(String image) {

​ this.image = image;

​ }

​ public String getStatus() {

​ return status;

​ }

​ public void setStatus(String status) {

​ this.status = status;

​ }

​ public String getTime() {

​ return time;

​ }

​ public void setTime(String time) {

​ this.time = time;

​ }

}

```

Now Create Adapter class for recycler view:

Recycleradapter.java

```java package com.saurabhjadhav.quantsapp_task;

import android.content.Context;

import android.text.format.DateUtils;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import androidx.annotation.NonNull;

import androidx.recyclerview.widget.RecyclerView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

public class recycler_adapter extends RecyclerView.Adapter {

​ private Context mcontext;

​ private ArrayList mmodelClassArrayList;

​ public recycler_adapter(Context context,ArrayList modelClassArrayList)

​ {

​ mcontext=context;

​ mmodelClassArrayList=modelClassArrayList;

​ }

​ @NonNull

​ @Override

​ public recyclerviewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

​ View v= LayoutInflater.from(mcontext).inflate(R.layout.item_feed,parent,false);

​ return new recyclerviewHolder(v);

​ }

​ @Override

​ public void onBindViewHolder(@NonNull recyclerviewHolder holder, int position) {

​ model_class currentitem=mmodelClassArrayList.get(position);

​ String title1=currentitem.getTitle();

​ String image1=currentitem.getImage();

​ String profile1=currentitem.getProfilepic();

​ String status1=currentitem.getStatus();

​ holder.status.setText(status1);

​ holder.title.setText(title1);

​ CharSequence timeAgo = DateUtils.getRelativeTimeSpanString(

​ Long.parseLong(currentitem.getTime()),

​ System.currentTimeMillis(), DateUtils.SECONDINMILLIS);

​ holder.time2.setText(timeAgo);

​ Picasso.get().load(profile1).into(holder.profile2);

​ Picasso.get().load(image1).into(holder.Image2);

​ }

​ @Override

​ public int getItemCount() {

​ return mmodelClassArrayList.size();

​ }

​ public class recyclerviewHolder extends RecyclerView.ViewHolder{

​ public ImageView profile2,Image2;

​ public TextView title,status,time2;

​ public recyclerviewHolder(@NonNull View itemView) {

​ super(itemView);

​ profile2=itemView.findViewById(R.id.profile);

​ Image2=itemView.findViewById(R.id.image);

​ title=itemView.findViewById(R.id.title);

​ status=itemView.findViewById(R.id.status);

​ time2=itemView.findViewById(R.id.time);

​ }

​ }

}

```

Now Open MainActivity.java

Declare variables and in On create Bind the adapter and recycler view:

```java public class MainActivity extends AppCompatActivity {

​ private RecyclerView mrecyclerView;

​ private recycleradapter mrecycleradapter;

​ private ArrayList model_classArrayList;

​ private RequestQueue mrequestQueue;

​ @Override

​ protected void onCreate(Bundle savedInstanceState) {

​ super.onCreate(savedInstanceState);

​ setContentView(R.layout.activity_main);

​ mrecyclerView=findViewById(R.id.recyclerview);

​ mrecyclerView.setLayoutManager(new LinearLayoutManager(this));

​ model_classArrayList=new ArrayList<>();

​ mrequestQueue= Volley.newRequestQueue(this);

​ parseJSON();//this is for parsing we will create it

​ }

}

```

Now define parseJSON where we will use Volley:

```java private void parseJSON()

​ {

​ String url="https://api.androidhive.info/feed/feed.json";

​ JsonObjectRequest request=new JsonObjectRequest(Request.Method.GET, url, null,

​ new Response.Listener() {

​ @Override

​ public void onResponse(JSONObject response) {

​ try {

​ JSONArray jsonArray=response.getJSONArray("feed");

​ for (int i=0;i

​ {

​ JSONObject feed=jsonArray.getJSONObject(i);

​ String title1=feed.getString("name");

​ String image1=feed.getString("image");

​ String profile1=feed.getString("profilePic");

​ String status1=feed.getString("status");

​ String time=feed.getString("timeStamp");

​ modelclassArrayList.add(new modelclass(title1,profile1,image1,status1,time));

​ }

​ mrecycleradapter=new recycleradapter(MainActivity.this

​ ,model_classArrayList);

​ mrecyclerView.setAdapter(mrecycler_adapter);

​ } catch (JSONException e) {

​ e.printStackTrace();

​ }

​ }

​ }, new Response.ErrorListener() {

​ @Override

​ public void onErrorResponse(VolleyError error) {

​ error.printStackTrace();

​ }

​ });

​ mrequestQueue.add(request);

​ }

```

Full Mainactivity.java

```java package com.saurabhjadhav.quantsapp_task;

import androidx.appcompat.app.AppCompatActivity;

import androidx.recyclerview.widget.LinearLayoutManager;

import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import com.android.volley.Request;

import com.android.volley.RequestQueue;

import com.android.volley.Response;

import com.android.volley.VolleyError;

import com.android.volley.toolbox.JsonObjectRequest;

import com.android.volley.toolbox.Volley;

import org.json.JSONArray;

import org.json.JSONException;

import org.json.JSONObject;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

​ private RecyclerView mrecyclerView;

​ private recycleradapter mrecycleradapter;

​ private ArrayList model_classArrayList;

​ private RequestQueue mrequestQueue;

​ @Override

​ protected void onCreate(Bundle savedInstanceState) {

​ super.onCreate(savedInstanceState);

​ setContentView(R.layout.activity_main);

​ mrecyclerView=findViewById(R.id.recyclerview);

​ mrecyclerView.setLayoutManager(new LinearLayoutManager(this));

​ model_classArrayList=new ArrayList<>();

​ mrequestQueue= Volley.newRequestQueue(this);

​ parseJSON();

​ }

​ private void parseJSON()

​ {

​ String url="https://api.androidhive.info/feed/feed.json";

​ JsonObjectRequest request=new JsonObjectRequest(Request.Method.GET, url, null,

​ new Response.Listener() {

​ @Override

​ public void onResponse(JSONObject response) {

​ try {

​ JSONArray jsonArray=response.getJSONArray("feed");

​ for (int i=0;i

​ {

​ JSONObject feed=jsonArray.getJSONObject(i);

​ String title1=feed.getString("name");

​ String image1=feed.getString("image");

​ String profile1=feed.getString("profilePic");

​ String status1=feed.getString("status");

​ String time=feed.getString("timeStamp");

​ modelclassArrayList.add(new modelclass(title1,profile1,image1,status1,time));

​ }

​ mrecycleradapter=new recycleradapter(MainActivity.this

​ ,model_classArrayList);

​ mrecyclerView.setAdapter(mrecycler_adapter);

​ } catch (JSONException e) {

​ e.printStackTrace();

​ }

​ }

​ }, new Response.ErrorListener() {

​ @Override

​ public void onErrorResponse(VolleyError error) {

​ error.printStackTrace();

​ }

​ });

​ mrequestQueue.add(request);

​ }

}

```

Our work is done here !

Some Extra Snippets but helpful !

Add Onclicklistener to each item in View Holder:

```java holder.itemView.setOnClickListener(view -> {//just add oclick listener

​ Intent intent = new Intent(mContext, articlefulllayout.class);

​ intent.putExtra("title", ptitle);

​ intent.putExtra("image", pImg);

​ intent.putExtra("post", post);

​ mContext.startActivity(intent);

}); ```