How to load Image in Image View from URL in Round Shape?

Question

I have created an android application in that I want to display image in image view from in round shape.

My code is:

    private class LoadImage extends AsyncTask<String, Void, String> 
    {
        Bitmap image=null;
        @Override
        protected String doInBackground(String... params) 
        {
            try 
            {
                URL url = new URL(imgUrl);
                image = BitmapFactory.decodeStream(url.openConnection().getInputStream());              
                image=Global.getRoundedShape(image);                                
            } 
            catch (Exception e) 
            {
                e.printStackTrace();
            }
            return "Executed";
        }
        @Override
        protected void onPostExecute(String code) 
        {
            try
            {
                profilepic.setImageBitmap(image);
            }
            catch (Exception e) 
            {
                e.printStackTrace();
            }
        }    
    }


public static Bitmap getRoundedShape(Bitmap scaleBitmapImage) 
{
    int targetWidth = 168;
    int targetHeight = 166;
    Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, 
                        targetHeight,Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);
    Path path = new Path();
    path.addCircle(((float) targetWidth - 1) / 2,
        ((float) targetHeight - 1) / 2,
        (Math.min(((float) targetWidth), 
        ((float) targetHeight)) / 2),
        Path.Direction.CCW);

    canvas.clipPath(path);
    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap, 
        new Rect(0, 0, sourceBitmap.getWidth(),
        sourceBitmap.getHeight()), 
        new Rect(0, 0, targetWidth, targetHeight), null);
    return targetBitmap;
}

I use this code, but it takes much load for load Image.

So, is there any option to make it fast ?

what if your imageview is in circular shape and it will crop your image in circular shape itself...try this https://github.com/lopspower/CircularImageView. — Pankaj Arora, Apr 11 '14 at 07:09

score 5 · Accepted Answer · answered Apr 11 '14 at 04:40

5

try below code:-

First download universal loader lib and write below code.

https://github.com/nostra13/Android-Universal-Image-Loader/downloads

int rounded_value = 120;    

DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true).cacheOnDisc(true).displayer(new RoundedBitmapDisplayer(rounded_value)).build();

ImageLoader.getInstance().displayImage(strUrl1, imgThumb1,options);

answered Apr 11 '14 at 04:40

duggu

37,851
12
116
113

I tried but, it not works. – Anjali Pandya Apr 11 '14 at 04:52
@AnjaliPandya whats ur image heigth or width – duggu Apr 11 '14 at 04:53
rounded_value = 123; try it again – duggu Apr 11 '14 at 04:56
above code not need to put on asynctask – duggu Apr 11 '14 at 04:57
I tried, it not works. – Anjali Pandya Apr 11 '14 at 05:05
seriously bcz right now its working on my 3 project without any issue !!! – duggu Apr 11 '14 at 05:12
in my code cacheInMemory(true) gives error, so i tried using cacheInMemory(). But output not achieved. – Anjali Pandya Apr 11 '14 at 05:14
it means ur using old lib file and u remove this cacheInMemory(true) then run it again. – duggu Apr 11 '14 at 05:16
I use, DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory().cacheOnDisc().displayer(new RoundedBitmapDisplayer(rounded_value)).build(); – Anjali Pandya Apr 11 '14 at 05:17
yeah u r using old lib file. – duggu Apr 11 '14 at 05:22
I use universal-image-loader-1.7.0.jar, if you have new file then please give me. – Anjali Pandya Apr 11 '14 at 05:25
https://github.com/nostra13/Android-Universal-Image-Loader – duggu Apr 11 '14 at 05:26
It gives exception - java.lang.IllegalStateException: ImageLoader must be init with configuration before using – Anjali Pandya Apr 11 '14 at 05:37
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext()).defaultDisplayImageOptions(options) .build(); ImageLoader.getInstance().init(config); this line on create method on ur application class or main activity – duggu Apr 11 '14 at 05:40
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context).build(); ImageLoader.getInstance().init(config); – Anjali Pandya Apr 11 '14 at 05:41
http://stackoverflow.com/questions/12434895/why-this-error-occured-java-lang-runtimeexception-imageloader-must-be-init-w – duggu Apr 11 '14 at 05:41
I adding these two lines, and My work is done. – Anjali Pandya Apr 11 '14 at 05:41
Thank you very much @ Hemant Chand Dungriyal. for help me. – Anjali Pandya Apr 11 '14 at 05:42
pleasure to help you! – duggu Apr 11 '14 at 05:52
Hello @Hemant Chand Dungriyal, is there any property to display image responsive ? – Anjali Pandya Apr 11 '14 at 06:43
reponsive means @AnjaliPandya (use placeholder) – duggu Apr 11 '14 at 06:51
Image is not fit into ImageView. – Anjali Pandya Apr 11 '14 at 06:53
what is url image height and width or ur image view height width – duggu Apr 11 '14 at 06:54
Heights and width are dynamic. Can we set it in specific size. – Anjali Pandya Apr 11 '14 at 06:56
fix size of image view – duggu Apr 11 '14 at 07:27
@Duggu I tried this library. It is working fine but when I tried to change the image. I am not able to get the new image. Can you please tell me solution to this problem? – Rohit Dec 03 '14 at 07:02
@Rohit you're probably caching the old image. – katalin_2003 Jan 21 '16 at 04:01

