Displaying images in adapterviews is quite common. Especially ListView, GridView and RecyclerView. In this example we see how to fetch images from the web and into a RecyclerView.
What We Do
- Fetch images from Cloudinary.
- Use Picasso ImageLoader library to load the images.
- Load these images into a RecyclerView.
- Use CardViews in our RecyclerView to display the images and text.
- We use android studio and java programming language.
Common Questions this example answers
- How do we fetch images from the web?
- How do we use Picasso to load and display images from internet.
- How do we show images in a RecyclerView.
- How do we show images in cardviews.
- How do we fetch images from cloudinary.com
Technologies Used include:
- Java
- Android Studio
Source Code
Below is the full source code for this project.
Build.Gradle
- The app level build.gradle where we add our dependencies.
apply plugin: 'com.android.application' android { compileSdkVersion 23 buildToolsVersion "23.0.2" defaultConfig { applicationId "com.tutorials.hp.picassoimagesrecyclerview" minSdkVersion 15 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:appcompat-v7:23.3.0' compile 'com.android.support:design:23.3.0' compile 'com.android.support:cardview-v7:23.3.0' compile 'com.squareup.picasso:picasso:2.5.2' }
AndroidManifest.xml
- This is where we add any permissions if necessary.
- In this case we add the permission for internet connectivity.
<?xml version="1.0" encoding="utf-8"?> <manifest package="com.tutorials.hp.picassoimagesrecyclerview"> <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" android_label="@string/app_name" android_theme="@style/AppTheme.NoActionBar"> <intent-filter> <action android_name="android.intent.action.MAIN" /> <category android_name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
ActivityMain.xml
- This is our container layout.
- We include contentmain.xml here.
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android_layout_width="match_parent" android_layout_height="match_parent" android_fitsSystemWindows="true" tools_context="com.tutorials.hp.picassoimagesrecyclerview.MainActivity"> <android.support.design.widget.AppBarLayout android_layout_width="match_parent" android_layout_height="wrap_content" android_theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android_id="@+id/toolbar" android_layout_width="match_parent" android_layout_height="?attr/actionBarSize" android_background="?attr/colorPrimary" app_popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> <android.support.design.widget.FloatingActionButton android_id="@+id/fab" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_gravity="bottom|end" android_layout_margin="@dimen/fab_margin" android_src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>
ContentMain.xml
- This is the layout where we specify our widgets and views to be inflated in our MainActivity.
- We add our RecyclerView here.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android_layout_width="match_parent" android_layout_height="match_parent" android_paddingBottom="@dimen/activity_vertical_margin" android_paddingLeft="@dimen/activity_horizontal_margin" android_paddingRight="@dimen/activity_horizontal_margin" android_paddingTop="@dimen/activity_vertical_margin" app_layout_behavior="@string/appbar_scrolling_view_behavior" tools_context="com.tutorials.hp.picassoimagesrecyclerview.MainActivity" tools_showIn="@layout/activity_main"> <android.support.v7.widget.RecyclerView android_id="@+id/rv" android_layout_width="match_parent" android_layout_height="wrap_content"> </android.support.v7.widget.RecyclerView> </RelativeLayout>
TVShow.java
- This is our data object representing a single TVShow object with its properties.
package com.tutorials.hp.picassoimagesrecyclerview.mData; public class TVShow { String name; String url; public TVShow() { } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } }#### TVShowsCollection.java 1. Contains a static method that returns all our TVShows.
package com.tutorials.hp.picassoimagesrecyclerview.mData; import java.util.ArrayList; public class TVShowsCollection { public static ArrayList<TVShow> getTVShows() { ArrayList<TVShow> tvshows=new ArrayList<>(); TVShow tv=new TVShow(); //ADD DATA tv.setName("BlackList"); tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355636/red_s9jrzj.jpg"); tvshows.add(tv); tv=new TVShow(); tv.setName("Breaking Bad"); tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355582/breaking_wbxtzb.jpg"); tvshows.add(tv); tv=new TVShow(); tv.setName("Fruits"); tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355636/fruits_xapn76.jpg"); tvshows.add(tv); tv=new TVShow(); tv.setName("Crisis"); tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355640/crisis_m1btcv.jpg"); tvshows.add(tv); tv=new TVShow(); tv.setName("Ghost Rider"); tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355639/rider_ehhjol.jpg"); tvshows.add(tv); tv=new TVShow(); tv.setName("Game of Thrones"); tv.setUrl("http://res.cloudinary.com/oclemy/image/upload/v1460355638/thrones_noxbhq.jpg"); tvshows.add(tv); tv=new TVShow(); tv.setName("Shuttle Carrier"); tv.setUrl(" http://res.cloudinary.com/oclemy/image/upload/v1460355638/shuttle_carrier_nwvr5v.jpg"); tvshows.add(tv); return tvshows; } }
PicassoClient.java
- Contains a method that validates a URL before downloading an image into an imageview using Picasso.
package com.tutorials.hp.picassoimagesrecyclerview.mPicasso; import android.content.Context; import android.widget.ImageView; import com.squareup.picasso.Picasso; import com.tutorials.hp.picassoimagesrecyclerview.R; public class PicassoClient { public static void downloadImage(Context c,String url,ImageView img) { if(url != null && url.length()>0) { Picasso.with(c).load(url).placeholder(R.drawable.placeholder).into(img); }else { Picasso.with(c).load(R.drawable.placeholder).into(img); } } }#### MyHolder.java 1. Our recyclerView viewholder class. 2. Derives from RecyclerView.ViewHolder.
package com.tutorials.hp.picassoimagesrecyclerview.mRecycler; import android.support.v7.widget.RecyclerView; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import com.tutorials.hp.picassoimagesrecyclerview.R; public class MyHolder extends RecyclerView.ViewHolder { TextView nameTxt; ImageView img; public MyHolder(View itemView) { super(itemView); nameTxt= (TextView) itemView.findViewById(R.id.nameTxt); img= (ImageView) itemView.findViewById(R.id.movieImage); } }
#### MyAdapter.java 1. This class inherits from RecyclerView.Adapter class. 2. It adapts data to our views.
package com.tutorials.hp.picassoimagesrecyclerview.mRecycler; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.tutorials.hp.picassoimagesrecyclerview.R; import com.tutorials.hp.picassoimagesrecyclerview.mData.TVShow; import com.tutorials.hp.picassoimagesrecyclerview.mPicasso.PicassoClient; import java.util.ArrayList; public class MyAdapter extends RecyclerView.Adapter<MyHolder> { Context c; ArrayList<TVShow> tvShows; public MyAdapter(Context c, ArrayList<TVShow> tvShows) { this.c = c; this.tvShows = tvShows; } @Override public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) { View v= LayoutInflater.from(parent.getContext()).inflate(R.layout.model,parent,false); MyHolder holder=new MyHolder(v); return holder; } @Override public void onBindViewHolder(MyHolder holder, int position) { //BIND DATA holder.nameTxt.setText(tvShows.get(position).getName()); //IMAGE PicassoClient.downloadImage(c,tvShows.get(position).getUrl(),holder.img); } @Override public int getItemCount() { return tvShows.size(); } }
#### MainActivity.java 1. Derives from AppCompatActivity. 2. Sets our adapter to RecyclerView.
package com.tutorials.hp.picassoimagesrecyclerview; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.view.View; import android.view.Menu; import android.view.MenuItem; import com.tutorials.hp.picassoimagesrecyclerview.mData.TVShowsCollection; import com.tutorials.hp.picassoimagesrecyclerview.mRecycler.MyAdapter; public class MainActivity extends AppCompatActivity { RecyclerView rv; MyAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); rv= (RecyclerView) findViewById(R.id.rv); rv.setLayoutManager(new LinearLayoutManager(this)); adapter=new MyAdapter(this, TVShowsCollection.getTVShows()); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { rv.setAdapter(adapter); } }); } }
` #### Video/Demo Watch the video version of this example. #### How To Run 1. Download the project above. 2. You'll get a zipped file,extract it. 3. Open the Android Studio. 4. Now close, already open project 5. From the Menu bar click on File >New> Import Project 6. Now Choose a Destination Folder, from where you want to import project. 7. Choose an Android Project. 8. Now Click on “OK“. 9. Done, your done importing the project,now edit it.