Since Giphy has opened the doors to their massive GIF archive via their public API, I thought it would be fun to explore this a bit.

First, I took a look at the documentation. In order to fetch any GIFs, you'll need to perform a search query through their search endpoint, which would look something like:

http://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC

This will require a few parameters, including a search query like "funny+cat" and an API Key (a full list of parameters is provided here). A beta key is provided in the docs for testing and a personalized API Key will need to be requested through Giphy. Giphy provides various endpoints including a specific Search, Trending GIFs, Random, By ID, etc. These endpoints will return JSON data that can be used for displaying your GIF.

Now that I knew I'd be working with JSON data that will provide me with a URL for a GIF, I could think about how I would display that animated GIF on Android. While doing some research into GIF integration with Android, I found that Android and GIFs have not always been good friends. I turned to a few third-party image loaders to display the GIF and decided on Glide. Taking a look at Glide, it seemed pretty similar to Picasso, but supported GIFs and it gave me an excuse to test out their library.

I decided to work with the Random API Endpoint (example), which simply requires a search parameter (tag=...) and returns the JSON data for a random GIF. The JSON data returns specific information regarding the one random GIF that was queried, including fixed_width data, fixed_height data, original image_url data, etc. I'm interested in the image_url piece of data, which will provide me with the direct URL for the GIF (note: the url key will provide you with the link to the Giphy site itself, which is not wanted here).

Now that I've figured out where I would get the necessary data from, I decided to start coding. The first thing I did was setup an HTTP call to the Random API Endpoint I'll be using:

http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cute

I used OkHttp to setup the request. You can see the code for this on GitHub here.

I then crated a method that accepts the JSON data from the response I just made and target the bits of data I'm interested in (data: image_url: ...). The method then returns the URL for the Random GIF:

    private GiphyGifData getGif(String jsonData) throws JSONException {
        JSONObject giphy = new JSONObject(jsonData);
        JSONObject data = giphy.getJSONObject("data");

        GiphyGifData gif = new GiphyGifData();
        gif.setUrl(data.getString("image_url"));

        return gif;
    }

Now that I have the GIF URL, I can update the UI using Glide. Glide is useful here because it not only supports animated GIFs in an ImageView, but also provides support for caching the image, loading in a lower resolution placeholder (until the full image has loaded), cropping the image, etc. You can find more details for configuring your setup here.

    private void updateDisplay() {
        String gifUrl = giphyGifData.getUrl();

        Glide.with(MainActivity.this)
                .load(gifUrl)
                .thumbnail(0.1f)
                .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                .centerCrop()
                .into(new GlideDrawableImageViewTarget(imageView) {
                    @Override
                    public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> animation) {
                        super.onResourceReady(resource, animation);
                        //check isRefreshing
                    }
                });
    }

From the method above, you can see that I did an Override on the onResourceReady method. I thought this would be useful to note in case you're interested in adding a loading progress bar. The onResourceReady method is called when the resource load has finished, which indicates you can disable your progress bar.

Feel free to checkout this simple example app on GitHub here.

As well as a weather app I made for fun w/Giphy integration in Google Play.

Update: Feb. 2, 2016

I've added another branch, which will pull a "trending" gif from Giphy here. This example is a little more complex as the returned JSON data from Giphy's trending endpoint contains a JSONArray with various JSONObjects. Here's the endpoint below:

http://api.giphy.com/v1/gifs/trending?api_key=dc6zaTOxFJmzC

Exploring the Giphy API in Android