Build Your Own Pokedex on Android with Algolia Instant Search

In the Pokemon universe, trainers carry a Pokedex that holds information about every Pokemon in their universe. Mobile phones are the perfect form factor for your own real life Pokedex. This tutorial will show you how to easily turn a database of Pokemon into a functioning Pokedex.

The Pokedex app is simple, it has a search bar and a list of Pokemon. When you type in the search bar, the app will filter the list of pokemon and only display those that match your search query. To accomplish this, we’ll use a hosted search API called Algolia.

Algolia is a hosted full-text, numerical, and faceted search engine capable of delivering real time results from the first keystroke. Algolia’s powerful API lets you quickly and seamlessly implement search within web and mobile applications.

The best part about building this app is that Algolia provides the search bar, filtering, indices, and backed for the app. All you’ll have to do is upload the database of Pokemon and wire everything together.

This tutorial uses Android Studio and Gradle Build Tool.

Upload a Database of Pokemon to Algolia

Before we can search our Pokemon, we need to get set up on Algolia and upload our database. Don’t worry, we have a sample Pokemon list in JSON format that you can use.

1. Create an Algolia Account

The very first thing to do is create an account on Algolia. This will allow us to upload our Pokemon database and provide you with an API for search. You can go to this signup link and create an account for free.

After sign up you will be asked to fill some details about you and choose a data center. You can select the one which is suggested by Algolia. When asked about the kind of project you are working on, select Android app.

Congratulations! You just created an Account on Algolia and ready to rock!

Now go to the dashboard and you will see a page where all the statistics are shown related to searches and API calls. This section will be empty as we have just created the account.

2. Create an Algolia Index

We have to open Indices section from right menu. This is the place where we will store our Pokemon data. Click on Create Index button and then give our index a name.

Let’s call it pokedex. Our pokedex doesn’t have any data. So it’s time to add data by clicking Upload records and selecting Upload file.

3. Upload Pokemon Data

We have a sample JSON file ready to be uploaded which can be downloaded from this github gist.

Download the file to your computer and then upload the file to Algolia. Once you are done with uploading the file the Algolia will read the data and index it for searching.

You can see that pokemon are listed along with their details and also there is a search bar where you can search for your favourite pokemon by their name and other properties.

Create the Android Pokedex App

The next step is to create an Android application where we will use Algolia to search and display our pokemon.

1. Set Up a New Project

In Android Studio, create a new Project:

• Give your application a name (I called it Pokedex).
• Select Target as Phone and Tablet
• Select Empty Activity on next screen where you are asked to add an activity.

Next step is to add Algolia library to our app. Open your app level `build.gradle` file and add the following dependency to it.

We have just added Instant Search library from Algolia which provides us few widgets to help in searching and displaying our data.

We will also need to access internet connectivity on our Android device hence it is essential for us to declare it in our code.

Open AndroidManifest.xml file and declare internet access permission by pasting following line just after <manifest> tag and before the <application> tag. You’ll also need to add “android:usesCleartextTraffic=”true” into the application tag in order to display the pokemon images.

2. Create the Pokemon Search Bar

We will be adding 2 widgets from this library which are

• SearchBox — where we type our queries
• Hits — This widget displays our search results in a flexible way.

Now open `res/layout/activity_main.xml` in file and paste the following code to it.

This code uses the search toolbar that Algolia provides as an easy way to search the Pokedex. The styles and functionality are provided by Algolia, so the search bar is pretty much taken care of. All you need to do is supply the search bar a way to display results.

3. Design an Interface to Display Pokemon Results

In the above code, you may have noticed the Hits widget that we have added has an attribute called `algolia:itemLayout=”@layout/hits_item”`. This tells Algolia what interface to use to display matching search results. Let’s write the code for this UI as well.

But before we move ahead we have to enable data binding in our project. Enable it in your app’s build.gradle by adding following code.

Now InstantSearch Android will automatically bind our search results to these Views using the Data Binding Library.

Now create a new “layout resource file” file called as `hits_item.xml` and paste following code into that file.

We can specify which View will hold each record’s attribute: add `algolia:attribute=’@{“foo”}’` on a View to bind it to the foo attribute of your data. For example to bind the pokemon name we are using `algolia:attribute=’@{“name”}’` . Similarly we have done binding for all other views.

We will also add `algolia:highlighted=”@{true}”` to name and next view which will help in highlighting the matching query when we search.

4. Wiring it all together

We have now a main activity layout containing a SearchBar, a Hits widget, and data-binding layout ready to display our pokemon. Now it’s time to hook it all together. The `MainActivity.java` will hold our code to import the Algolia libraries and initialize Algolia with your API keys to get everything started.

• Open your `MainActivity.java` and create a Searcher with your credentials:

• Initialize InstantSearch to link your Searcher to your Activity:
  InstantSearch helper = new InstantSearchHelper(this, searcher);
• As this will register your Activity’s widgets on the Searcher, you need to unregister them in onDestroy with Searcher#destroy to avoid any memory leaks in our application.

• Now your Activity is connected to Algolia through the Searcher, you can trigger a search using InstantSearch#search(String):

Our final code for `MainActivity.java` looks like this:

Build and run your application, you now have an InstantSearch Android app displaying our pokemon.

Now try to search for your favourite pokemon and you can see them at the top of list.

There you have it, your very own Pokedex! You can continue building this application out to be a full companion app to Pokemon Go, or even style it in the iconic red of the Pokedex in the Pokemon TV show.