Friday, 24 June 2016

Android Image loading using Library Universal Image loader (UIL) | Image loading from Internet

Hello guys in this post i am going to share with you best library for image loading in android called Universal Image Loader , a lot libraries are available like Picasso,glide..for image loading from internet and SD card but I always prefer to use universal image loader.


So in this post i will make a Recyclerview of images and all images will be downloaded from  internet for that i will use ten static image url to download image and will show it in Recyclerview.

Like every post i will make module of steps and then we will follow that to complete this tutorial.

  1. Create a new project in your Android Studio. Go to File>>New>>New project.
  2. Add Universal Image Loader library and Recyclerview to build.gradle of app module.
  3. Add Internet permission in manifest file.
  4. Initialize Universal Image Loader inside MainActivity.
  5. Add Recyclerview in your activity_main.xml file.
  6. Create single row ui for your recyclerview.
  7. Create Adapter for Recyclerview if you are not familiar with recyclerview than must follow my post of Recyclerview.
  8. Set image into image of Recyclerview using Universal image loader.
  9.  Set Layout manager and adapter to Recyclerview inside MainActivity.

1.Open your android studio and create a new project. Go to File>>New>>New project like below image.



2.Open build.gradle file of app module and add two dependency to it one for Universal Image Loader and another for Recyclerview in simple way just copy and paste these two dependency.


compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
    compile 'com.android.support:recyclerview-v7:24.0.0'

3.Since app will download image from internet so we need to add permission in manifest file here is manifest file.

4. To use Universal Image Loader in application we need to initialize it in our MainActivity so here is the code to Initialize Universal Image Loader in MainActivity. copy and paste below code in onCreate() of MainActivity.


1
2
 ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(this).build();
        ImageLoader.getInstance().init(config);


5.Since we are listing all image in Recyclerview so we need to add Recyclerview in our activity_main.xmkl file here is my activity_main.xml.

6.Create single row of Recyclerview ,since we are going to show only image so its very simple layout here is my single_row.xml.
7.Create Adapter for Recyclerview if you are not familiar with recyclerview than must follow my post of Recyclerview. So I am listing some steps follow these to complete your adapter class.

  • Create a java class name it anything in my case this is ListAdapter
  • Create another class inside ListAdapter class name it ListHolder.
  • extends RecyclerView.Adapter<ListAdapter.ListHolder> to ListAdapter where Adapter is of ListHolder type.
  • Implement all method of Recyclerview.Adapter .
  • Create a Constructor wtih single parameter of Context type.
  • Create four instance, one for Context,one for ImageLoader,one for DisplayImageOptions and one for LayoutInflater like below code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    private ImageLoader imageLoader;
    private DisplayImageOptions options;
    private LayoutInflater inflater;
    private Context context;
    String[] images = {"https://2.bp.blogspot.com/-qdVGBrZpNEo/Vzs7Dyba8eI/AAAAAAAANXg/oQGukisNydIcTA733Q8qNX1xryCNrP1-gCLcB/s640/AndroidNotification.png",
            "https://2.bp.blogspot.com/-MtTDhb_9QGw/Vr9OXfE0hqI/AAAAAAAAMZo/e9Advd4xPmY/s1600/Googleplus.png",
            "http://3.bp.blogspot.com/-hEsy8I3DVrA/ViFFalr14kI/AAAAAAAAL74/nfZd4behDE0/s1600/material-tabs.png",
            "https://4.bp.blogspot.com/-fzCN1en9BXY/VslDs985vvI/AAAAAAAAMbU/JycBEflEJcI/s1600/sqlitedemo.png",
            "https://3.bp.blogspot.com/-0CvhPeUCDes/VtGVTINSNhI/AAAAAAAAMc8/CzGr-nlqgS8/s1600/FacebookIntegration.png",
            "http://2.bp.blogspot.com/-DpC34QctSsI/Vh6JZjWY-0I/AAAAAAAAL5c/-UgJEDKYays/s1600/pushNotification.png",
            "http://4.bp.blogspot.com/-8u_hqbGb30g/VjR9WflhCNI/AAAAAAAAMFs/namqhGH1AE0/s1600/material_mcs1_original.png",
            "http://1.bp.blogspot.com/-5nkpiqWiPkg/Vj9jWk0IyiI/AAAAAAAAMIQ/uEBdjXr3jCY/s1600/TwitterloginAndroid.png",
            "http://3.bp.blogspot.com/-oY46UYNjKFk/Vike7jlX05I/AAAAAAAAMBA/OjeJp6BAio8/s640/studio-hero.jpg",
            "http://4.bp.blogspot.com/-UgboLypyx9s/Vq5LeA35rbI/AAAAAAAAMXs/4fGJQPURYwg/s1600/seekbarinandroid.png"};
in above code i have also created an array of static image urls.
  • Now inside inside constructor initialize all instances created above.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
 public ListAdapter(Context context) {

        this.context=context;
        inflater=LayoutInflater.from(context);

        imageLoader = ImageLoader.getInstance();

        options = new DisplayImageOptions.Builder()
                .showImageOnLoading(R.drawable.place_holder)
                .showImageForEmptyUri(R.drawable.place_holder)
                .showImageOnFail(R.drawable.place_holder)
                .cacheInMemory(true)
                .cacheOnDisk(true)
                .considerExifParams(true)
                .bitmapConfig(Bitmap.Config.RGB_565)
                .build();


    }
  • Inside onCreateViewHolder inflate single_row.xml and return ViewHolder object like below code.

1
2
3
4
5
6
7
 @Override
    public ListHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View view=inflater.inflate(R.layout.single_row,parent,false);
        ListHolder holder=new ListHolder(view);
        return holder;
    }

  • Now inside ListHolder class Create instance of ImageView and initialize it inside Constructor of ListHolder class like below code.

1
2
3
4
5
6
7
 class ListHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        public ListHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.image);
        }
    }

  • In this step set image to ImageView using Universal Image Loader and also set size of list in getItemCount method.

1
2
3
4
5
6
7
8
9
 @Override
    public void onBindViewHolder(ListHolder holder, int position) {
        imageLoader.displayImage(images[position], holder.imageView, options);
    }

    @Override
    public int getItemCount() {
        return images.length;
    }

in above code you can see imageLoder is used to set image in ImageView. and we completed code for Adapter class here is my complete code of ListAdapter class.

7.Now this is our last step very simple initialize and Rycylerview inside MainActivity and set LayoutManager and Adapter to it. here is my MainActivity.java

we have complete this tutorial , still having any problem feel free to comment and don't forget to give your feedback because it always motivate us to write new things , you can download complete code from below download button. in our next post we are going to show how to set image in to list from sdcard using Universal Image Loader so keep visiting.

https://codeload.github.com/kundansviet/Image-Loading-in-List-Using-Universal-Image-Loader/zip/master

0 comments:

Post a Comment