Android Image loading in RecyclerView using Picasso
In our previous tutorials we learned to implement a simple RecyclerView. In this tutorial we are going to learn how to load image from Internet to RecyclerView using Picasso library.
The dependency for Picasso is
compile 'com.squareup.picasso:picasso:2.5.2'
The other dependencies we require,
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'
The complete build.gradle
apply plugin: 'com.android.application'
android {
compileSdkVersion 23
buildToolsVersion "23.0.2"
defaultConfig {
applicationId "com.learn2crack.loadimage"
minSdkVersion 16
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.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:cardview-v7:23.1.1'
compile 'com.squareup.picasso:picasso:2.5.2'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
}
activity_main.xml
<?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="com.learn2crack.loadimage.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>
row_layout.xml
<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="120dp"
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>
AndroidVersion.java
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(Stringandroid_image_url) {
this.android_image_url = android_image_url;
}
}
Creating Adapter
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(120, 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);
}
}
}
In our Activity the android version names are defined in the array android_version_names. Similarly the image urls are defined in android_image_urls. We create a new AndroidVersion object and use getters and setters to set the version name and image URL. Finally we add all those objects to ArrayList.
Finally a new DataAdapter object is created and set to RecyclerView using setAdapter() method
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://api.learn2crack.com/android/images/donut.png",
"http://api.learn2crack.com/android/images/eclair.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;
}
}
Screenshot
No comments:
Post a Comment