Hello friends, today we will be learning about how we can use picasso android library developed by sqaure. Picasso one of the most popular library for android. It is very simple and powerful library for image downloading and caching.
There are also some alternative libraries like Volley. I already a published a tutorial about Using Android Volley Library to Load Image From Internet. In this post we will learn about picasso android library.
Why Picasso Android or Any other Android Library?
You might be thinking that why we should use a 3rd party library. You can achieve your task without using a 3rd party API as well. I have also posted a tutorial about downloading image without using 3rd party library. But if you will use the core method then it would take larger amount of code. But if we will use a 3rd party library like picasso then we will achieve our goal in few lines of code. So if we will not use a 3rd party library then we would need
- Very large amount of code to be written
- We have to write another logic to implement caching. Caching is very important to make the application faster.
- We also have to deal with memory while writing the code.
BUT if we will use picasso then all the above mentioned things would be taken care of by picasso.
Adding Picasso Library to our Android Project
Adding picasso android library to your project is very easy. You just need to add the following line in the dependency block of your build.gradle file. I am assuming that you are using Android Studio.
1 2 3 4 5 6 7 | dependencies { ... compile "com.squareup.picasso:picasso:2.4.0" ... } |
After adding it just sync your project.
Loading Image from URL by Using Picasso Android Library
Loading image from URL by using Picasso Android Library is very simple and easy. The first thing we would need is an ImageView. Unlike Volley’s NetworkImageView with Picasso we can use normal ImageView.
Code for Loading Image with Picasso
It is very simple. We have to use the Picasso class.
1 2 3 4 5 | Picasso.with(this) .load("YOUR IMAGE URL HERE") .into(imageView); |
Placeholder and Error Handling
Because we are loading the image from internet; the process would take some time depending on the internet speed. So it would be a good idea to display a image from the device while the image from URL is getting loaded.
One more situation could be when the image is not downloaded from the URL (when the URL given is wrong). In this case we should display an error image. Both these things can be done very easily by using picasso. See the following code snippet.
1 2 3 4 5 6 7 | Picasso.with(this) .load("YOUR IMAGE URL HERE") .placeholder(Your Drawable Resource) //this is optional the image to display while the url image is downloading .error(Your Drawable Resource) //this is also optional if some error has occurred in downloading the image this image would be displayed .into(imageView); |
Re-sizing and Rotating
We can also resize and rotate the image very easily.
1 2 3 4 5 6 7 8 9 | Picasso.with(this) .load("YOUR IMAGE URL HERE") .placeholder(DRAWABLE RESOURCE) // optional .error(DRAWABLE RESOURCE) // optional .resize(width, height) // optional .rotate(degree) // optional .into(imageView); |
Trying Picasso Android Library in Our Project
Now lets try the above codes in our Android Studio Project. So I will be creating a new Android Project.
- Open Android Studio and create a new project. I have created PicassoDemo.
- First we have to add the Picasso Library. So open your build.gradle and add the following line inside dependency block and sync your project.
1 2 3 | compile "com.squareup.picasso:picasso:2.4.0" |
- As we will load the image from a URL so we will also need internet permission. So open AndroidManifest.xml and add internet permission.
1 2 3 | <uses-permission android:name="android.permission.INTERNET"/> |
- We will create an ImageView now. So come inside activity_main.xml and write the following xml code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="net.simplifiedcoding.picassodemo.MainActivity"> <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> |
- Now come inside MainActivity.java and define your ImageView.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | public class MainActivity extends AppCompatActivity { //Declaring our ImageView private ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Initializing the ImageView imageView = (ImageView) findViewById(R.id.imageView); } } |
- We need two images one for placeholder and one for error. I will be using the following images. Just save these and paste inside the drawable folder of your project.
- Now we need a URL to an ImageFile. I have this URL
https://www.simplifiedcoding.net/wp-content/uploads/2015/10/advertise.png
- We will load the image from the above URL. Write the following code inside onCreate().
1 2 3 4 5 6 7 8 9 | //Loading Image from URL Picasso.with(this) .load("https://www.simplifiedcoding.net/wp-content/uploads/2015/10/advertise.png") .placeholder(R.drawable.placeholder) // optional .error(R.drawable.error) // optional .resize(400,400) // optional .into(imageView); |
- So the final code for our MainActivity.java would be.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | package net.simplifiedcoding.picassodemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.ImageView; import com.squareup.picasso.Picasso; public class MainActivity extends AppCompatActivity { //Declaring our ImageView private ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Initializing the ImageView imageView = (ImageView) findViewById(R.id.imageView); //Loading Image from URL Picasso.with(this) .load("https://www.simplifiedcoding.net/wp-content/uploads/2015/10/advertise.png") .placeholder(R.drawable.placeholder) // optional .error(R.drawable.error) // optional .resize(400,400) // optional .into(imageView); } } |
- Finally run your application.
- Bingo! Its working absolutely fine.
So thats all for this Picasso Android Tutorial friends. Feel free to ask if having any query regarding this Picasso Android tutorial. Thank You 🙂
Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.
Very useful posts.
Thank You 🙂 Keep visiting for more tutorials.
How can one use picasso to download images from a local remote server using a simple view pager?
very useful post
How can we download image using picasso and content inside textView using volley from server??And yes not inside listView.
ur tutorial is great belal ,please can u post the application about PUSH notification thank u,
Thank you that’s really helpful .
I’d like to ask you if I can use Picasso to upload picture from the gallery to my server?
Thank you.
Picasso is not for uploading images
Very useful goods. Keep going man!
Hi Bilal,
This is nasir ali, the work you are doing is so good i love that.
May i know, Can i download a bundle of images and display in list and how.
sir you can tell me best way to implement same navigation drawer to all activity .
http://stackoverflow.com/questions/21405958/how-to-display-navigation-drawer-in-all-activities
Try this link. I followed that and it worked well
Thank you so much…………….
Hi Belal Khan, Thank you so much
how i can get data with volley android and image with picasso.
I am facing java.lang.IllegalArgumentException: Target must not be null. exception
How can i set Image in My Custom ImageView using Picasso is it possible ?
Right now i am using https://github.com/Pkmmte/CircularImageView as a ImageView and load image in that like that
Picasso.with(mContext).load(path).into(target);
//Picasso.with(mContext).load(path).into(circle_avatar);
Target target = new Target() {
@Override
public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
circle_avatar.setImageBitmap(bitmap);
}
@Override
public void onBitmapFailed(Drawable errorDrawable) {
}
@Override
public void onPrepareLoad(Drawable placeHolderDrawable) {
}
};
why i am not able to set image in that CustomImageView
please help me.
Thanks.
I am getting error loading some images from Internet i have large images.
let take i have 6 image in that 4 loaded correctly 2 not loaded from server
how to resolve this problem
Hi
can we combine 2 photos,like a frame and a family photo together with picasso?
thanks
can you make a post on ” how to get gps co-ordinates using background service “
Hi, khan bhai nice tutorial thank you very much.
Can we use Picasso with offline image cache management,if you have any suggestion or links please help me
when i try to set image i got error image how i know which error is thare i print url and it’s proper if i copy url and past into browser image show but in application image not show error image come up
sir could you please tell me how to populate listview from internet
please help me i’m getting error that there is no compile method found in gradle……and it is saying apply plugin
IM getting error compile method not found …it asking for plugins
Hello, I got everything working thanks to you ! Much appreciated . However, when I tried retrieving images from my database of a bigger size. I am unable to show the images in gridview. Nothing is wrong with my codes when I used a resized and compressed image (Edited using Photoshop). Is there a way to retrieve my original (Without compression) Images ?
How i use this picasso inside Asynctask
Dear Belal I teach Android and I have found your tutorials most useful. My students are able pto use many features of Android thanks to your simple tutorials.
can you please show me how to put the images stored into firebase into image slider? please.
How if we will provide image url from database…?
how can i download image from mysql server using picasso???
plz help…. i searched a lot about this… and no one have this answer..
how can I do ” I need to drag an image and drop on another then if both matches then it should accept otherwise it shouldn’t.” how can i match that image with other ? I am using picasso for (Url’s for those images). I need to write for matching of those two Urls ……..
Sir, how can I retrieve Image and Text in ListView using Picasso Library?
when i am using picasso class like this
Picasso.with(this)
.load(“YOUR IMAGE URL HERE”)
.into(imageView);
The word “with ” get unresolved reference
how to remove this error