Tuesday, 28 January 2014

Circular image and imageview in android

Here is the procedure to create circular image in android:

First method:

Bitmap bitmap = get some bitmap image;
     
       
        if(bitmap!=null)
       
        {
   
   int targetWidth = 65;
   int targetHeight = 65;
   Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, targetHeight,Bitmap.Config.ARGB_8888);
   BitmapShader shader;
   shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

   Paint paint = new Paint();
   paint.setAntiAlias(true);
   paint.setShader(shader);
   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);
   paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
   paint.setStyle(Paint.Style.STROKE);
   canvas.clipPath(path);
   Bitmap sourceBitmap = bitmap;
   canvas.drawBitmap(sourceBitmap, new Rect(0, 0, sourceBitmap.getWidth(),sourceBitmap.getHeight()),
   new Rect(0, 0, targetWidth,targetHeight), null);
 
 
    imageView.setImageBitmap(targetBitmap);   //set the circular image to your imageview
        }
        else
        {
            queuePhoto(url, imageView);
            imageView.setImageResource(stub_id);
        }




here is the demo:








Another method:


Create Circular imageview:

public class CircularImageView extends ImageView
{
    private int borderWidth = 4;
    private int viewWidth;
    private int viewHeight;
    private Bitmap image;
    private Paint paint;
    private Paint paintBorder;
    private BitmapShader shader;

    public CircularImageView(Context context)
    {
        super(context);
        setup();
    }

    public CircularImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        setup();
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        setup();
    }

    @SuppressLint("NewApi")
private void setup()
    {
        // init paint
        paint = new Paint();
        paint.setAntiAlias(true);

        paintBorder = new Paint();
        setBorderColor(Color.GREEN);
        paintBorder.setAntiAlias(true);
        this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
        paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
    }

    public void setBorderWidth(int borderWidth)
    {
        this.borderWidth = borderWidth;
        this.invalidate();
    }

    public void setBorderColor(int borderColor)
    {
        if (paintBorder != null)
            paintBorder.setColor(borderColor);

        this.invalidate();
    }

    private void loadBitmap()
    {
        BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();

        if (bitmapDrawable != null)
            image = bitmapDrawable.getBitmap();
    }

    @Override
    public void onDraw(Canvas canvas)
    {
        // load the bitmap
        loadBitmap();

       
        if (image != null)
        {
            shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            paint.setShader(shader);
            int circleCenter = viewWidth / 2;

         
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth - 4.0f, paintBorder);
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter - 4.0f, paint);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec, widthMeasureSpec);

        viewWidth = width - (borderWidth * 2);
        viewHeight = height - (borderWidth * 2);

        setMeasuredDimension(width, height);
    }

    private int measureWidth(int measureSpec)
    {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY)
        {
            // We were told how big to be
            result = specSize;
        }
        else
        {
            // Measure the text
            result = viewWidth;
        }

        return result;
    }

    private int measureHeight(int measureSpecHeight, int measureSpecWidth)
    {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpecHeight);
        int specSize = MeasureSpec.getSize(measureSpecHeight);

        if (specMode == MeasureSpec.EXACTLY)
        {
            result = specSize;
        }
        else
        {
            result = viewHeight;
        }

        return (result + 2);
    }
}


And call the class in your layout:

<com.newapplication.CircularImageView
    android:id="@+id/row_icon"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="22dp"
    android:contentDescription="@string/app_name"
    android:padding="10dp"
    android:scaleType="fitCenter"
    android:src="@drawable/peacock" />

2 comments:

Shobin Jindal said...

Shader.TileMode.CLAMP
Getting the error of Shader.

Geetha Devi said...

Congratulations guys, quality information you have given!!!..Its really useful blog. Thanks for sharing this useful information..Android Training institute in chennai with placement | Android Training in chennai |Android Training in Velachery | android development course fees in chennai