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.
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
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.
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:
Open up your build.gradle file and include the required dependencies
You should have these 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:
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:
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:
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:
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:
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
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.
Our ViewHolder contains a single ImageView
Binding the ViewHolder
onBindViewHolder() is called by the RecyclerView to display an image at a specified position.
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:
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 .
You can download the project files here 
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.
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.