entertainment

I Stimuli, your entertainment hub for movies, music and books.

Search The Movie Database and The Open Movie Database for movies and TV shows.

Watch movies on Amazon and Youtube.

Search Spotify for music. Play music on Spotify.

Buy books, music and movies on Amazon.

Android RecyclerView and Picasso tutorial

  • Written by  Clive

What a partnership! Picasso and RecyclerView

Android RecyclerView and Picasso tutorial icon

If you display images in lists or grids then you should consider using Picasso and RecyclerView.

Picasso is a powerful image downloading and caching library package which you include in your app build. It simplifies working with images, reducing the code that you need to use to one line of code.

Picasso is fast and easy to use and it’s FREE!

The RecyclerView widget is essentially a container that you can use to display large sets of data. It’s very efficient as it only displays a few items at a time. Views that are no longer needed are recycled and reused.

Not having to keep on inflating views saves CPU resources and valuable memory is saved by not having to keep views alive in the background.

Combine Picasso and RecyclerView and your app will move at the speed of light!

 

Here’s our Tutorial

Our tutorial app targets devices using API Level 10 and up.

We use the Picasso library to download a number of images. And then use a RecyclerView to display the images in a scrollable list.

Clicking on an image opens up a WebView where we display the downloaded article linked to the selected image. An indeterminate progressbar is displayed while the webpage loads.

Android RecyclerView and Picasso tutorial screenshot

Picasso takes care of processing the images while RecyclerView takes care of displaying them in a list. Clicking on an image opens up a WebView to display the article

Android RecyclerView and Picasso tutorial screenshot 2

Clicking on an image in the RecyclerView list, displays the article in a WebView

First things first

Get permission

You’ll need to include the permission to use the internet in your AndroidManifest.xml file.

Android RecyclerView and Picasso tutorial AndroidManifets.xml permission

Include permission to access the internet in your AndroidManifest.xml file

Where’s your library card?

You also need to include the:

  • Picasso library which will take care of downloading and processing our images
  • AppCompat support library because we’re using the AppCompat.Light theme
  • RecyclerView support library so that we can use the RecyclerView in our app which targets devices running API Level 10 and above

Check your dependencies in your build.gradle file:

Android RecyclerView and Picasso tutorial build.gradle

Open up your build.gradle file and include the required dependencies

You should have these dependencies:

Android RecyclerView and Picasso tutorial build.gradle dependencies

Include the library dependencies in the gradle build file

You can simply type in the entries as shown above and then press the Sync Now link (top-right of the editor window) to sink the project after you’ve included the dependencies.

There’s another way to include the libraries: have a look at how we included the OkHttp library in the tutorial Android cloud connections using the OkHttp library

Kick off with the Main activity

The main activity starts when the app starts.

Setting it all up in onCreate()

We do all our preparation in the activity’s onCreate() method.

Here’s the code:

Android RecyclerView and Picasso tutorial onCreate()

All our preparation work is done in the main activity’s onCreate() method

A quick explanation

We define an on click listener, MyOnClickListener as an inner class in the MainActivity activity. It implements the View.OnClickListener class. We’ll use our listener to monitor when the user clicks on an image. We'll attach the listener to the image when we create the view holder.

Next we get a reference to our RecyclerView which we defined in the activity_main.xml file. Then we set the recyclerView’s setHasFixedSize() method to true. This increases performance because the recycler view will know in advance that it can’t change the size of the recycler view, even if the size of the adapter changes.

We want to display the downloaded images in a vertical scrollable list so we use a LinearLayoutManager to manage the positioning of the items in the list as well as the recycling of the views.

The image and article Urls are stored in a two-dimensional string array, articles in the MyArticleData class. The AnArticle class has a single constructor which we use to create a single article object containing the image and article Urls. Calling the getArticleData() method returns an ArrayList containing all of the image and article Urls.

Finally we construct an instance of our custom adapter and attach it to our RecyclerView.

Take your pick!

Clicking an image triggers our on click listener’s onClick() method:

Android RecyclerView and Picasso tutorial onClick()

Clicking an image starts a WebView where we display the selected article

A quick explanation

Here we call getSelectedArticleUrl() to get the Url for the article linked to the selected image:

Android RecyclerView and Picasso tutorial getChildPosition()

Use the selected image’s position as an index to get the article’s Url

A quick explanation

getChildPosition() returns the position of the selected image in the adapter. We use it as the array index to get the matching article’s Url.

We then pass this Url on to the showSelectedArticle() method:

