How to create round corner image using volley library android

Question

I am getting image urls from server with square shape I have to make it to rounded corner images.Actually I am using volley library ,I know how to create round corner images

Answer 1

Volley has nothing to do with round corner image .

You can make a simple circle with white border and transparent content with shape.

// res/drawable/circle.xml

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
         android:innerRadius="0dp"
         android:shape="ring"
         android:thicknessRatio="1.9"
         android:useLevel="false" >
  <solid android:color="@android:color/transparent" />

      <stroke
           android:width="10dp"
           android:color="@android:color/white" />
  </shape>

Then make a layerlist drawable and put it as background to your networkimageview.

// res/drawable/img.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

   <item android:drawable="@drawable/ic_launcher"/>
   <item android:drawable="@drawable/circle"/>

</layer-list>

and put it as background to your networkimageview.

 <com.android.volley.toolbox.NetworkImageView
    android:id="@+id/networkImageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:background="@drawable/img"
    android:src="@drawable/ic_launcher" />

You'll have something like that.

Answer 2

I found an source code which makes imageview rounded shape e.g. https://github.com/hdodenhof/CircleImageView. which was extending imageview, I just make it extend NetworkImageView. Everything working fine for me. If you don't want to use above circular image view, you have to extend NetworkImageView class and customize to meet your needs.

Answer 3

This is how I did it:

• In the volley library, copy the class called "NetworkImageView" and name it "NetworkImageViewCircle".

  private void setAnimateImageBitmap(final Bitmap bitmap, boolean fadeIn) {
  
  final Bitmap bmp;
  
  bmp = Bitmap.createBitmap(bitmap.getWidth(),
          bitmap.getHeight(), Bitmap.Config.ARGB_8888);
  BitmapShader shader = new BitmapShader(bitmap,
          BitmapShader.TileMode.CLAMP,
          BitmapShader.TileMode.CLAMP);
  
  float radius = Math.min(bitmap.getWidth(), bitmap.getHeight()) / 5;
  Canvas canvas = new Canvas(bmp);
  Paint paint = new Paint();
  paint.setAntiAlias(true);
  paint.setShader(shader);
  
  RectF rect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
  canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);
  .
  .
  .
  

This made the trick for me. hope it helps.

Answer 4

That worked for me

    <android.support.v7.widget.CardView
       android:id="@+id/container"
       android:layout_width="80dp"
       android:layout_height="80dp"
       app:cardCornerRadius="5dp"
       app:cardElevation="0dp" >

    <com.android.volley.toolbox.NetworkImageView
        android:id="@+id/thumb"
        android:layout_width="80dp"
        android:layout_height="80dp"/>

</android.support.v7.widget.CardView>

Answer 5

you need to extend NetworkImageView class and create own view

Java: CircularNetworkImageView

import android.content.Context;
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;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;


import com.android.volley.toolbox.NetworkImageView;



public class CircularNetworkImageView extends NetworkImageView {
    Context mContext;

    public CircularNetworkImageView(Context context) {
        super(context);
        mContext = context;
    }

    public CircularNetworkImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        mContext = context;
    }

    public CircularNetworkImageView(Context context, AttributeSet attrs,
                                    int defStyle) {
        super(context, attrs, defStyle);
        mContext = context;
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        if(bm==null) return;
        setImageDrawable(new BitmapDrawable(mContext.getResources(),
                getCircularBitmap(bm)));
    }

    /**
     * Creates a circular bitmap and uses whichever dimension is smaller to determine the width
     * <br/>Also constrains the circle to the leftmost part of the image
     *
     * @param bitmap
     * @return bitmap
     */
    public Bitmap getCircularBitmap(Bitmap bitmap) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        int width = bitmap.getWidth();
        if(bitmap.getWidth()>bitmap.getHeight())
            width = bitmap.getHeight();
        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, width, width);
        final RectF rectF = new RectF(rect);
        final float roundPx = width / 2;

        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;
    }
}

XML

<com.example.own.CircularNetworkImageView
        android:id="@+id/image"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginRight="10dp"/>

Usage:

    CircularNetworkImageView image = (CircularNetworkImageView) view.findViewById(R.id.image);
    private ImageLoader netImageLoader=AppController.getInstance().getImageLoader();
    image.setImageUrl("imageurl", netImageLoader);

Answer 6

you can use CardView.

<android.support.v7.widget.CardView 
    app:cardCornerRadius="@dimen/spacing_tiny">

    <com.android.volley.toolbox.NetworkImageView>
    ...
    />
</android.support.v7.widget.CardView>