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 :
- Watch the video of this tutorial in live emulator device
- Start a fresh project in Android Studio
- Linking the Picasso library to your project
- Get any image URL from your own website or any other blog to test the app
- Add internet permission to your project
- Declaring ImageView & Button in your layout file
- Declare ImageView and Button objects in MainActivity.java
- Getting their ID’s
- Add setOnClickListener() on Button
- 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 :
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.
sir I have also do this but still not working
Avikal send me your code on [email protected] . I will check the whole code.
ok sir