Tuesday, 6 November 2018

Picasso Android Tutorial – Android Picasso Image Loader Library

Hello programmers, today we will be learning about picasso library for image downloading developed by sqaure.
  • Picasso one of the most popular library for image downloading.
  • It makes our wok very simple so its powerful library for image downloading.
  • It uses caching technique.
  • I have already published a post on Glide(similar to picasso) Image Downloading library for android.


Why Picasso library?

Its obvious that you will think why we should use picasso library.
If we use the traditional method of downloading the image from a url then we need to manage a lots of thing.
 And of course lines of code and development time will also increase.
 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
  1. Very large amount of code to be written
  2. We have to write another logic to implement caching.
  3. Caching is very important to make the application faster.
  4. We also have to deal with memory while writing the code.
  5. If any error occurs we need to handle that also.
  6. we will not focusing more on the application feature that is going to be developed. 
So, picasso will handle these all by default and overcome these all problems.

Adding Picasso Library to our Android Project

Adding picasso android library to your project is very easy.
Add the following line in the dependency block of your build.gradle file(app /module level).
I am assuming that you are using Android Studio.
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

Code for Loading Image with Picasso

It is very simple. We have to use the Picasso class.

 Picasso.get()  
 .load(IMAGE_URL)  
 .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.

  Picasso.get()
   .load("YOUR IMAGE URL HERE")  
   .placeholder(Your Drawable Resource) // 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.


 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);  


Using 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 PicassoExample. 
  • First we have to add the Picasso Library. 
  • So open your build.gradle(app level) and add the following line inside dependency block and sync your project.
  • As we will load the image from a URL so we will also need internet permission. 
  • So open AndroidManifest.xml and add internet permission.
 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:orientation="vertical"  
   android:layout_height="match_parent"  
   tools:context=".MainActivity">  
   <ImageView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_centerInParent="true"  
     android:src="@mipmap/ic_launcher_round"  
     android:id="@+id/imageView"  
     />  
   <Button  
     android:layout_width="match_parent"  
     android:id="@+id/btn"  
     android:layout_below="@+id/imageView"  
     android:layout_centerHorizontal="true"  
     android:text="show image"  
     android:layout_margin="10dp"  
     android:layout_height="wrap_content" />  
 </RelativeLayout>  


  • Now come inside MainActivity.java and define your ImageView and a button.

MainActivity.java 

 package protector.video.com.picasoexample;  
 import android.os.Bundle;  
 import android.support.v7.app.AppCompatActivity;  
 import android.view.View;  
 import android.widget.Button;  
 import android.widget.ImageView;  
 import com.squareup.picasso.Picasso;  
 public class MainActivity extends AppCompatActivity {  
   private ImageView imageView;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     Button btn=findViewById(R.id.btn);  
     imageView=findViewById(R.id.imageView);  
     //setting click listener to the button
     btn.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         Picasso.get()  
             .load("https://avatars0.githubusercontent.com/u/1?v=4")  
             .placeholder(R.drawable.ic_image_black_24dp) // optional the image to display while the url image is downloading  
             .error(R.drawable.ic_error_black_24dp) //this is also optional if some error has occurred in downloading the image                 //this image would be displayed  
             .into(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://avatars0.githubusercontent.com/u/1?v=4


Finally run your application. 
Picasso Android 
Happy coding......
Thank You

1 comment:

WhatsApp will give Rs 1.8 crores to new Indian startups, Here is all you need to know

The "Startup India WhatsApp Grand Challenge" has been appraise growth in the entrepreneurial sector. Total prize money of Rs 1.8...