In this tutorial, we’re going to create a simple Instagram feed on Android using their API, Retrofit for handling the REST API and Picasso for placing pictures into ImageViews. The whole project can be found on my GitHub account.

Before starting to write code, we need to have an Instagram developer account and register an application. For test purposes, in the Valid redirect, URIs just write https://www.instagram.com. The only limitation of this tutorial is that if your application is not accepted by Instagram, you can only work in the Sandbox mode, which limits the number of requests and the tag search area to your profile, so be aware and use tags which are in your posted photos (maybe add some tags to all of your photos to have some data later).

There are 2 methods for getting the access token: Server-side and Client-side. For the sake of simplicity and because we only have the client app we are going to use the Client-side. It’s highly recommended to use the Server-side because it’s more secure and it’s not a good idea to write your “Client Secret” on the public app. The documentation is fairly short and full of details so if you have a question, it’s the best place to search for an answer.

We’re going to have 2 activities, one for login and getting the access token, and one for the actual feed. As you will see, the first one can be placed in a Loading screen or something like that, but to see what are the steps of getting the access token, I made a simple activity with a button.

This is how I structured the Android packages and classes:

main_activity.xml

activity_feed.xml

auth_dialog.xml

feed_list_view_item.xml

Flow

The flow of the app will start with a view containing a button. If you press this button a WebView dialog will pop-up, asking for a login or to authorize the app. The WebView URL is constructed in such way to get the Access Token in the fragment of the URL if you authorize the app. After getting the Access Token, we replace the Main Activity with the Feed Activity. The latest one will be empty and you can see a search bar. We search posts after TAGs. You can change the endpoint to point to media based on location or so on and the concept is the same.

Constants

The constants for this application are here.

Data Model for JSON Response

The response contains a pagination field, which we won’t touch in this tutorials and an array of data. In order to map this response, we will create an InstagramResponse class which contains an array of Data.

To keep the simplicity of the tutorial we put all the necessary fields in one class, following the tree structure of the response.

Main Activity and Authorization

The MainActivity implements AuthenticationListener, so when you get the access_token, you can change the currently active activity and pass the token to the next one with the IntentExtra.

Authentication Dialog

In the authentication dialog, we create the custom URL based on ClientID and RedirectURI in order to get the access token. If the redirect URL contains “#access_token=”

we know that the request is successful and we can get the access token from the fragment with the getEncodedFragment() and substring(access_token.lastIndexOf(“=”)+1). After that, we tell the listener that we get the code and the method in the MainActivity will handle the activity switching.

Retrofit and REST API for the endpoints

For the REST Client, we just create the Retrofit object using the BASE_URL and then we create the routes for the endpoints in the RetrofitService class.

We only have one route for this example, for searching posts by TAGs. For this route, we need the tag_name for tags and access_token, which is necessary for every request.

A standard URL request for search is https://api.instagram.com/v1/tags/{tag-name}/media/recent?access_token=ACCESS-TOKEN

Feed Activity

The Feed Activity is pretty simple, we only have an EditText for the search field and a ListView with a custom adapter. Firstly we get the access_token from the IntentExtra for our requests. We set our custom adapter and add a listener for the done button on the soft keyboard. the fetchData method requires an argument which is the TAG to be searched. In the method, we get the Retrofit service and make a request on the getTagPhotos route with the requested TAG and the access_token we got from the intent.  If the response is not null, we get the JSON data, mapped by out models following their standard JSON response. After that, we clear the data array and update it with the new data we just received and notify the adapter that we changed the data.

ListView Adapter

This is a simple ArrayAdapter, which uses the feed_list_view_item layout. It contains one TextView and 2 ImageViews. We get the User full name, the profile picture and the actual photo of the post. In order to add more data from a post, the concept is the same. The feed will look something like this. We use the Picasso plugin to insert and resize the images into the views.

Conclusion

The full source code can be found on my GitHub account.

The finished app looks something like this:

This is a very simple app example to demonstrate the Instagram API using Retrofit and Picasso. I will write a Python API tutorial to show you how you can make your own REST API for any basic feed application.

Please leave a comment if you found a mistake or if you have a suggestion about this tutorial or to recommend another one.

(Please note that this article was posted on June 26, 2017 on the old host)