Tag Archives: Round Image

featured

Hello nerds ! How you doing ? Today’s tutorial is very short and very unique that is how to Round an Squared Image.

So checkout this awesome and Easy tutorial and you can download source code here.

Download Code

Lets Code , Lets start with designing part , I have activity_main.xml file in which i have taken two imageView one is showing input and another is showing output(UPPER IMAGE).

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    
    android:orientation="vertical"
    android:background="#000" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:layout_gravity="center"
        android:src="@drawable/rr" />
       <ImageView
         android:layout_marginTop="5dp"
        android:id="@+id/imageView2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:layout_gravity="center"
        android:src="@drawable/rr" />
    

</LinearLayout>

put your image in drawable folder my squared image is –

round_image_android

Now make a class namely RoundImage.java in which we will make our image round and paste this file in your package .

RoundImage.java

package androidarena.roundimage;

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;

public class RoundImage extends Drawable {
	private final Bitmap mBitmap;
	private final Paint mPaint;
	private final RectF mRectF;
	private final int mBitmapWidth;
	private final int mBitmapHeight;

	public RoundImage(Bitmap bitmap) {
		mBitmap = bitmap;
		mRectF = new RectF();
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		mPaint.setDither(true);
		
		final BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
		mPaint.setShader(shader);

		mBitmapWidth = mBitmap.getWidth();
		mBitmapHeight = mBitmap.getHeight();
	}

	@Override
	public void draw(Canvas canvas) {
		canvas.drawOval(mRectF, mPaint);
	}

	@Override
	protected void onBoundsChange(Rect bounds) {
		super.onBoundsChange(bounds);

		mRectF.set(bounds);
	}

	@Override
	public void setAlpha(int alpha) {
		if (mPaint.getAlpha() != alpha) {
			mPaint.setAlpha(alpha);
			invalidateSelf();
		}
	}

	@Override
	public void setColorFilter(ColorFilter cf) {
		mPaint.setColorFilter(cf);
	}

	@Override
	public int getOpacity() {
		return PixelFormat.TRANSLUCENT;
	}

	@Override
	public int getIntrinsicWidth() {
		return mBitmapWidth;
	}

	@Override
	public int getIntrinsicHeight() {
		return mBitmapHeight;
	}

	public void setAntiAlias(boolean aa) {
		mPaint.setAntiAlias(aa);
		invalidateSelf();
	}

	@Override
	public void setFilterBitmap(boolean filter) {
		mPaint.setFilterBitmap(filter);
		invalidateSelf();
	}

	@Override
	public void setDither(boolean dither) {
		mPaint.setDither(dither);
		invalidateSelf();
	}

	public Bitmap getBitmap() {
		return mBitmap;
	}
}

Now your MainActivity.java file in which you will call RoundImage Object.

MainActivity.java

package androidarena.roundimage;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;

import androidarena.roundimage.R;

public class MainActivity extends Activity {

	ImageView imageView1, imageView2;
	RoundImage roundedImage, roundedImage1;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		imageView1 = (ImageView) findViewById(R.id.imageView1);
		Bitmap bm = BitmapFactory.decodeResource(getResources(),R.drawable.rr);
		roundedImage = new RoundImage(bm);
		imageView1.setImageDrawable(roundedImage);
	
	}
}

Now Run your App and you will surprise to see –

Output – 

output_round

 

Feel free to download the source code and ask any query. Happy Coding :p