Recyclerview with image

by androindian · Published August 29, 2018 · Updated October 13, 2018

1514 views.

This new widget is a big step for displaying data in Material Design because the ListView and GridView are one of the most commonly used UI widgets. In RecyclerView android provides a lot of new features which are not present in existing ListView or GridView.

Important Note:

In Android, RecyclerView provides an ability to implement the horizontal, vertical and Expandable List. It is mainly used when we have data collections whose elements can change at runtime based on user action or any network events. For using this widget we have to specify the Adapter and Layout Manager.

Webservice:

URL:

http://androindian.com/apps/my_apps/api.php

Req: {“action”:”get_all_apps”}

Response:

{
“response”: “success”,
“results”: 11,
“data”: [
{
“id”: “1”,
“app_name”: “Best Wishes”,
“pic”: “http://androindian.com/app_images/best-wishes.png”,
“url”: “https://play.google.com/store/apps/details?id=androiindians.messages”
},
}

This Recycler using retrofit

Pleae add below gradle in project

implementation 'com.android.support:recyclerview-v7:27.1.1'
    implementation 'com.squareup.retrofit2:converter-gson:2.4.0'
    implementation 'com.squareup.retrofit2:retrofit:2.4.0'
    implementation 'com.google.code.gson:gson:2.8.2'
    implementation 'com.squareup.picasso:picasso:2.71828'

implementation 'com.android.support:recyclerview-v7:27.1.1'

implementation 'com.squareup.retrofit2:converter-gson:2.4.0'

implementation 'com.squareup.retrofit2:retrofit:2.4.0'

implementation 'com.google.code.gson:gson:2.8.2'

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

activitymain.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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:orientation="vertical">

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler_view"

android:scrollbars="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

MainActivity.Java

package com.androindian.raj.recyclerview;

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

import com.google.gson.JsonObject;
import com.google.gson.JsonParser;

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

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

import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    List<String> apps=new ArrayList<String>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);




        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

        Retrofit retrofit=new Retrofit.Builder()
                .baseUrl("http://androindian.com/apps/my_apps/")
                .addConverterFactory(GsonConverterFactory.create())
                .build();
        Appslist registerUser=retrofit.create(Appslist.class);
        JSONObject jsonObject=new JSONObject();
        try {
            jsonObject.put("action","get_all_apps");
        } catch (JSONException e) {
            e.printStackTrace();
        }
        JsonObject object=new JsonParser().parse(jsonObject.toString()).getAsJsonObject();

        Call<UserResponse> userResponseCall=registerUser.listofapps(object);

        userResponseCall.enqueue(new Callback<UserResponse>() {
            @Override
            public void onResponse(Call<UserResponse> call,
                                   Response<UserResponse> response) {


                LinearLayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext(),
                        LinearLayoutManager.VERTICAL, false);

                recyclerView.setLayoutManager(mLayoutManager);
                CustomAdapter customAdapter = new CustomAdapter(MainActivity.this, response.body().getData());
                recyclerView.setAdapter(customAdapter); // set the Adapter to RecyclerView


            }

            @Override
            public void onFailure(Call<UserResponse> call, Throwable t) {

                Toast.makeText(MainActivity.this, ""+t, Toast.LENGTH_SHORT).show();

            }
        });



    }
}

package com.androindian.raj.recyclerview;

import android.content.Intent;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.DefaultItemAnimator;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.widget.Toast;

import com.google.gson.JsonObject;

import com.google.gson.JsonParser;

import org.json.JSONException;

import org.json.JSONObject;

import java.util.ArrayList;

import java.util.List;

import retrofit2.Call;

import retrofit2.Callback;

import retrofit2.Response;

import retrofit2.Retrofit;

import retrofit2.converter.gson.GsonConverterFactory;

public class MainActivity extends AppCompatActivity {

private RecyclerView recyclerView;

List<String> apps=new ArrayList<String>();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

Retrofit retrofit=new Retrofit.Builder()

.baseUrl("http://androindian.com/apps/my_apps/")

.addConverterFactory(GsonConverterFactory.create())

.build();

Appslist registerUser=retrofit.create(Appslist.class);

JSONObject jsonObject=new JSONObject();

try {

jsonObject.put("action","get_all_apps");

} catch (JSONException e) {

e.printStackTrace();

}

JsonObject object=new JsonParser().parse(jsonObject.toString()).getAsJsonObject();

Call<UserResponse> userResponseCall=registerUser.listofapps(object);

userResponseCall.enqueue(new Callback<UserResponse>() {

@Override

public void onResponse(Call<UserResponse> call,

Response<UserResponse> response) {

LinearLayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext(),

LinearLayoutManager.VERTICAL, false);

recyclerView.setLayoutManager(mLayoutManager);

CustomAdapter customAdapter = new CustomAdapter(MainActivity.this, response.body().getData());

recyclerView.setAdapter(customAdapter); // set the Adapter to RecyclerView

}

@Override

public void onFailure(Call<UserResponse> call, Throwable t) {

Toast.makeText(MainActivity.this, ""+t, Toast.LENGTH_SHORT).show();

}

});

}

Create an interface Appslist.java

package com.androindian.raj.recyclerview;

import com.google.gson.JsonObject;

import retrofit2.Call;
import retrofit2.http.Body;
import retrofit2.http.Headers;
import retrofit2.http.POST;

public interface Appslist {

    @Headers("Content-Type:application/json")
    @POST("api.php")
    Call<UserResponse> listofapps(@Body JsonObject jsonObject);

}

package com.androindian.raj.recyclerview;

