How to Create Recycler View with Online Images using Picaso & Volley in Android Studio|| The Developer 2.0

Hello guys in this tutorial you can learn that how you can create create a Recycler view with online Images and from Mysql database. You need to use tow libary one is Picaso libary to load image from URl and another is Volley libary to get data from Mysql server.

Picaso Libary: http://square.github.io/picasso/

Gradel file Config:

implementation ‘com.squareup.picasso:picasso:2.71828

Volley libary: https://developer.android.com/training/volley

Gradel file Config:

implementation ‘com.android.volley:volley:1.1.1’

You need to set INTERNET PERMISSION on Anroidmanfest.xml file.

<uses-permission android:name=”android.permission.INTERNET”></uses-permission>

 

Watch Tutorial Video:

Download PHP File:

Click on Below button and complete task showed in pop up to Download the matches.php file

 

activitymain.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/thums"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

items.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="250dp" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/pic"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="fitXY"
                app:srcCompat="@drawable/png1" />

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="52dp"
                android:text="TextView"
                android:textAlignment="center"
                android:textColor="#14479C"
                android:textSize="18sp"
                android:textStyle="bold" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>

Listitem.java

package com.sanjay.youtube;

public class Listitem {

    String Image;
    String title;

    public Listitem(String image, String title)
    {
        this.Image=image;
        this.title = title;

    }
    public String getImage (){return Image;}
    public String getTitle (){return title;}

}

RecyclerViewAdapter.java

package com.sanjay.youtube;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.util.List;

public class RecyclerViewAdapter extends RecyclerView.Adapter <RecyclerViewAdapter.MatchViewHolder> {
    private List<Listitem> listItems;
    private Context context;



    public RecyclerViewAdapter (List<Listitem> listItems, Context context )
    {
        this.listItems = listItems;
        this.context =context;
    }
    @NonNull
    @Override
    public MatchViewHolder  onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.items,viewGroup, false );
        MatchViewHolder matchViewHolder =new MatchViewHolder(view);
        return matchViewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull MatchViewHolder  viewHolder, int i) {
        Listitem listItem =listItems.get(i);
        ImageView imageView =viewHolder.imageView;
        String url="http://i3.ytimg.com/vi/"+listItem.getImage()+"/maxresdefault.jpg";
        Picasso.get()
                .load(url)
                .placeholder(R.drawable.png1)
                .error(R.drawable.png1)
                .into(imageView);
        viewHolder.textView.setText(listItem.getTitle());



    }

    @Override
    public int getItemCount() {
        return listItems.size();
    }
    public static class MatchViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView ;
        TextView textView;

        public MatchViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.pic);
            textView = itemView.findViewById(R.id.title);


        }

    }
}

MainActivity.java

package com.sanjay.youtube;

import android.app.LauncherActivity;
import android.app.ProgressDialog;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.Toast;

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.StringRequest;
import com.android.volley.toolbox.Volley;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.List;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private RecyclerView.LayoutManager layoutManager;
    private RecyclerView.Adapter adapter;
    private List<Listitem> listItems;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = findViewById(R.id.thums);
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(layoutManager);
        listItems =new ArrayList<>();
        loadRecycleViewdata();

    }

    private void loadRecycleViewdata() {
        final ProgressDialog progressDialog =new ProgressDialog(this) ;
        progressDialog.setMessage("Loadinng...");
        progressDialog.show();
        String url="https://sanjaythedeveloper.com/Google/aia.php";
        StringRequest request = new StringRequest(Request.Method.GET,url,
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {

                        try {
                            JSONArray jsonArray =new JSONArray(response) ;
                            for(int i = 0; i<jsonArray.length(); i++)
                            {
                                JSONObject o =jsonArray.getJSONObject(i);
                                Listitem item = new Listitem(
                                        o.getString("video_id"),
                                        o.getString("title")



                                );
                                listItems.add(item);
                                progressDialog.dismiss();


                            }
                            recyclerView.setAdapter(adapter);
                            adapter =new RecyclerViewAdapter(listItems, getApplicationContext());
                            recyclerView.setAdapter(adapter);

                        } catch (JSONException e) {
                            e.printStackTrace();
                        }
                    }
                }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
               progressDialog.dismiss();


            }
        });

        RequestQueue requestQueue = Volley.newRequestQueue(this );
        requestQueue.add(request);


    }
}