Implementing Rick & Morty GraphQL API in Android — Part 2

In Part 1, we set up the GraphQL client and made a query to retrieve the data from the API. In this tutorial, we’ll continue building on that foundation and implement the UI for our Android application.

Step 6: Display data in the UI

To display the data retrieved from the API in the UI, we’ll create an adapter to bind the data. In MainActivity, we’ll create a new class “CharacterAdapter” that extends RecyclerView.Adapter. In the onBindViewHolder method, we’ll set the values of each character to the corresponding views in our layout.

Here’s the code for the CharacterAdapter class:

class CharacterAdapter(private val characters: List<CharactersQuery.Character>) : RecyclerView.Adapter<CharacterAdapter.ViewHolder>() {
  
  class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val nameTextView = itemView.findViewById<TextView>(R.id.nameTextView)
    val speciesTextView = itemView.findViewById<TextView>(R.id.speciesTextView)
    val statusTextView = itemView.findViewById<TextView>(R.id.statusTextView)
  }
  
  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val view = LayoutInflater.from(parent.context).inflate(R.layout.character_item, parent, false)
    return ViewHolder(view)
  }
  
  override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val character = characters[position]
    holder.nameTextView.text = character.name()
    holder.speciesTextView.text = character.species()
    holder.statusTextView.text = character.status()
  }
  
  override fun getItemCount(): Int {
    return characters.size
  }
}

Finally, we will set the adapter to the RecyclerView in our MainActivity. We can also add a ProgressBar to show a loading indicator while the data is being fetched.

private fun setUpRecyclerView(characters: List<CharactersQuery.Character>) {
        recyclerView.adapter = CharacterAdapter(characters)
        recyclerView.layoutManager = LinearLayoutManager(this)
        progressBar.visibility = View.GONE
}

Step 7: Error handling

It is important to handle errors when making API calls. To do this, we can add error handling to the execute method in our repository class. In the case of an error, we can show a Toast message or a Snackbar with an error message.

private fun handleError(throwable: Throwable) {
    progressBar.visibility = View.GONE
    Snackbar.make(recyclerView, "Error: ${throwable.message}", Snackbar.LENGTH_LONG).show()
}

And that’s it! You now have a basic Android application that utilizes a GraphQL API to retrieve data about the popular animated series, Rick and Morty. This tutorial covers the basics of setting up a GraphQL client, creating a query, and displaying data in the UI. There’s a lot more to learn about GraphQL, so feel free to experiment and explore on your own.

Feel free to checkout this simple implementation using jetpack compose:

• malcolmmaima/Rick — -Morty-GraphQL: A simple graphql implementation using rickandmorty api (github.com)