score 1 · Answer 2 · answered Apr 11 '14 at 05:47

Using below code I get round shape Image in ImageView-

int rounded_value = 123;
DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true).cacheOnDisc(true).displayer(new RoundedBitmapDisplayer(rounded_value)).build();             
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context).defaultDisplayImageOptions(options).build(); 
ImageLoader.getInstance().init(config);                 
ImageLoader.getInstance().displayImage(photo, vholder.profilepic, options);

score 0 · Answer 3 · answered Apr 11 '14 at 04:37

You have to apply border to image view :

<stroke android:width="3dp"
        android:color="#ff000000"/>

<padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"/> 

<corners android:radius="30px"/>

score 0 · Answer 4 · edited May 23 '17 at 12:31

You can try this:

public Bitmap getRoundedShape(Bitmap scaleBitmapImage) {
    int targetWidth = 50;
    int targetHeight = 50;
    Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, 
                        targetHeight,Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(targetBitmap);
    Path path = new Path();
    path.addCircle(((float) targetWidth - 1) / 2,
        ((float) targetHeight - 1) / 2,
        (Math.min(((float) targetWidth), 
        ((float) targetHeight)) / 2),
        Path.Direction.CCW);

    canvas.clipPath(path);
    Bitmap sourceBitmap = scaleBitmapImage;
    canvas.drawBitmap(sourceBitmap, 
        new Rect(0, 0, sourceBitmap.getWidth(),
        sourceBitmap.getHeight()), 
        new Rect(0, 0, targetWidth, targetHeight), null);
    return targetBitmap;
}

Refer link link

Hello @Lokesh, it is works, but it takes lots of load to load image, so is there any other option to get it ? — Anjali Pandya, Apr 11 '14 at 04:55

score 0 · Answer 5 · answered Apr 11 '14 at 04:40

0

You can define a .xml file in drawable folder like this(my_custom_):

<?xml version="1.0" encoding="UTF-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
   <corners android:radius="90dp"/> 
   <padding android:left="10dp" android:right="10dp" android:top="4dp" android:bottom="4dp"/>
   <solid android:color="#3F7CB2"/>
 </shape>

and then you can set your background to this :

android:background="@drawable/my_custom_"

answered Apr 11 '14 at 04:40

CompEng

7,161
16
68
122

@Anjali Pandya you can set radius and color what you want – CompEng Apr 11 '14 at 04:42
Gulbahar, I tried. But it not works. – Anjali Pandya Apr 11 '14 at 05:11
I set background is white and radius is 62. – Anjali Pandya Apr 11 '14 at 05:12
It displays round shape in background, image not crops. – Anjali Pandya Apr 11 '14 at 05:28

score 0 · Answer 6 · answered Apr 11 '14 at 04:43

0

Use rounded imageview using https://github.com/vinc3m1/RoundedImageView, Hope it helps you... :)

answered Apr 11 '14 at 04:43

Richa

3,165
1
22
26

