Android Flickr Search with pagination.

Flickr Search – Lets make a simple image search App using the Yahoo’s flickr API. Flickr provides an api to query for particular tag with multiple options and it returns results in multiple requested formats, we parse the result and put them in a GridView and one can tap the image to make it pop out to fullscreen. For this tutorial we are not going to deal with only few essential options of the search API.

Here is the final search URL:

“http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=[API_KEY]&tags=[tag]&per_page=20&page=[curPage]&format=json&nojsoncallback=1′;”

In the above URL we are mentioning that the items per page to be ’20′ using the ‘per_page’ property. So initially we load the first 20 items then on scroll to the end of the list we will then request for next ’20′ and so on.

Also Please refer:

http://www.flickr.com/services/api/flickr.photos.search.html

http://www.flickr.com/services/api/explore/flickr.photos.search

So now to build this URL we need API_KEY, tag and the page number(starts from 1). You can generate an API by applying through this link:

http://www.flickr.com/services/apps/create/apply/

Now we got our API key and the tag will be inputted by the user using an edit text and the current page is by default 1 and we increment it and query as we scroll down to the end of the list.

To make this tutorial simple, as i already covered GridView and pop out to fullscreen animation on click of the image in previous tutorials, here i will just cover the flickr api.

http://techiedreams.com/android-custom-gridview-scalable-auto-adjusting-col-width/

http://techiedreams.com/android-custom-grid-view-with-zoom-in-animation-effect/

The result returned by the API for a successful query will not contain any image url, but we can built one using the details provided in the ‘photo’ item:

“http://farm[farmId].staticflickr.com/[serverId]/[photoId]_[secretId]_m.jpg”;

Note: ‘_m’ at the end of the url is to get the medium sized image. Different sizes can be retrieved by chaining this value.

Check this URL for examples: http://www.flickr.com/services/api/misc.urls.html

First lets create an entity to hold each photo data:

import java.io.Serializable;

public class FlickrPhoto implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private String id, owner, secret, server, farm, title, ispublic;

	public String getFarmId() {
		return farm;
	}

	public void setFarm(String farm) {
		this.farm = farm;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getOwner() {
		return owner;
	}

	public void setOwner(String owner) {
		this.owner = owner;
	}

	public String getSecretId() {
		return secret;
	}

	public void setSecret(String secret) {
		this.secret = secret;
	}

	public String getServerId() {
		return server;
	}

	public void setServer(String server) {
		this.server = server;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getIspublic() {
		return ispublic;
	}

	public void setIspublic(String ispublic) {
		this.ispublic = ispublic;
	}

}

As i hope that you gone though my previous tutorial regarding the GridView and animated fullscreen effect, We now directly jump in to the Parser class. Here how it looks like:

import java.io.IOException;
import java.util.ArrayList;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.util.Log;
import com.td.flickrsearch.entity.FlickrPhoto;

public class FlickrParser {

	public static ArrayList<FlickrPhoto> getPhotos(String tag, int currentPage) {

		ArrayList<FlickrPhoto> photos = new ArrayList<FlickrPhoto>();

		ServerResponse sr = new ServerResponse();
		HttpClient client = new DefaultHttpClient();
		HttpResponse response = null;
		String finalResult = null;

		HttpGet httpGet = new HttpGet(Util.getSearchUrl(tag.replaceAll(" ", ""), currentPage));

		try {

			response = client.execute(httpGet);

			sr.setSuccess(false);
			sr.setErrorMessage(null);
			sr.setResponseString(null);

			Log.d("serverapi", "" + response.getStatusLine().getStatusCode());
			HttpEntity responseEntity = response.getEntity();

			if (responseEntity != null) {
				finalResult = EntityUtils.toString(responseEntity);
				Log.d("serverapi", "Response: " + finalResult);
				if (response.getStatusLine().getStatusCode() == 200) {
					sr.setSuccess(true);
					sr.setResponseString(finalResult);
				} else {
					sr.setErrorMessage(finalResult);
				}
			}
		} catch (ClientProtocolException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		try {

			if (sr.getResponseString() == null)
				return photos;

			JSONObject photosObj = new JSONObject(sr.getResponseString()).getJSONObject("photos");

			JSONArray jArray = photosObj.getJSONArray("photo");

			for (int i = 0; i < jArray.length(); i++) {

				JSONObject jObj = jArray.getJSONObject(i);

				FlickrPhoto photo = new FlickrPhoto();

				photo.setId(jObj.getString("id"));
				photo.setOwner(jObj.getString("owner"));
				photo.setServer(jObj.getString("server"));
				photo.setSecret(jObj.getString("secret"));
				photo.setFarm(jObj.getString("farm"));
				photo.setTitle(jObj.getString("title"));
				photo.setIspublic(jObj.getString("ispublic"));

				photos.add(photo);
			}
		} catch (JSONException e) {
			e.printStackTrace();
		}

		return photos;
	}

}

Note: Do not forget to add these permissions in the Manifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Here’s the final output of the application:

Image may be NSFW.
Clik here to view. td_flickersearch_1 Image may be NSFW.
Clik here to view. td_flickersearch_2 Image may be NSFW.
Clik here to view. td_flickersearch_3