All CategoriesAndroid App Development

How to Display Images with the Picasso Library

Picasso is one of the Image Downloading Library in Android which is given by Square. We can use it for downloading the image using URL.
It has several advantages like:

⦁ Less amount of code is used.
⦁ Caching is faster.
⦁ Takes care of Memory.

The alternatives of this library are Volley and Universal Image Loader.
Before starting this application we have to download this library from the official website and add it inside our project.

Example with code: Here in this example we will parse the JSON and download the images using URL and show it in GridView.
Let’s see how we will do it.

⦁ Create an Application PicassoExampleAndroid.
⦁ Add the library to our project.

Requirements:
MainActivity.java, GridItem.java, GridViewAdapter.java, activity_main.xml, grid_item_layout.xml.
activity_main.xml:
Add the Code in this xml file.

<GridView
android:id="@+id/gridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:columnWidth="100dp"
android:drawSelectorOnTop="true"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp"
android:focusable="true"
/>

Here, we add GridView element inside RelativeLayout to show the images.
GridItem.java:
Create this model class.
Add the code here,

private String image;
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}

Grid_item_layout.xml:
Create this XML file for the item layout to set the property of the image.
Add the code here,

<ImageView
android:id="@+id/iv_Grid"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop" />

Here, we will show only an image in GridView.

GridViewAdapter.java:

Create the custom adapter class to inflate the view and load the image.
Add the code in getView(){..} method:
Here we will inflate the layout and load the image with its properties.

LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);
holder = new ViewHolder();
holder.imageView = (ImageView) row.findViewById(R.id.iv_Grid);
GridItem item = mGridData.get(position);

We can also put the URL inside load() method.
Picasso.with(mContext).load(item.getImage()).placeholder(R.drawable.placeholder).error(R.drawable.error).into(holder.imageView);

This is the process of image downloading. With few lines of code, we can also set placeholder and error while downloading the image.

Placeholder is used to display an image, while the download is running when the internet speed is slow.

The error is used if the image will not get downloaded due to some problems. It will show an error image.

MainActivity.java:

Here, we will take the reference of GridView, set the adapter, and parse the JSON.
Initialize:

private static final String TAG = MainActivity.class.getSimpleName();
private GridView mGridView;
private GridViewAdapter mGridAdapter;
private ArrayList<GridItem> mGridData;
private String FEED_URL = "http://api.themoviedb.org/3/movie/157336/images?api_key=8496be0b2149805afa458ab8ec27560c";
Add the code in onCreate(){..}
mGridView = (GridView) findViewById(R.id.gridView);
mGridData = new ArrayList<>();
mGridAdapter = new GridViewAdapter(this, R.layout.grid_item_layout, mGridData);
mGridView.setAdapter(mGridAdapter);
new AsyncHttpTask().execute(FEED_URL);
Here we will execute the task with the help of URL in background and after parsing update the UI.
Add the code of JSON parsing:
JSONObject response = new JSONObject(result);
JSONArray array = response.getJSONArray("backdrops");
GridItem item;
for (int i = 0; i < array.length(); i++) {
JSONObject imageobject = array.getJSONObject(i);
String image_url = imageobject.getString("file_path");
item = new GridItem();
item.setImage("http://image.tmdb.org/t/p/w500"+image_url);
mGridData.add(item);
After this update the UI in onPostExecute() method
mGridAdapter.setGridData(mGridData);

Add Permission in AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET" />

Conclusion:

This is a simple example of how to download and cache an image with the help of Picasso Library. It is a very powerful library and saves much time while writing code for image download.

We can create lots of applications using this library. It is very frequently used in many real-time applications making it an integral component of Android development. We can customize it in our own way for our application.

Download Code: GitHub

Output:


We hope this blog section helped you understanding Picasso in Android. Keep visiting www.acadgild.com for more updates on the courses.

Android Programming

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close