import com.google.gson.JsonObject;

import retrofit2.Call;

import retrofit2.http.Body;

import retrofit2.http.Headers;

import retrofit2.http.POST;

public interface Appslist {

@Headers("Content-Type:application/json")

@POST("api.php")

Call<UserResponse> listofapps(@Body JsonObject jsonObject);

}

Then Create one more class for object response on name of UserResponse.class

package com.androindian.raj.recyclerview;

import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;

import java.util.List;

public class UserResponse {
    @SerializedName("response")
    @Expose
    private String response;
    @SerializedName("results")
    @Expose
    private Integer results;
    @SerializedName("data")
    @Expose
    private List<Datum> data = null;

    public String getResponse() {
        return response;
    }

    public void setResponse(String response) {
        this.response = response;
    }

    public Integer getResults() {
        return results;
    }

    public void setResults(Integer results) {
        this.results = results;
    }

    public List<Datum> getData() {
        return data;
    }

    public void setData(List<Datum> data) {
        this.data = data;
    }


}

package com.androindian.raj.recyclerview;

import com.google.gson.annotations.Expose;

import com.google.gson.annotations.SerializedName;

import java.util.List;

public class UserResponse {

@SerializedName("response")

@Expose

private String response;

@SerializedName("results")

@Expose

private Integer results;

@SerializedName("data")

@Expose

private List<Datum> data = null;

public String getResponse() {

return response;

}

public void setResponse(String response) {

this.response = response;

}

public Integer getResults() {

return results;

}

public void setResults(Integer results) {

this.results = results;

}

public List<Datum> getData() {

return data;

}

public void setData(List<Datum> data) {

this.data = data;

}

Then for array response need one more create class on name Datum.java

package com.androindian.raj.recyclerview;

import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;

public class Datum {
    @SerializedName("id")
    @Expose
    private String id;
    @SerializedName("app_name")
    @Expose
    private String appName;
    @SerializedName("pic")
    @Expose
    private String pic;
    @SerializedName("url")
    @Expose
    private String url;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getAppName() {
        return appName;
    }

    public void setAppName(String appName) {
        this.appName = appName;
    }

    public String getPic() {
        return pic;
    }

    public void setPic(String pic) {
        this.pic = pic;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

}

package com.androindian.raj.recyclerview;

import com.google.gson.annotations.Expose;

import com.google.gson.annotations.SerializedName;

public class Datum {

@SerializedName("id")

@Expose

private String id;

@SerializedName("app_name")

@Expose

private String appName;

@SerializedName("pic")

@Expose

private String pic;

@SerializedName("url")

@Expose

private String url;

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getAppName() {

return appName;

}

public void setAppName(String appName) {

this.appName = appName;

}

public String getPic() {

return pic;

}

public void setPic(String pic) {

this.pic = pic;

}

public String getUrl() {

return url;

}

public void setUrl(String url) {

this.url = url;

}

then Create Custom Adapter for Recyclerview

package com.androindian.raj.recyclerview;

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 android.widget.Toast;

import com.squareup.picasso.Picasso;

import java.util.List;

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {
    List<Datum> Data;
    Context context;

    public CustomAdapter(MainActivity mainActivity, List<Datum> data) {
        context=mainActivity;
        Data=data;
    }


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

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) {

        holder.textView.setText(Data.get(position).getAppName());
        Picasso.get().load(Data.get(position).getPic()).into(holder.imageView);

        holder.imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, ""+position, Toast.LENGTH_SHORT).show();
            }
        });

    }



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

    public class MyViewHolder extends RecyclerView.ViewHolder {
        TextView textView;
        ImageView imageView;
        public MyViewHolder(View itemView) {
            super(itemView);
          textView=itemView.findViewById(R.id.tv);
             imageView=itemView.findViewById(R.id.iv);
        }
    }
}

package com.androindian.raj.recyclerview;

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 android.widget.Toast;

import com.squareup.picasso.Picasso;

import java.util.List;

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {

List<Datum> Data;

Context context;

public CustomAdapter(MainActivity mainActivity, List<Datum> data) {

context=mainActivity;

Data=data;

}

@NonNull

@Override

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

View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.rowlayout, parent, false);

return new MyViewHolder(view);

}

@Override

public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) {

holder.textView.setText(Data.get(position).getAppName());

Picasso.get().load(Data.get(position).getPic()).into(holder.imageView);

holder.imageView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(context, ""+position, Toast.LENGTH_SHORT).show();

}

});

}

@Override

public int getItemCount() {

return Data.size();

}

public class MyViewHolder extends RecyclerView.ViewHolder {

TextView textView;

ImageView imageView;

public MyViewHolder(View itemView) {

super(itemView);

textView=itemView.findViewById(R.id.tv);

imageView=itemView.findViewById(R.id.iv);

}

then create one more xml file for view on name of rowlayout.xml

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/iv"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/iv"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tv"/>

</LinearLayout>

Finally add Internet permission in manifest file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androindian.raj.recyclerview">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.androindian.raj.recyclerview">

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

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

OutPut

Screenshot_1535547104

Recyclerview with image

You may also like...

Leave a Reply Cancel reply

Apps in Playstore

Recent

Video Tutorials

OBJECTIVE...!

Subscribe for Updates

Recyclerview with image

You may also like...

Android Architecture

Android Form Validation Tutorial using AwesomeValidation Library

Adding Advertisement into your Application

Leave a Reply Cancel reply

Apps in Playstore

Recent

Video Tutorials

OBJECTIVE...!

Subscribe for Updates