Hello friends, welcome to our new Android App Tutorial. In this tutorial we will create a simple android volley example application to load images from internet. I have already posted some android volley example applications in previous tutorials. So in this tutorial we will use the volley library to load images from internet.
Creating Android Volley Example Project
- Open Android Studio and create a new project (I created LoadImageVolley)
- Now add volley library to your project. If you don’t know how to do this you can check my first android volley tutorial
- Now we need to create the layout for our main screen. We will create an EditText, a Button and an ImageView.
- This is the layout I created
- For creating the above layout you can use this code
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 33 34 35 36 37 | <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/editTextUrl" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/buttonLoad" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Image" /> </LinearLayout> <com.android.volley.toolbox.NetworkImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/imageView" /> </LinearLayout> |
- As you can see in the above code we did not use the normal ImageView. We are using NetworkImageView.
- Now we will create a new java class for our CustomVolleyRequest. Create a new java class, I just created CustomVolleyRequest.java and Write the following code.
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | package net.simplifiedcoding.loadimagevolley; import android.content.Context; import android.graphics.Bitmap; import android.support.v4.util.LruCache; import com.android.volley.Cache; import com.android.volley.Network; import com.android.volley.RequestQueue; import com.android.volley.toolbox.BasicNetwork; import com.android.volley.toolbox.DiskBasedCache; import com.android.volley.toolbox.HurlStack; import com.android.volley.toolbox.ImageLoader; /** * Created by Belal on 10/8/2015. */ public class CustomVolleyRequest { private static CustomVolleyRequest customVolleyRequest; private static Context context; private RequestQueue requestQueue; private ImageLoader imageLoader; private CustomVolleyRequest(Context context) { this.context = context; this.requestQueue = getRequestQueue(); imageLoader = new ImageLoader(requestQueue, new ImageLoader.ImageCache() { private final LruCache<String, Bitmap> cache = new LruCache<String, Bitmap>(20); @Override public Bitmap getBitmap(String url) { return cache.get(url); } @Override public void putBitmap(String url, Bitmap bitmap) { cache.put(url, bitmap); } }); } public static synchronized CustomVolleyRequest getInstance(Context context) { if (customVolleyRequest == null) { customVolleyRequest = new CustomVolleyRequest(context); } return customVolleyRequest; } public RequestQueue getRequestQueue() { if (requestQueue == null) { Cache cache = new DiskBasedCache(context.getCacheDir(), 10 * 1024 * 1024); Network network = new BasicNetwork(new HurlStack()); requestQueue = new RequestQueue(cache, network); requestQueue.start(); } return requestQueue; } public ImageLoader getImageLoader() { return imageLoader; } } |
- We will use the above class for our volley request
- Now come to MainActivity.java and write the following code
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | package net.simplifiedcoding.loadimagevolley; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.ImageView; import android.widget.Toast; import com.android.volley.toolbox.ImageLoader; import com.android.volley.toolbox.NetworkImageView; public class MainActivity extends AppCompatActivity implements View.OnClickListener { private EditText editTextUrl; private Button buttonLoad; private NetworkImageView imageView; private ImageLoader imageLoader; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); editTextUrl = (EditText) findViewById(R.id.editTextUrl); buttonLoad = (Button) findViewById(R.id.buttonLoad); imageView = (NetworkImageView) findViewById(R.id.imageView); buttonLoad.setOnClickListener(this); } private void loadImage(){ String url = editTextUrl.getText().toString().trim(); if(url.equals("")){ Toast.makeText(this,"Please enter a URL",Toast.LENGTH_LONG).show(); return; } imageLoader = CustomVolleyRequest.getInstance(this.getApplicationContext()) .getImageLoader(); imageLoader.get(url, ImageLoader.getImageListener(imageView, R.drawable.image, android.R.drawable .ic_dialog_alert)); imageView.setImageUrl(url, imageLoader); } @Override public void onClick(View v) { if(v == buttonLoad){ loadImage(); } } } |
- Now just add the internet permission to your manifest file
1 2 3 | <uses-permission android:name="ANDROID.PERMISSION.INTERNET"/> |
- Now run your application, you will see the following output
Bingo! Its working absolutely fine. You can download the source code of my project from the link below.
[easy_media_download url=”https://adf.ly/1PYTwt” text=”Download Source”]
Android Volley Example to Load Image from Internet – Video Demo
So thats all for this Android Volley Example Application. Feel free to ask if having any query or doubt with your comments. 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.
![Circular Progress Bar Android Tutorial [4 Easy Steps]](https://i0.wp.com/www.simplifiedcoding.net/wp-content/uploads/2021/01/Circular-Progress-Bar-Android.jpg?fit=300%2C169&ssl=1 "Circular Progress Bar Android Tutorial [4 Easy Steps]")
hi belal, thanks for the totorials you have done a good job.
I m searching for lazyloading for images to show in app can u please show me how to do it with volley..
I will try to post a tutorial for this as well
how do i use this for MYSQL database?
Like ruddi asked, what if i want to retrieve images from mysql?
check this tutorial
http://www.simplifiedcoding.net/android-download-image-from-server-using-php-and-mysql/
Hey Belal, How are you?
You are genius, i like that for any problem occurs, you have that answer.
Thank you, so much for all this tutorials.
Hi,
Why you use NetworkImageView for display image whats the difference between ordinary imageview and a networkimageview ? Plz explain….
Hello Belal,
First of all thank you very very much for all those awesome tutorials. I have a quick question about his particular tutorial. I followed it and got – cannnot resolve symbol ‘image’ in the following function call:
imageLoader.get(url, ImageLoader.getImageListener(imageView, R.drawable.image, android.R.drawable
.ic_dialog_alert));
I do not have an image called ‘image’ in my project. I have a valid image url, is not that enough? Am I missing something??
Any help is highly appreciated.
Best,
Erol
tnx alot, it was useful for me:)
in my case it is not fetching any image from url.It is just showing the image from drawable folder and that too for a sec.
Hey Belal, How are you?
You are genius, i like that for any problem occurs, you have that answer.
Thank you, so much for all this tutorials.
if i want to download image to local memory how to do it???
Hai,I am developing a weather app.In that I have to display different icons based on particular range of values in database.I am using wamp server for database connectivity and android studio(version 5.0).Can u plz help me…
is volley automatically manage cache in android….how
thanks so much my friend, your tutorials helps me so much. You inspired me to be android programmer thanks a lot… your code are so simple to understand and very powerful they never gave me any error, thanks brother khan
Thanks so much for your tutorials. In order to learn android, i’m building an app for vote (simple vote) i want to fetch data from mysql databases with image. I use volley like your tutorial on how to fetch data from mysql databases using Volley now i want to use this tutorial to also fetch image (the link is in the database)… Can you help me to merge the two codes?
Thanks in advance.
Sorry for my english.
Hi Belal Sir
I loved all your Posts Which is very helpful.
Now I need some help from you.
Can you provide me some useful links or post of yours (if available) about How to Upload image to server with some multiple fields like name,email, username and then fetch that data with image when username matched from login page.
I will be Very grateful..
Love and Respect
the image is not getting stored in cache