Hello @Richa, I see it, but how to download RoundedImageView.jar ? – Anjali Pandya Apr 11 '14 at 04:53

score 0 · Answer 7 · 2014-04-11T05:41:41.870

Download the latest UIL library from here and use below code:

ImageLoader imageLoader = ImageLoader.getInstance();
imageLoader.init(ImageLoaderConfiguration.createDefault(context));
DisplayImageOptions options = new DisplayImageOptions.Builder()
            .showImageOnLoading(R.drawable.doctor_logo_big_transparent)
            .showImageForEmptyUri(R.drawable.doctor_logo_big_transparent)
            .showImageOnFail(R.drawable.doctor_logo_big_transparent)
            .cacheInMemory(true)
            .cacheOnDisc(true)
            .considerExifParams(true)
            .imageScaleType(ImageScaleType.EXACTLY_STRETCHED)
            .bitmapConfig(Bitmap.Config.ARGB_8888)
            .displayer(new RoundedBitmapDisplayer(125))
            .build();

final ProgressBar mSpnr = (ProgressBar) convertView.findViewById(R.id.xSpinnr);

                    imageLoader.displayImage(imgURL, yourImageView, options, new SimpleImageLoadingListener()
                    {
                        @Override
                        public void onLoadingStarted(String imageUri, View view)
                        {
                        }
                        @Override
                        public void onLoadingFailed(String imageUri, View view, FailReason failReason)
                        {
                            //mHolder.mSpnr.setVisibility(View.GONE);
                            String message = null;
                            switch (failReason.getType())
                            {
                                case IO_ERROR:
                                    message = "Input/Output error";
                                    break;
                                case DECODING_ERROR:
                                    message = "Image can't be decoded";
                                    break;
                                case NETWORK_DENIED:
                                    message = "Downloads are denied";
                                    break;
                                case OUT_OF_MEMORY:
                                    message = "Out Of Memory error";
                                    break;
                                case UNKNOWN:
                                    message = "Unknown error";
                                    break;
                            }
                            try
                            {
                                //Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
                                Log.w("TAG", ""+message);
                                mSpnr.setVisibility(View.GONE);
                            }
                            catch (Exception e)
                            {
                                e.printStackTrace();
                                mSpnr.setVisibility(View.GONE);
                            }
                        }
                        @Override
                        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage)
                        {
                            mSpnr.setVisibility(View.GONE);
                        }

                    });

Along with this, you also need to provide fixed width and height to your imageView.

yourImageView.getLayoutParams().height = 150;
yourImageView.getLayoutParams().width = 150;

You may change the value of height and width of the imageView according to the size of image you need to display.

EDIT

If you do not need to display progress-bar over the imageView, you may use below code:

private ImageLoadingListener animateFirstListener = new AnimateFirstDisplayListener();
ImageLoader imageLoader = ImageLoader.getInstance();
imageLoader.init(ImageLoaderConfiguration.createDefault(context));
DisplayImageOptions options = new DisplayImageOptions.Builder()
        .showImageOnLoading(R.drawable.doctor_logo_big_transparent)
        .showImageForEmptyUri(R.drawable.doctor_logo_big_transparent)
        .showImageOnFail(R.drawable.doctor_logo_big_transparent)
        .cacheInMemory(true)
        .cacheOnDisc(true)
        .considerExifParams(true)
        .imageScaleType(ImageScaleType.EXACTLY_STRETCHED)
        .bitmapConfig(Bitmap.Config.ARGB_8888)
        .displayer(new RoundedBitmapDisplayer(125))
        .build();
imageLoader.displayImage(imgUrl, yourImageView, options, animateFirstListener);

class AnimateFirstDisplayListener extends SimpleImageLoadingListener {

        List<String> displayedImages = Collections.synchronizedList(new LinkedList<String>());

        @Override
        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
            if (loadedImage != null) {
                ImageView imageView = (ImageView) view;
                boolean firstDisplay = !displayedImages.contains(imageUri);
                if (firstDisplay) {
                    FadeInBitmapDisplayer.animate(imageView, 500);
                    displayedImages.add(imageUri);
                }
            }
        }
    }

How to load Image in Image View from URL in Round Shape?

7 Answers7