Network Image View

Reference: Android Volley ImageLoader and NetworkImageView Example

Displaying images over a network is fundamental for most mobile apps. Volley provides a good method of doing this.

Earlier to load images in an Android ImageView, the standard approach taken was the usage of HttpURLConnection class. But now with volley, this is simplified as we may not need to get into such complex code. Volley gives us two new classes which make life easier.

Android Volley ImageLoader

Volley uses ImageLoader to load images from the network, and also to cache them into your Android phone’s in-memory cache by using the LruCache class.

public class MainActivity extends AppCompatActivity {
    private NetworkImageView image;
    private ImageLoader imageLoader;

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

        image = (NetworkImageView) findViewById(R.id.networkImageView);
        
    }

    @Override
    protected void onStart() {
        super.onStart();

        RequestQueue queue = Volley.newRequestQueue(this);
        imageLoader = new ImageLoader(queue, new ImageLoader.ImageCache() {
            private final LruCache<String, Bitmap> mCache = new LruCache<String, 
                        Bitmap>(20);

            @Override
            public Bitmap getBitmap(String url) {
                return mCache.get(url);
            }

            @Override
            public void putBitmap(String url, Bitmap bitmap) {
                mCache.put(url, bitmap);

            }
        });
        final String url = 
           "https://static.toiimg.com/photo/msid-67586673/67586673.jpg";
        image.setImageUrl(url, imageLoader);
    }

}

The ImageLoader class provides a centralized point for loading images in Volley. Using ImageLoader is the preferred way for getting images from remote sources.

Don't forget to add the Volley library:

implementation 'com.android.volley:volley:1.1.1'

Don't forget the INTERNET and ACCESS NETWORK STATE permissions

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

Android Volley NetworkImageView

A new view introduced with Android volley is NetworkImageView. As a matter of fact this view replaces the standard ImageView, when comes to the usage of volley. Android Volley NetworkImageView is designed in such a way that it creates an image request, sends it and even displays the image, after it is downloaded from the URL. Also, it cancels the request on its own if it is detached from the view hierarchy. Hence no need to handle the request cancellations with Volley NetworkImageView. Have a look at the layout for this Android Volley ImageLoader and NetworkImageView Example, it just includes a NetworkImageView instead of ImageView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    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=".MainActivity">
    <com.android.volley.toolbox.NetworkImageView
        android:id="@+id/networkImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#000000"/>
</RelativeLayout>

dimen XML file

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
</resources>

Output: