In this demo, we will look at how to create a simple GIF search app. We will have our GIFs be searchable in three different ways:
- Tags: A display of terms with a GIF preview background. When clicked, a search for the tag's term will occur.
- Search Box: Searches performed by entering a search term on the EditText.
- Related Suggestions: Similar to Tags, these are displayed search terms that when clicked on will open a new search. In the demo they appear as related terms to the search, and display above the GIFs in a horizontal scroller.
In order to use our API, you must have the tenor-android-core as part of your app. Download the Tenor Android Core here.
This demo uses the MVP framework. To read more about the MVP architectural pattern, click here.
Note, that MVP is not required for using our API. It can work in any view structure, this demo just shows one example of how it can be used.
When you first open the demo, you will be in the MainActivity. In order to get our list of tags, we will use a presenter class, MainPresenter, to make the necessary API call.
Once the API call has been constructed, we need to have its results returned, and then displayed. In our example, IMainView provides us with callbacks necessary to return the API response to our activity.
To see a detailed look of the Tag response JSON object, click here.
Once you have your response, we will need to load the tags into our view. We recommend having a TextView layered on top of an ImageView, as seen in the TagItemVH. The GIF preview background will be loaded via the GlideTaskParams.
The demo displays the TagItemVH through the TagsAdapter. When the TagItemVH is clicked, a tag will open a SearchActivity, passing the tag name through SearchActivity.KEY_QUERY.
Using the EditText inside our MainActivity, we open the SearchActivity with EditorInfo.IME_ACTION_SEARCH. Like tags, the query is passed to SearchActivity via SearchActivity.KEY_QUERY.
Once the activity has loaded, search calls are performed through the search presenter class, GifSearchPresenter. Callbacks are made through IGifSearchView.
To see a detailed look of the Gif response JSON object, click here.
Like Tags, we will load the results returned through the API response into ImageViews, as seen in the GifSearchItemVH.
They will also be loaded using the GlideTaskParams.
The demo displays the GifSearchItemVH through the GifSearchAdapter. For the demo, no full click functionality has been added. How you wish to handle click events with GIFs is up to you.
An additional feature the demo uses in SearchActivity is to take the search query from SearchActivity.KEY_QUERY and call the getSearchSuggestionsEndpoint() in the SearchSuggestionPresenter. It returns a search suggestion response (see here) and is displayed in the SearchSuggestionAdapter.
The adapter, and its view holder SearchSuggestionVH are displayed as the top level element of the GifSearchAdapter. Clicking them will open a new instance of SearchActivity.
Suggestions are a useful tool in the Tenor API to refine searches. We recommend using them for a more full GIF search experience.
