Picasso Tutorial for Android: Getting Started

Picasso is one of the most popular image caching and networking libraries for Android. It is supported by a trusted source, Square, and has several other advantages including an easy to use syntax, a ton of online resources to help you learn and several utilities like image transformations, filters and more!

In this Picasso tutorial, you will learn how to use Picasso by creating an amazing app that displays a list of popular movies from the TMDB catalog. Along the way, you’ll learn:

• How to load images from different sources.
• The difference between disk and memory caching.
• How to apply filters and transformations.
• How to set placeholders and indicators to debug your app.

Are you ready to watch some great movies? Well, grab some popcorn and let’s code!

Getting Started

In this Picasso tutorial, you will build an app called Color Movies. This app will allow you to retrieve a list of the most-popular and highest-rated movies from the TMDB API and show it in a nice grid with poster images.

Just like most public APIs, you’ll need to get an API key from TMDB to be able to make HTTP requests to it. Fortunately, getting an API key is as easy as going to https://www.themoviedb.org/settings/api and signing up using your email address and a password. Go to that URL now and log in or create an account.

Once you have your account, go to Settings ‣ API and generate an API key under the Request an API Key section. Select Developer as the type of API key, then accept the terms of use. You’ll see a form to fill out details about your application. Fill in the form with details about the app and your contact information.

Once you’ve successfully submitted the form, you can access the API Key in the same settings menu under API Key (v3 auth). Hold on to this key so you can use it in your app!

Setting Up the App

Now, download the starter project using the Download Materials button. You can find the button at the top or bottom of this tutorial. Then, open the project in Android Studio 3.3 or later by going to File ▸ Open and selecting the build.gradle file in the root package.

Once the starter project finishes loading and building, create a new file under the root directory of your app and name it keystore.properties. Your project structure should now look like this:

Inside keystore.properties add the following constant and replace everything inside the double quotes with the API key you got before:

TMDB_API_KEY="YOUR API KEY HERE"

Now sync you project with the gradle files, build and run your app to see it in action:

Sweet!

Right now it is just an empty canvas but with the power of Picasso that’s about to change. : ]

To start using Picasso, you first need to add its dependency. Open your app-level build.gradle file and add the following line to the dependencies block:

//Picasso	 	 
def picassoVersion = "2.71828"	 	 
implementation "com.squareup.picasso:picasso:$picassoVersion"	 	 

Press Sync Now and wait until Android Studio finishes syncing your project.

Basic Usage

The first thing you need to learn is how to load images using Picasso. You will see that the process is extremely easy thanks to Picasso’s syntax.

Loading Images Using Picasso

The main screen of your app is using a RecyclerView to display a series of images on a grid so you will be primarily working on its adapter.

Open MovieAdapter.kt under the ui package and add the following code inside the bind() method of the ViewHolder inner class:

val picasso = Picasso.get()

Picasso.get() is a method that initializes and retrieves a global instance of Picasso with default configurations suitable for most projects.

Now, add the following code to the bottom of that same method:

picasso.load(RetrofitClient.TMDB_IMAGEURL + movie.posterPath)	 	 
  .into(posterImageView)	 	 

load() is probably Picasso’s most important method since it helps you load images from different sources using two different overrides:

• load(uri: Uri?) starts an image request using the specified URI and has many convenience methods such as load(path: String?) that allows you to create the URI from the specified path. Passing a null reference as a parameter will not trigger any request but will display a placeholder image if you have specified one.
• load(resourceId: Int) will load an image from the drawable resource ID passed as a parameter.

into() will asynchronously insert the image into the specified ImageView once the request from load() returns a response.

Loading the Movies

Open MainActivity.kt and add the following code inside onCreate():

// 1
MovieInteractor().getPopularMovies().observe(this, Observer {movieList ->
  // 2
  if (movieList != null) {
    // 3
    val adapter = MovieAdapter(movieList, windowManager) { movie ->
      // 4
      startActivity(
        Intent(this@MainActivity, MovieDetailActivity::class.java)
          .putExtra(TITLE, movie?.title)
          .putExtra(SUMMARY, movie?.overview)
          .putExtra(POSTER, movie?.posterPath)
          .putExtra(RELEASE_DATE, movie?.releaseDate)
          .putExtra(RATING, movie?.popularity)
      )
    }
    // 5
    movieRecyclerView.adapter = adapter//5
  } else {
    // 6
    longToast("No movies")//6
  }
})	 	 

Use Alt + Enter on PC or Option + Return on a Mac to import any missing dependencies, using the androidx.lifecycle.Observer option for Observer.

In the above code call you call getPopularMovies() from the MovieInteractor class to retrieve a list of movies from the TMDB API using Retrofit. Then, you create a new MovieAdapter using list of movies and attach it to your RecyclerView. Here is a step by step explanation:

1. Call the getPopularMovies() method of your MovieInteractor class. This method uses Retrofit to return a list of movies from the TMDB catalog. Since getPopularMovies() returns a LiveData object, you are using observe() to attach an Observer to this list and react to it as soon as there is a response.
2. When you get a response from the TMDB API, your LiveData object will contain either a list of movies or a null reference. If movieList is not null, it means you got a successful response and you can use that list to create a new adapter for your RecyclerView.
3. Create a new MovieAdapter using the list of movies you just received.
4. Here you are saying what is going to happen when the user taps on one of the images in your RecyclerView. Essentially, you are going to start a new MovieDetailActivity, passing an Intent with extras that contain details of the movie selected such as the title, summary, poster, release date and rating.
5. Attache the adapter you just created to your RecyclerView.
6. Display a toast with a No Movies message if the response comes back null.

Build and run your App to see it in action:

The list of movies you receive might be different from the one in the screenshot above, but you now know Picasso is properly loading and inserting poster images into your RecyclerView. Awesome!