Android Picasso Loading Image from Http Url Tutorial

Get image from Server image path and display into ImageView in android application.

In this tutorial we would show image from HTTP URL inside the android app with the use of Android Picasso Loading Image library. This library is one of the extremely famous image download and caching library available on internet. You can find its official documentation Here.

Contents in this project Android Picasso Loading Image :

  1. Watch the video of this tutorial in live emulator device
  2. Start a fresh project in Android Studio
  3. Linking the Picasso library to your project
  4. Get any image URL from your own website or any other blog to test the app
  5. Add internet permission to your project
  6. Declaring ImageView & Button in your layout file
  7. Declare ImageView and Button objects in MainActivity.java
  8. Getting their ID’s
  9. Add setOnClickListener() on Button
  10. Calling Picasso.with() method to load image

1. Watch the video of this tutorial in live emulator device .

2. Start a fresh project in Android Studio : After seeing the demo video just start a new android application project on your computer.

3. Adding Picasso library to your Android Studio project .

1. Picasso library is very compact and small library it could be easily implement in your project via build.gradle(Module : app). To add open your project’s build.gradle(Module : app) file .

2. Add compile ‘com.squareup.picasso:picasso:2.5.2’ in this file.

3. Get any image URL from your own website or any other blog to test the app .

Its very important to get any live image URL which link us directly to the Image.

4. Add internet permission to your project .

Open your project’s AndroidManifest.xml file and put all the below three permissions in it .

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

5. Declaring ImageView and Button in your layout file .

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@mipmap/ic_launcher"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/imageView" />

<Button
    android:text="Load Image From URL"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="171dp" />

6. Declare ImageView, Button objects and String variable that holds the image path in MainActivity.java .

ImageView imageView ;
Button button ;
String ImageURL = "http://androidjson.com/wp-content/uploads/2016/12/sample_image.png" ;

7. Getting their ID’s .

imageView = (ImageView)findViewById(R.id.imageView);
button = (Button)findViewById(R.id.button);

 8. Add setOnClickListener() on Button .

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

    }
});

9. Calling Picasso.with() method to load image .

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        Picasso.with(MainActivity.this)
                .load(ImageURL)
                .placeholder(R.mipmap.ic_launcher)
                .error(R.mipmap.ic_launcher)
                .resize(300,300)
                .into(imageView);

    }
});

Android Picasso Loading Image from Http Url Tutorial with Source Code.

Final Code :
Code for MainActivity.java file.

package com.androidjson.imageloading_androidjsoncom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

    ImageView imageView ;
    Button button ;
    String ImageURL = "http://androidjson.com/wp-content/uploads/2016/12/sample_image.png" ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = (ImageView)findViewById(R.id.imageView);
        button = (Button)findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Picasso.with(MainActivity.this)
                        .load(ImageURL)
                        .placeholder(R.mipmap.ic_launcher)
                        .error(R.mipmap.ic_launcher)
                        .resize(300,300)
                        .into(imageView);

            }}
);
}
}

Code for activity_main.xml layout file.

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFDE7"
    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="com.androidjson.imageloading_androidjsoncom.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/imageView" />

    <Button
        android:text="Load Image From URL"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="171dp" />

</RelativeLayout>

Code for AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidjson.imageloading_androidjsoncom">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Final Screenshot :

Android Picasso Loading Image

Download Code

5 Comments

  1. Sir i have import your project
    When i clicked on button then nothing will happen

    • Avikal this maybe you have edit some part of the code. Why don’t you create a project yourself and just follow all the steps i have write.

  2. sir I have also do this but still not working

Leave a Reply to Avikal Cancel reply

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