Wednesday 4 December 2013

Rounded NetworkImageView Using volley in android.

Hi ....

        This is some what pretty what i did today. I want to make NetworkImageView in  volley library from square view to rounded Image view....


1) First thing i am goggling the how to convert  ImageView to RoundedImage view .I founded the bellow           code. Thanks to author.

     import android.graphics.Bitmap;
     import android.graphics.Canvas;
     import android.graphics.Paint;
     import android.graphics.PorterDuffXfermode;
     import android.graphics.Rect;
     import android.graphics.RectF;
     import android.graphics.Bitmap.Config;
     import android.graphics.PorterDuff.Mode;

     public class ImageHelper {

         public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
 Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
 Canvas canvas = new Canvas(output);

 final int color = 0xff424242;
 final Paint paint = new Paint();
 final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
 final RectF rectF = new RectF(rect);
 final float roundPx = pixels;

paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);

return output;
   }
       }

    Looks good,. If you want copy this code .. yes you can .. but say thanks to author. Ok lets move


2)  Go to your Volley Library in Eclipse and open the package "com.android.volley.toolbox" . Paste the             above class into that package.
          .....Completed? Ok. move on

3) Open the NetworkImageView Class in your volley Library. Search for bellow line of code.
     
                        setImageBitmap(response.getBitmap());

     Got it?.. Great

4) Replace the above line of code ....

                 setImageBitmap(ImageHelper.getRoundedCornerBitmap(
response.getBitmap(), 50));

                  "50"  is the no of pixels to make curves at the angles.


        Thats it....Thanks ...I did my own way. May be any thing changes any other good solutions i love to here in comments section ...















                       



   
           
           
      

7 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Thanks for this! I modified it and created a class that extends NetworkImageView that creates circular images : https://gist.github.com/bkurzius/99c945bd1bdcf6af8f99

    ReplyDelete
  3. hello, i only having volley jar then how can i get the volley library...

    ReplyDelete
  4. @Vinoj Vedamonickam: Brian 7 answer is perfect for your case.

    ReplyDelete
  5. Its good when the image is loaded for the first time but on later request when its loaded from cache, the view becomes rectangle

    ReplyDelete