Android Loading images to Recycler View

In this tutorial i will give you instructions of loading images in a recycler view using Picasso library. One you complete this tutorial your application will look like this.
Screenshot_2016-06-17-10-26-06

This application will list image of the android versions and its version names. OK. lets get started.

1. Create a new project.

Open up your android studio and create a new project with the name Recyclerimage. Note you can give any name you like, but for this tutorial i suggest using the same name.

2.  Create a layout for the recycler view.

Inside your res/layout/ folder create a new file called row_layout.xml . This file will have a simple image view and a text view and copy and paste the below code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    card_view:cardCornerRadius="5dp">
 
    <RelativeLayout
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
 
        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:id="@+id/img_android"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="20dp"/>
 
        <TextView
            android:layout_marginTop="10dp"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_android"
            android:textStyle="bold"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/img_android" />
    </RelativeLayout>
 
</android.support.v7.widget.CardView>

Then add a recycler view to your activity_main.xml as shown in below code. Make sure to change your tools:contex property according to your project package name.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="baman.lankahomes.lk.recyclerimage.MainActivity">
 
<android.support.v7.widget.RecyclerView
    android:id="@+id/card_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
 
</android.support.design.widget.CoordinatorLayout>

3. Add permissions to Android manifest.

This application need internet connection to download images from URL, therefore it is necessary to add request the internet permission through your AndroidManifest.xml file as shown in the below code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="baman.lankahomes.lk.recyclerimage">
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        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>

4. Creating data adapter.

Now create a new java class called DataAdapter.java inside your package and then copy and paste the below code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
package baman.lankahomes.lk.recyclerimage;
 
/**
* Created by baman on 6/17/16.
*/
 
import android.content.Context;
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.ArrayList;
 
public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> {
    private ArrayList<AndroidVersion> android_versions;
    private Context context;
 
    public DataAdapter(Context context,ArrayList<AndroidVersion> android_versions) {
        this.context = context;
        this.android_versions = android_versions;
 
    }
 
    @Override
    public DataAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.row_layout, viewGroup, false);
        return new ViewHolder(view);
    }
 
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
 
        viewHolder.tv_android.setText(android_versions.get(i).getAndroid_version_name());
        Picasso.with(context).load(android_versions.get(i).getAndroid_image_url()).resize(60, 60).into(viewHolder.img_android);
    }
 
    @Override
    public int getItemCount() {
        return android_versions.size();
    }
 
    public class ViewHolder extends RecyclerView.ViewHolder{
        TextView tv_android;
        ImageView img_android;
        public ViewHolder(View view) {
            super(view);
 
            tv_android = (TextView)view.findViewById(R.id.tv_android);
            img_android = (ImageView)view.findViewById(R.id.img_android);
        }
    }
}

Make sure to change the package name according to your project.

Now create another class inside your package and name it as AndroidVersion.java and then copy and paste the blow code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package baman.lankahomes.lk.recyclerimage;
 
/**
* Created by baman on 6/17/16.
*/
 
public class AndroidVersion {
 
    private String android_version_name;
    private String android_image_url;
 
    public String getAndroid_version_name() {
        return android_version_name;
    }
 
    public void setAndroid_version_name(String android_version_name) {
        this.android_version_name = android_version_name;
    }
 
    public String getAndroid_image_url() {
        return android_image_url;
    }
 
    public void setAndroid_image_url(String android_image_url) {
        this.android_image_url = android_image_url;
    }
}

Make sure to change the package name.

Now lets modify the MainActivity.java class to get the list of images and strings to add it in to the recycler view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
 
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
    private final String android_version_names[] = {
            "Donut",
            "Eclair",
            "Froyo",
            "Gingerbread",
            "Honeycomb",
            "Ice Cream Sandwich",
            "Jelly Bean",
            "KitKat",
            "Lollipop",
            "Marshmallow"
    };
 
    private final String android_image_urls[] = {
            "http://androidversion.info/wp-content/uploads/2014/10/donut_icon.png",
            "http://3.bp.blogspot.com/-0IA7ioM44PY/UbHRF29jbYI/AAAAAAAAEHA/mbk6xgrw_P4/s200/apa-itu-android-ECLAIR-VERSI-2.0.png",
            "http://api.learn2crack.com/android/images/froyo.png",
            "http://api.learn2crack.com/android/images/ginger.png",
            "http://api.learn2crack.com/android/images/honey.png",
            "http://api.learn2crack.com/android/images/icecream.png",
            "http://api.learn2crack.com/android/images/jellybean.png",
            "http://api.learn2crack.com/android/images/kitkat.png",
            "http://api.learn2crack.com/android/images/lollipop.png",
            "http://api.learn2crack.com/android/images/marshmallow.png"
    };
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        initViews();
    }
 
    private void initViews(){
        RecyclerView recyclerView = (RecyclerView)findViewById(R.id.card_recycler_view);
        recyclerView.setHasFixedSize(true);
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
        recyclerView.setLayoutManager(layoutManager);
 
        ArrayList androidVersions = prepareData();
        DataAdapter adapter = new DataAdapter(getApplicationContext(),androidVersions);
        recyclerView.setAdapter(adapter);
 
    }
    private ArrayList prepareData(){
 
        ArrayList android_version = new ArrayList<>();
        for(int i=0;i<android_version_names.length;i++){
            AndroidVersion androidVersion = new AndroidVersion();
            androidVersion.setAndroid_version_name(android_version_names[i]);
            androidVersion.setAndroid_image_url(android_image_urls[i]);
            android_version.add(androidVersion);
        }
        return android_version;
    }
}

5. Modify compile dependencies in your Build.gradle file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
apply plugin: 'com.android.application'
 
android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"
 
    defaultConfig {
        applicationId "baman.lankahomes.lk.recyclerimage"
        minSdkVersion 17
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
 
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.android.support:recyclerview-v7:23.1.1'
    compile 'com.android.support:cardview-v7:23.1.1'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
}

That’s it. Save the project and run it on your device or emulator. It should work fine. If you have any comments or queries leave it in the comments section below.  Thank you. Happy coding 🙂