Android RecyclerView and Picasso tutorial startActivity(intent)

Pass the selected article’s Url on to the WebView which will download and display the article

A quick explanation

We create an intent, putting the article’s Url into it and then call startActivity() to start the WebActivity activity which downloads and displays the article. We’ll discuss this later.

Define the RecyclerView widget in an XML layout file

The RecyclerView widget is like a ListView. It displays a scrollable list of items, which in this case, are downloaded images.

We define our RecyclerView widget in the main activity’s layout file, activity_main.xml:

Android RecyclerView and Picasso tutorial android.support.v7.widget.RecyclerView

The RecyclerView will display the downloaded images in a vertical scrollable list

Note that we’re using the support library’s RecyclerView widget. We want the RecyclerView to fill the screen so we set its width and height attributes to match_parent.

It all happens in the Adapter

The adapter provides access to our data. It also provides the views for the displayed items. We create our custom recycler adapter by extending the RecyclerView.Adapter class.

There are three methods that you must implement:

  • onCreateViewHolder() – creates a new ViewHolder containing our image
  • onBindViewHolder() – displays our image at the specified position in the list
  • getItemCount() – gets the number of items in the adapter

Creating the ViewHolder

Android RecyclerView and Picasso tutorial android.support.v7.widget.RecyclerView onCreateViewHolder()

onCreateViewHolder() creates a ViewHolder by inflating the ImageView into the parent RecyclerView

A quick explanation

onCreateViewHolder() is called each time the RecyclerView needs a new view holder to display an image. This is called initially to create a number of view holders which are then recycled (so onCreateViewHolder() won’t be called again).

We inflate our row_layout containing the ImageView into the parent RecyclerView and return a new MyViewHolder object, holder.

Our RecyclerView.ViewHolder class

Our custom ViewHolder class contains an ImageView to which we attach an on click listener to listen for when the user clicks an image. The ViewHolder also contains information about its place within the parent RecyclerView.

Using a ViewHolder speeds things up as we don’t have to find the image view and attach a listener to it each time we need to display an image. We simply reuse the ViewHolder.

Android RecyclerView and Picasso tutorial viewHolder()

Our ViewHolder contains a single ImageView

Binding the ViewHolder

onBindViewHolder() is called by the RecyclerView to display an image at a specified position.

Android RecyclerView and Picasso tutorial onBindViewHolder()

onBindViewHolder() is called to display an image in the RecyclerView list

A quick explanation

When this method is called, it receives two parameters:

  • the ViewHolder that needs to be updated to display the given image
  • the position of the item (image) in the adapter’s data set

We get the Url for the image that we want to display by using the position parameter (i) as an index to the list containing all of the Urls.

Next we get the context of the ImageView and then call on Picasso to download, process, cache and display the image.

We need to pass Picasso three parameters:

  • the context of the ImageView
  • the Uri for the image that we want to download
  • the ImageView where we want to display the image

Picasso will cache the images on first downloading them. On subsequent downloads, it will first check to see if the image is in the cache before trying to download it.

The web view

Clicking on an image starts the WebActivity and passes it the Url for the article that we want to download.

Here’s the code contained in the onCreate() method:

Android RecyclerView and Picasso tutorial WebView

The WebView downloads and displays the selected article

A quick explanation

We create a new WebView but don’t display it.

Calling setContentView() and passing the progressbar layout as a parameter, displays the indeterminate progressbar while the article is downloaded.

Next we get the Url string for the article which was passed in the intent that started the WebActivity. Then we call loadUrl() to load the article into the WebView.

Calling setWebViewClient() will ensure that onPageFinished() will be called when the article has finished loading into the WebView. We can then set the WebView as the displayed content, replacing the progressbar.

You may be interested in looking at our other Picasso tutorials:

And here’s one on the RecyclerView, Android’s RecyclerView and CardView widgets

I hope that you have found this tutorial helpful.

This project was created using Android Studio.

You can download the project files here Download icon

Want to learn how to harness the power of third-party Api’s like Twitter, Youtube, Flickr, Imgur and thousands more? You can build the functionality of these apps directly into your apps, accessing their data, making your apps leap ahead of the competition.

We’ve prepared a tutorial app that uses Imgur’s  (an image repository) api’s to search its database, retrieve some images and display them in a RecyclerView.api's, OkHttp, Http, Picasso, RecyclerView, ebook

We also briefly introduce you to Http, OkHttp, Api’s, Json and Picasso making it easy to understand as we work through the tutorial.

Check out our eBook package, Let your apps take a giant leap.