Picasso library: Loading Image from URL (HTTP)

9:06 AM 0 Comments

ImageView is used to display an image, such as an icon. It can load images from various sources such as resources folders or content providers. But, how to load image from URL? Just by adding URL to ImageView won’t load directly. First we need to store the image in temporary location then we can attach to Imageview. So, we should load images from the Web in an application, their processing and displaying with the limited memory. Images come in all shapes and sizes. In many cases they are larger than required for a typical application user interface. We should decode large bitmaps without exceeding the per application memory. It is necessary to ensure working with the memory to prevent OutOfMemoryError . It is a time consuming process to specific needs. So what is the best and easiest way to do this..To solve all the pain, Jake Wharton(Author of ActionBarSherlock) has actually created an open source library named "Picasso" for image downloading and caching on Android-often in only one line of code!

Download Picasso library

Steps loading image from URL:

1. Create a new project in Eclipse and add Picasso library to the pjoject. (help to add library)

2. Inorder to load images from a url we first need to add required permission to
AndroidManifest.xml file.

To access internet required permission is – INTERNET

AndroidManifest.xml

 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
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.bcliks.imagefromurl"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
    
    <!-- Internet Permissions -->
    <uses-permission android:name="android.permission.INTERNET" />
    

    <application        
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
         >
        
        <activity android:name="com.bcliks.imagefromurl.LoadImageFromURLomURL"
            android:label="@string/app_name"> 
            <intent-filter>             
                     <action android:name="android.intent.action.MAIN" />
                  <category android:name="android.intent.category.LAUNCHER" />                
         </intent-filter>            
     </activity>
 
    </application>
</manifest>

3. For testing purpose create a simple ImageView in your main.xml file

main.xml

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
 
    <ImageView android:id="@+id/image"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_margin="10dip"/>
 
</LinearLayout>

4. Open your main activity and type the following code. Whenever you want to show an image from url just call the following code.
1
Picasso.with(getApplicationContext()).load(image_url).into(imgView);

LoadImageFromURLomURL.java

 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 com.bcliks.imagefromurl;
 
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.widget.ImageView;
 
public class LoadImageFromURLomURL extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // Imageview to show
        ImageView imgView = (ImageView) findViewById(R.id.image);
         
        // Image url
        String image_url ="http://www.empireonline.com/images/uploaded/wreck-it-ralph-box-office.jpg";
         
        // whenever you want to load an image from url
        // call below function
        // url - image url to load
        // placeholder- loader image, will be displayed before getting image
        // image - ImageView     
   
               Picasso.with(con).load(image_url) 
           .placeholder(R.drawable.icon_placehoder)
           .error(R.drawable.icon_img_error)
           .resizeDimen(80, 80)         
           .centerInside()            
           .into(imgView);    
  }
}




 Result:

Useful links:

bCliks

To make something special you just have to believe it’s special!